Flutter进度加载按钮插件progessloadingbutton的使用

ProgressLoadingButton 是一个用于在 Flutter 应用中显示加载进度的按钮插件。它通常用于在用户点击按钮后显示加载动画，直到操作完成。以下是如何使用 progress_loading_button 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  progress_loading_button: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以安装依赖。

2. 导入包

在需要使用 ProgressLoadingButton 的 Dart 文件中导入包：

import 'package:progress_loading_button/progress_loading_button.dart';

3. 使用 ProgressLoadingButton

ProgressLoadingButton 提供了多种配置选项，允许你自定义按钮的外观和行为。以下是一个简单的示例：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  Future<void> _simulateNetworkRequest() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟网络请求
    await Future.delayed(Duration(seconds: 3));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Loading Button Example'),
      ),
      body: Center(
        child: ProgressLoadingButton(
          isLoading: _isLoading,
          onPressed: _simulateNetworkRequest,
          child: Text('Submit'),
          defaultWidget: Text('Submit'),
          loadingWidget: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
          ),
          color: Colors.blue,
          disabledColor: Colors.blue.withOpacity(0.5),
          height: 50.0,
          minWidth: 150.0,
          borderRadius: 8.0,
          animate: true,
        ),
      ),
    );
  }
}

4. 参数说明

以下是 ProgressLoadingButton 的主要参数：

• isLoading: 布尔值，表示按钮是否处于加载状态。
• onPressed: 当按钮被点击时调用的回调函数。
• child: 按钮的初始子部件（通常是文本或图标）。
• defaultWidget: 按钮默认显示的部件。
• loadingWidget: 在加载状态下显示的部件（通常是加载指示器）。
• color: 按钮的背景颜色。
• disabledColor: 按钮禁用时的背景颜色。
• height: 按钮的高度。
• minWidth: 按钮的最小宽度。
• borderRadius: 按钮的边框圆角半径。
• animate: 是否在加载状态变化时使用动画。

5. 运行应用

保存代码并运行你的 Flutter 应用。你应该会看到一个带有加载动画的按钮，点击按钮后会模拟一个网络请求，并在请求完成时停止加载动画。

6. 自定义

你可以根据需要进一步自定义按钮的外观和行为。例如，你可以使用不同的加载指示器、调整按钮的大小和颜色，或者添加更多的动画效果。

7. 处理错误和完成状态

在实际应用中，你可能还需要处理网络请求的错误和完成状态。你可以在 onPressed 回调中添加错误处理逻辑，并根据请求的结果更新 UI。

Future<void> _simulateNetworkRequest() async {
  setState(() {
    _isLoading = true;
  });

  try {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 3));

    // 请求成功
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Request successful!')),
    );
  } catch (e) {
    // 请求失败
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Request failed: $e')),
    );
  } finally {
    setState(() {
      _isLoading = false;
    });
  }
}