async_button_hook

Description:

async button hook

async_button_hook #

Include the package:
async_button_hook: <latest_version>
copied to clipboard
To add a layer of async capabilities to your buttons, inside a HookWidget call useAsyncButton with its necessary fields.
final asyncButton = useAsyncButton(
child: const Text('Click Me'),
onPressed: () async {
await Future.delayed(const Duration(seconds: 1));
},
);

TextButton(
child: asyncButton.child,
onPressed: asyncButton.callback,
),
copied to clipboard



The value returned from useAsyncButton includes all the values necessary to switch the appearance of your buttons. The field buttonState on the value will show you the current state. This can be used to conditionally style the button. This package depends freezed in order to create a sealed union to better handle the possible states.
final asyncButton = useAsyncButton(
child: const Text('Click Me'),
loadingWidget: const Text('Loading...'),
onPressed: () async {
await Future.delayed(Duration(seconds: 1));

// See the examples file for a way to handle timeouts
throw 'shucks';
},
);

final buttonColor = asyncButton.buttonState.when(
idle: () => Colors.yellow[200],
loading: () => Colors.grey,
success: () => Colors.orangeAccent,
error: () => Colors.orange,
);

return OutlinedButton(
child: asyncButton.child,
onPressed: asyncButton.callback,
style: OutlinedButton.styleFrom(
primary: Colors.black,
backgroundColor: buttonColor,
),
)
copied to clipboard



You can also drive the state of the button yourself using the buttonState field:
final asyncButton = useAsyncButton(
buttonState: ButtonState.completing(),
// ...
);
copied to clipboard
async_button_hook even works for custom buttons. You can define your own widgets for loading, error, and completion as well as define the transitions between them. This example is a little verbose but shows some of what's possible.
final asyncButton = useAsyncButton(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Text(
'Click Me',
style: TextStyle(color: Colors.white),
),
),
loadingWidget: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
height: 16.0,
width: 16.0,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
),
),
successWidget: Padding(
padding: const EdgeInsets.all(4.0),
child: Icon(
Icons.check,
color: Colors.purpleAccent,
),
),
onPressed: () async {
await Future.delayed(Duration(seconds: 2));
},
loadingSwitchInCurve: Curves.bounceInOut,
loadingTransitionBuilder: (child, animation) {
return SlideTransition(
position: Tween<Offset>(
begin: Offset(0, 1.0),
end: Offset(0, 0),
).animate(animation),
child: child,
);
},
);

return Material(
color: state.maybeWhen(
success: () => Colors.purple[100],
orElse: () => Colors.blue,
),
// This prevents the loading indicator showing below the
// button
clipBehavior: Clip.hardEdge,
shape: StadiumBorder(),
child: InkWell(
child: asyncButton.child,
onTap: asyncButton.callback,
),
);
copied to clipboard



Issues and PR's welcome