AsyncButtonBuilder class

A builder that wraps a button providing disabled, loading, success and error states while retaining almost full access to the original Button's API. This is useful for any long running operations and helps better improve UX.

{@tool dartpad --template=stateful_widget_material}


@override
Widget build(BuildContext context) {
  return AsyncButtonBuilder(
    child: Text('Click Me'),
    loadingWidget: Text('Loading...'),
    onPressed: () async {
      await Future.delayed(Duration(seconds: 1));

      throw 'yikes';
    },
    builder: (context, child, callback, buttonState) {
      final buttonColor = buttonState.when(
        idle: () => Colors.yellow[200],
        loading: () => Colors.grey,
        success: () => Colors.orangeAccent,
        error: () => Colors.orange,
      );

      return OutlinedButton(
        child: child,
        onPressed: callback,
        style: OutlinedButton.styleFrom(
          primary: Colors.black,
          backgroundColor: buttonColor,
        ),
      );
    },
  ),
}

{@end-tool}

Inheritance

Constructors

AsyncButtonBuilder({Key? key, required Widget child, required AsyncCallback? onPressed, required AsyncButtonBuilderCallback builder, VoidCallback? onSuccess, VoidCallback? onError, Widget? loadingWidget, Widget? successWidget, Widget? errorWidget, bool showSuccess = true, bool showError = true, EdgeInsets? errorPadding, EdgeInsets? successPadding, ButtonState buttonState = const ButtonState.idle(), Duration duration = const Duration(milliseconds: 250), Duration reverseDuration = const Duration(milliseconds: 250), bool disabled = false, Duration successDuration = const Duration(seconds: 1), Duration errorDuration = const Duration(seconds: 1), AnimatedSwitcherTransitionBuilder loadingTransitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, AnimatedSwitcherTransitionBuilder idleTransitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, AnimatedSwitcherTransitionBuilder successTransitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, AnimatedSwitcherTransitionBuilder errorTransitionBuilder = AnimatedSwitcher.defaultTransitionBuilder, Curve idleSwitchInCurve = Curves.linear, Curve loadingSwitchInCurve = Curves.linear, Curve successSwitchInCurve = Curves.linear, Curve errorSwitchInCurve = Curves.linear, Curve idleSwitchOutCurve = Curves.linear, Curve loadingSwitchOutCurve = Curves.linear, Curve successSwitchOutCurve = Curves.linear, Curve errorSwitchOutCurve = Curves.linear, Curve sizeCurve = Curves.linear, Clip sizeClipBehavior = Clip.hardEdge, Alignment sizeAlignment = Alignment.center, bool animateSize = true, bool notifications = true})
const

Properties

animateSize → bool
Whether to animate the Size of the widget implicitly.
final
builder → AsyncButtonBuilderCallback
This builder provides the widget's BuildContext, the variable child based on button state as well as the callback that should be passed to the button and the current ButtonState
final
buttonState → ButtonState
This is used to manually drive the state of the loading button thus initiating the corresponding animation and showing the correct button child.
final
child → Widget
The child of the button. In the case of an IconButton, this can be a an Icon. For a TextButton, a Text.
final
disabled → bool
This is used to manually drive the disabled state of the button.
final
duration → Duration
The animation's duration between child, loadingWidget, successWidget and errorWidget. This same value is used for both the internal AnimatedSize and TransitionBuilder.
final
errorDuration → Duration
The amount of idle time the errorWidget shows
final
errorPadding → EdgeInsets?
Optional EdgeInsets that will wrap around the errorWidget. This is a convenience field that can be replaced by defining your own errorWidget and wrapping it in a Padding.
final
errorSwitchInCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating to error
final
errorSwitchOutCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating out of error
final
errorTransitionBuilder → AnimatedSwitcherTransitionBuilder
Defines a custom transition when animating between any state and error
final
errorWidget → Widget?
The widget used to replace the child when the button is in a error state. If this is null the default widget is:
final
hashCode → int
The hash code for this object.
no setterinherited
idleSwitchInCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating to idle
final
idleSwitchOutCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating out of idle
final
idleTransitionBuilder → AnimatedSwitcherTransitionBuilder
Defines a custom transition when animating between any state and idle
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
loadingSwitchInCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating to loading
final
loadingSwitchOutCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating out of loading
final
loadingTransitionBuilder → AnimatedSwitcherTransitionBuilder
Defines a custom transition when animating between any state and loading
final
loadingWidget → Widget?
The widget replaces the child when the button is in the loading state. If this is null the default widget is:
final
notifications → bool
Whether we should bubble up AsyncButtonNotifications up the widget tree. This is useful if you want to listen to the state of the button from a parent widget.
final
onError → VoidCallback?
A callback that runs buttonState changes to ButtonState.error
final
onPressed → AsyncCallback?
A callback that runs the async task. This is wrapped in order to begin the button's internal isLoading before and after the operation completes.
final
onSuccess → VoidCallback?
A callback that runs buttonState changes to ButtonState.success
final
reverseDuration → Duration
The animation's reverse duration between child, loadingWidget, successWidget and errorWidget. This same value is used for both the internal AnimatedSize and TransitionBuilder.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showError → bool
Whether to show the errorWidget on error.
final
showSuccess → bool
Whether to show the successWidget on success.
final
sizeAlignment → Alignment
Defines the Alignment for the internal AnimatedSize
final
sizeClipBehavior → Clip
Defines the Clip for the internal AnimatedSize
final
sizeCurve → Curve
Defines a curve for the internal AnimatedSize
final
successDuration → Duration
The amount of idle time the successWidget shows
final
successPadding → EdgeInsets?
Optional EdgeInsets that will wrap around the successWidget. This is a convenience field that can be replaced by defining your own successWidget and wrapping it in a Padding.
final
successSwitchInCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating to success
final
successSwitchOutCurve → Curve
Defines a curve for the custom transition. This used in in an AnimatedSwitcher and only takes effect when animating out of success
final
successTransitionBuilder → AnimatedSwitcherTransitionBuilder
Defines a custom transition when animating between any state and success
final
successWidget → Widget?
The widget used to replace the child when the button is in a success state. If this is null the default widget is:
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<AsyncButtonBuilder>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited