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 分类