Flutter进度按钮插件swift_progress_button的使用

Flutter进度按钮插件swift_progress_button的使用

Swift Progress Button 是一个专门为 Flutter 设计的可自定义的进度按钮组件，适用于各种 UI 场景。

示例截图

动态演示

描述

Swift Progress Button 简化了在 Flutter 应用程序中实现带有加载指示器的按钮的过程。它提供了一个可自定义的按钮小部件，可以无缝地在正常状态和加载状态之间切换，为用户在执行异步任务时提供视觉反馈。

特性

• 可定制的按钮：根据设计需求定义按钮尺寸、圆角半径、文本和颜色。
• 加载指示器：在执行异步任务时，在按钮内显示进度指示器。
• 响应式交互：在加载状态下防止按钮点击，避免多次提交。
• 灵活的样式：配置加载指示器的外观，包括颜色、描边宽度、高度和宽度。
• 符合 Material Design：与 Material Design 原则和 Flutter 的小部件生态系统无缝集成。

入门指南

要将 Swift Progress Button 添加到你的 Flutter 项目中，请遵循以下步骤：

1. 在 pubspec.yaml 文件中添加依赖项：

   dependencies:
     swift_progress_button: ^x.x.x # 替换为最新版本号
   

2. 导入库：

   import 'package:swift_progress_button/swift_progress_button.dart';
   

3. 在你的 UI 代码中开始使用 SwiftProgressButton 小部件。

使用示例

以下是一个简单的使用示例：

SwiftProgressButton(
  buttonHeight: 50.0,
  buttonWidth: 150.0,
  buttonRadius: 10.0,
  buttonText: "Submit",
  buttonColor: Colors.blue,
  onPressed: () {
    // 处理按钮按下事件
  },
  isLoading: false,
  textStyle: TextStyle(color: Colors.white, fontSize: 16.0),
  progressIndicatorColor: Colors.white,
  progressIndicatorStrokeWidth: 2.0,
  progressIndicatorHeight: 30.0,
  progressIndicatorWidth: 30.0,
);

对于更高级的使用和自定义选项，请参阅 GitHub 仓库中的示例目录。

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 Swift Progress Button：

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

import 'constant.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.dark(),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Swift Progress Button Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;
  bool isLoading1 = false;
  bool isLoading2 = false;

  void _showToast(BuildContext context, String textValue, Color backgroundColor) {
    final scaffold = ScaffoldMessenger.of(context);
    scaffold.showSnackBar(
      SnackBar(
        backgroundColor: backgroundColor,
        content: Text(
          textValue,
          style: const TextStyle(color: Colors.white, fontSize: 16.0),
        ),
        action: SnackBarAction(
            textColor: Colors.white,
            label: 'UNDO',
            onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SwiftProgressButton(
              buttonHeight: 55.0,
              buttonWidth: 300.0,
              buttonRadius: 8.0,
              buttonText: "Submit",
              buttonColor: Colors.red,
              onPressed: () {
                setState(() {
                  isLoading = true;
                });

                Future.delayed(const Duration(seconds: 3), () {
                  setState(() {
                    isLoading = false;
                  });
                  _showToast(context, "Action Completed!", Colors.red);
                });
              },
              isLoading: isLoading,
              textStyle: const TextStyle(color: Colors.white, fontSize: 16.0),
              progressIndicatorColor: Colors.white,
              progressIndicatorStrokeWidth: 2.0,
              progressIndicatorHeight: 30.0,
              progressIndicatorWidth: 30.0,
            ),
            const SizedBox(height: 16.0),
            SwiftProgressButton(
              buttonHeight: 55.0,
              buttonWidth: 300.0,
              buttonRadius: 8.0,
              buttonText: "Submit",
              buttonColor: appColor,
              onPressed: () {
                setState(() {
                  isLoading1 = true;
                });

                Future.delayed(const Duration(seconds: 3), () {
                  setState(() {
                    isLoading1 = false;
                  });
                  _showToast(context, "Action Completed!", appColor);
                });
              },
              isLoading: isLoading1,
              textStyle: const TextStyle(color: Colors.white, fontSize: 16.0),
              progressIndicatorColor: Colors.white,
              progressIndicatorStrokeWidth: 2.0,
              progressIndicatorHeight: 30.0,
              progressIndicatorWidth: 30.0,
            ),
            const SizedBox(height: 16.0),
            SwiftProgressButton(
              buttonHeight: 55.0,
              buttonWidth: 300.0,
              buttonRadius: 8.0,
              buttonText: "Submit",
              buttonColor: Colors.blue,
              onPressed: () {
                setState(() {
                  isLoading2 = true;
                });

                Future.delayed(const Duration(seconds: 3), () {
                  setState(() {
                    isLoading2 = false;
                  });
                  _showToast(context, "Action Completed!", Colors.blue);
                });
              },
              isLoading: isLoading2,
              textStyle: const TextStyle(color: Colors.white, fontSize: 16.0),
              progressIndicatorColor: Colors.white,
              progressIndicatorStrokeWidth: 2.0,
              progressIndicatorHeight: 30.0,
              progressIndicatorWidth: 30.0,
            ),
            const SizedBox(height: 16.0),
          ],
        ),
      ),
    );
  }
}