Flutter异步按钮构建插件async_button_build的使用

async_button

async_button 是一个用于处理异步按钮操作的小部件，它提供了一种方便的方式来在执行异步任务时显示加载状态。

特性

• 异步处理：按下按钮时运行异步函数。
• 加载状态：在任务运行时自动禁用按钮并显示加载指示器。
• 可定制化：通过 buttonBuilder 函数完全自定义按钮的外观和行为。

安装

在你的 pubspec.yaml 文件的 dependencies 下添加以下行：

dependencies:
  async_button: ^1.0.0

然后运行以下命令：

flutter pub get

使用

AsyncButton 可以帮助你轻松处理涉及异步操作（如网络请求）的按钮点击事件。你可以通过 buttonBuilder 函数自定义按钮的外观。

以下是一个完整的示例代码，展示如何使用 AsyncButton：

import 'package:flutter/material.dart';
import 'package:async_button/async_button.dart'; // 导入async_button包

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

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

class AsyncButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AsyncButton(
      onPressedAsync: () async {
        // 模拟异步操作，例如网络请求或文件读取
        await Future.delayed(Duration(seconds: 2)); // 模拟耗时2秒的操作
      },
      buttonBuilder: (BuildContext context, VoidCallback onPressed, bool working) {
        return ElevatedButton(
          onPressed: onPressed,
          child: working
            ? CircularProgressIndicator() // 加载中显示圆形进度条
            : Text('提交'), // 按钮文本
        );
      },
    );
  }
}

代码说明

1. 导入包：

   import 'package:async_button/async_button.dart';

   引入 async_button 包以便使用 AsyncButton 小部件。

2. 主应用结构：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Async Button Example'),
           ),
           body: Center(
             child: AsyncButtonExample(),
           ),
         ),
       );
     }
   }

   创建了一个简单的 Flutter 应用程序，包含一个 AsyncButtonExample 小部件作为主页。

3. AsyncButton 的使用：

   class AsyncButtonExample extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return AsyncButton(
         onPressedAsync: () async {
           // 模拟异步操作
           await Future.delayed(Duration(seconds: 2));
         },
         buttonBuilder: (BuildContext context, VoidCallback onPressed, bool working) {
           return ElevatedButton(
             onPressed: onPressed,
             child: working
               ? CircularProgressIndicator()
               : Text('提交'),
           );
         },
       );
     }
   }