loading_transition_button

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個可自訂的過渡按鈕，適用於 Flutter，可簡化動畫加載過程。它允許開發者使用直觀的設定，在正常、加載和成功等狀態之間建立流暢且視覺上吸引人的轉換效果。該套件支援自訂動畫、顏色、圖示和文字變更，非常適合在非同步操作期間增強使用者回饋。僅需最少設定，即可無縫整合至任何 Flutter 應用程式中，以提升表單提交或資料擷取等動作的使用者體驗。

適用情境

表單提交帶加載狀態
驗證流程進度
數據獲取指示器
支付處理UI
引導步驟完成

主要特色

可自訂的動畫過渡
支援多種按鈕狀態
可設定的顏色與圖示
輕鬆整合非同步作業
響應式設計相容性

適合對象

尋求順暢載入動畫的開發者
需要明確用戶反饋的應用程式
具有互動式按鈕的UI密集型應用
使用狀態管理模式的專案
注重使用者體驗一致性的團隊

使用建議

需要手動處理非同步邏輯
有限的平台特定自訂
無內建錯誤狀態支援
複雜版面可能需要額外的樣式
依賴外部動畫程式庫以實現進階效果

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Loading Transition button

A Customizable transition button for Flutter

Getting Started

To use this package, add loading_transition_button as a dependency in your pubspec.yaml file.

dependencies:
 ...
 loading_transition_button: ^0.0.1

How to use

In your project add the following import:

import  'package:loading_transition_button/loading_transition_button.dart';

In order to use this widget you have to use a LoadingButtonController to handler the different states.

final _controller = LoadingButtonController();

This widget starts a loading animation once it's tapped or by using the controller. You can the launcher to init an error animation or stop the loading animation.

LoadingButton(
    color: Colors.blue,
    onSubmit: () => print('onSubmit'),
    controller: _controller,
    errorColor: Colors.red,
    transitionDuration: Duration(seconds: 1),
    child: Text(
    'Hit me!',
    style: Theme.of(context)
        .textTheme
        .bodyText1!
        .copyWith(color: Colors.white),
    ),
),

To support the transition to a different page to have to call the moveToScreen method

_controller.moveToScreen(
    context: context,
    page: SearchPage(),
    stopAnimation: true,
    navigationCallback: (route) =>
        Navigator.of(context).push(route),
),

navigationCallback will send you a new route that you can use for different navigation method like push or replace.

搜尋套件、儲存庫與 APP 分類

安裝套件