Flutter Rounded Loading Button 使用教程

1. 项目介绍

flutter_rounded_loading_button 是一个 Flutter 包，提供了一个简单的实现，用于创建带有动画加载按钮的 Flutter 小部件。该按钮在加载时会显示一个圆形进度指示器，并在加载完成后显示成功或错误动画。这个包非常适合用于需要用户等待操作完成的场景，例如表单提交、数据加载等。

2. 项目快速启动

安装

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  rounded_loading_button: ^2.1.0

然后运行 flutter pub get 来安装包。

使用

在你的 Dart 文件中导入包：

import 'package:rounded_loading_button/rounded_loading_button.dart';

创建一个简单的加载按钮：

import 'package:flutter/material.dart';
import 'package:rounded_loading_button/rounded_loading_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Rounded Loading Button Example')),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  _MyButtonState createState() => _MyButtonState();
}

class _MyButtonState extends State<MyButton> {
  final RoundedLoadingButtonController _btnController = RoundedLoadingButtonController();

  void _doSomething() async {
    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 3));
    _btnController.success();
  }

  @override
  Widget build(BuildContext context) {
    return RoundedLoadingButton(
      child: Text('Tap me', style: TextStyle(color: Colors.white)),
      controller: _btnController,
      onPressed: _doSomething,
    );
  }
}

3. 应用案例和最佳实践

应用案例

• 表单提交：在用户提交表单时，显示加载按钮，直到服务器响应成功或失败。
• 数据加载：在加载数据时，显示加载按钮，直到数据加载完成。
• 文件上传：在用户上传文件时，显示加载按钮，直到文件上传成功。

最佳实践

• 自定义样式：可以通过设置 color、borderRadius 等属性来自定义按钮的外观。
• 错误处理：在 onPressed 回调中处理错误情况，并调用 _btnController.error() 来显示错误动画。
• 动画时长：通过设置 duration 属性来控制按钮动画的时长。

4. 典型生态项目

• flutter_form_builder：与表单构建器结合使用，提供更好的表单提交体验。
• flutter_bloc：与 BLoC 模式结合使用，管理状态和异步操作。
• flutter_riverpod：与 Riverpod 状态管理库结合使用，提供更灵活的状态管理。

通过这些生态项目的结合，可以进一步提升应用的用户体验和开发效率。