future_button

带进度指示器及更多功能的、可定制的 Material 和 Cupertino 按钮。

如果您想在用户按下按钮时运行一些后台任务，然后显示任务结果，这将非常有用。

future_button

如何使用它

用法非常简单 - 目前支持5种类型的按钮

  • CupertinoButton (普通 + 填充)
  • FlatButton (普通 + 图标)
  • IconButton
  • OutlineButton (普通 + 图标)
  • RaisedButton (普通 + 图标)

要将按钮转换为 FutureButton，只需添加 Future 前缀，并确保您的 onPressed 回调的类型为 Future<void> Function()，而不是普通的 void Function()。

该包的所有功能都可以自定义。以下是所有参数的列表

/// The widget that's used as the progress indicator.
/// You can substitute it with your own progress indicator if necessary.
/// See [defaultMaterialProgressIndicatorBuilder] and[defaultCupertinoProgressIndicatorBuilder] for more info.
final WidgetBuilder progressIndicatorBuilder;

/// The location of progress indicator.
/// See [ProgressIndicatorLocation] for more info.
final ProgressIndicatorLocation progressIndicatorLocation;

/// Whether to show the result of the Future.
/// Will show [successIndicatorBuilder] if Future completes without errors.
/// Otherwise, will show [failureIndicatorBuilder].
final bool showResult;

/// Whether to animate the transitions using [AnimatedSwitcher].
/// Defaults to [true].
final bool animateTransitions;

/// Indicator to show when the Future is completed successfully.
/// Defaults to [defaultSuccessResultIndicatorBuilder].
final WidgetBuilder successIndicatorBuilder;

/// Indicator to show when the Future fails.
/// Defaults to [defaultFailureResultIndicatorBuilder].
final WidgetBuilder failureIndicatorBuilder;

/// For how long should the result be shown for.
/// Default to `Duration(seconds: 2)`.
final Duration resultIndicatorDuration;

/// Curve that's used to animate the button size.
/// Defaults to [Curves.easeInOut].
final Curve animationCurve;

/// Duration that's used to animate the button size.
/// Defaults to `Duration(milliseconds: 150)`.
final Duration animationDuration;

示例

FutureRaisedButton.icon(
  icon: Icon(Icons.star),
  label: Text('Star'),
  onPressed: () async {
    // Do some background task
    await Future.delayed(Duration(seconds: 5));
  },
);

有关更多详细信息，请参阅 example 项目。

入门

依赖它

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  future_button: ^0.1.1

安装它

您可以从命令行安装包

$ flutter pub get

导入它

现在，在您的 Dart 代码中，您可以使用

import 'package:future_button/future_button.dart';

GitHub

https://github.com/kekland/future_button