Flutter防抖按钮插件 future_debounce_button 的使用

Future Debounce Button (FDB) 是一个用于处理异步调用的按钮小部件，它通过视觉指示来提升代码的整洁性和用户体验。以下是关于如何使用这个插件的详细指南。

特性

• 提供了一个完整的样板来处理和防抖（debouncing）异步请求（如API调用等）。
• FDB按钮管理其状态，并基于提供的未来（future）及其状态进行显示。

快速开始

安装

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

dependencies:
  future_debounce_button: ^latest_version

然后运行flutter pub get。

基本使用

FDB按钮的唯一必需参数是onPressed未来（future）。其他都是可选的。

// 示例：一个处理类型为`Future<int>`的按钮
FutureDebounceButton<int>(
    onPressed: () async => submit(), // 必需：要处理的未来
    onSuccess: (result) => print('Success with result $result'), // 可选：成功时的操作
    onError: (error, stackTrace) => print('Error occurred: $error'), // 可选：错误处理
    onAbort: () => print('Operation aborted by user') // 可选：用户取消操作时的动作
);

例如，下面是一个"提交"按钮的示例，当点击时会触发一个异步操作。如果操作失败，按钮将进入“错误”状态2秒；如果成功，则永久进入“成功”状态，防止用户再次调用该未来。

/// 向服务器提交请求
Future<bool> submit() async {
    await Future.delayed(Duration(seconds: 2)); // 模拟网络延迟
    return true;
}

// '提交'按钮
FutureDebounceButton<bool>(
    buttonType: FDBType.outlined, // 显示OutlinedButton小部件
    onPressed: submit,
    actionCallText: 'Submit',
    errorStateDuration: Duration(seconds: 2), // 显示'Error'2秒钟
    successStateDuration: null // 成功后永远锁定在'Success!'
);

按钮类型

你可以从以下值中选择按钮类型：elevated, filled, filledTonal, outlined, 和 text。

状态

按钮根据所提供的未来的状态自我管理状态。可能的状态包括：

• disabled：按钮完全禁用或在按下后被禁用一段debounceDuration时间。
• ready：按钮处于正常的“行动号召”状态。
• loading：按钮已被按下并且正在执行未来。
• abort：如果提供了onAbort处理器，用户可以取消正在执行的未来。
• success：未来已成功完成。
• error：未来因超时或产生错误而失败。

示例Demo

这里提供一个更全面的示例，展示如何在应用中集成future_debounce_button。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:future_debounce_button/future_debounce_button.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  Future<int> _futureThatCompletes() async {
    await Future.delayed(Duration(seconds: 2));
    return 1;
  }

  Future<int> _future(int i) async {
    return await _futureThatCompletes();
  }

  void _incrementCounter(int value) {
    setState(() {
      _counter += value;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Future Debounce Button Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FutureDebounceButton<int>(
              onPressed: () async => _future(0),
              onSuccess: _incrementCounter,
              actionCallText: 'Click Me',
              errorStateDuration: Duration(seconds: 2),
              successStateDuration: null,
            ),
            Text('You have pushed the button this many times: $_counter'),
          ],
        ),
      ),
    );
  }
}