flutter_progress_button

套件介紹

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

flutter_progress_button 是一個可自訂的開源 Material Design 按鈕，適用於 Flutter，支援多種樣式與進度狀態。以簡單性與彈性為設計核心，讓開發者能輕鬆將載入指示器、成功狀態及自訂動畫整合至按鈕中。此套件採用 MIT 許可證，專為無縫整合至任何 Flutter 專案而設計。它透過在表單提交或資料擷取等動作期間提供視覺回饋，提升使用者體驗。

適用情境

表單提交並加載狀態
使用者身分驗證流程
數據保存操作
帶有反饋的互動式 UI 元素
可自定義按鈕過渡

主要特色

支援載入與成功狀態
高度可自訂的外觀
與 Flutter 的輕鬆整合
符合 Material Design
狀態之間的動畫過渡

適合對象

開發互動式表單的開發者
需要一致按鈕樣式的團隊
需要在操作時提供視覺反饋的專案
以UI為主的應用程式
尋找輕量級元件的開源貢獻者

使用建議

有限的平台特定自訂
無內建的非 Material 主題支援
需要手動處理非同步邏輯
未針對複雜狀態機進行優化
依賴 Flutter 的 Material 套件

原始 README

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

flutter_progress_button is a free and open source (MIT license) Material Flutter Button that supports variety of buttons style demands. It is designed to be easy to use and customizable.

Get started

Depend on it

Add this to your package's pubspec.yaml file:

flutter_progress_button: '^1.0.0'

Install it

You can install packages from the command line:

$ flutter pub get

Alternatively, your editor might support flutter pub get.

Import it

Now in your Dart code, you can use:

import 'package:flutter_progress_button/flutter_progress_button.dart';

How to use

Add ProgressButton to your widget tree:

ProgressButton(
    defaultWidget: const Text('I am a button'),
    progressWidget: const CircularProgressIndicator(),
    width: 196,
    height: 40,
    onPressed: () async {
        int score = await Future.delayed(
            const Duration(milliseconds: 3000), () => 42);
        // After [onPressed], it will trigger animation running backwards, from end to beginning
        return () {
        // Optional returns is returning a VoidCallback that will be called
        // after the animation is stopped at the beginning.
        // A best practice would be to do time-consuming task in [onPressed],
        // and do page navigation in the returned VoidCallback.
        // So that user won't missed out the reverse animation.
        };
    },
),

More parameters:

ProgressButton({
    Key key,
    this.defaultWidget,
    this.progressWidget,
    this.onPressed,
    this.type = ProgressButtonType.Raised,
    this.color,
    this.width = double.infinity,
    this.height = 40.0,
    this.borderRadius = 2.0,
    this.animate = true,
}) : super(key: key);

Three types supported:

enum ProgressButtonType {
    Raised,
    Flat,
    Outline,
}

Source

Source code and example of this library can be found in git:

$ git clone https://github.com/jiangyang5157/flutter_progress_button.git

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