A Flutter package that provides a simple and powerful way to show custom overlays, toasts, banners, snackbars, dialogs etc. using the BuildContext.
Introduction
context_show simplifies the process of displaying temporary widgets on the screen. It extends BuildContext with a show() method that allows you to render any widget as an overlay, with full control over alignment, duration, and animations.
Say goodbye to boilerplate code for managing OverlayEntry and AnimationController.
Features
- πͺ Simple API: Show your widget with a single line of code:
context.show(...).
- π― Flexible alignment β display widgets at any screen position (
top, bottom, center, etc.).
- π¨ Customizable transitions β
fade, scale, slide, rotate, or compose your own.
- β
Customizable Alignment: Display widgets at any position on the screen (top, bottom, center, etc.).
- 𧩠Composable animations β chain multiple transitions fluently .
fade().scale().rotation().
- πΌοΈ Custom Background: add custom backgrounds or animated backdrops.
- π Dismissible overlays β tap outside to close with ease.
- β±οΈ Auto-dismiss β control duration or disable with
Duration.zero.
- β
Type-safe results β returns a
Future<T?> that resolves when the overlay closes.
- β‘ Lightweight β zero dependencies, built on pure
Flutter.
Usage Examples
|
Simple blue toast that slides up from the bottom and auto-dismisses after 4 seconds.
|
|
Scaffold(
body: Center(
child: ElevatedButton(
child: Text('Show'),
onPressed: () => context.show(
(_) => Container(
width: double.infinity,
color: Colors.blue,
padding: EdgeInsets.symmetric(vertical: 12),
child: const Text(
'Simple toast',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
alignment: Alignment.bottomCenter
),
),
),
);
|
|
Green banner that slides down from the top and can be only closed by clicking on the close icon button.
|
|
Scaffold(
body: Center(
child: ElevatedButton(
child: Text('Show'),
onPressed: () => context.show(
(overlay) => Container(
width: double.infinity,
color: Colors.green,
padding: EdgeInsets.all(12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Banner',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
IconButton(
onPressed: overlay.close,
icon: Icon(Icons.close),
color: Colors.white,
),
],
),
),
alignment: Alignment.topCenter,
duration: Duration.zero,
),
),
),
);
|
|
Showing multiple banners with random color and random alignment and closing them one by one with separate button
|
|
Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
child: Text('Show'),
onPressed: () {
final randomColor = Color.fromARGB(
255,
random.nextInt(256),
random.nextInt(256),
random.nextInt(256),
);
final randomAlignment = Alignment(
random.nextDouble() * 2 - 1,
random.nextDouble() * 2 - 1,
);
context.show(
(_) => Container(
color: randomColor,
padding: EdgeInsets.all(12),
child: const Text(
'Banner',
style: TextStyle(color: Colors.white),
),
),
alignment: randomAlignment,
duration: Duration.zero,
);
},
),
ElevatedButton(
child: Text('Close'),
onPressed: () => context.close(),
),
],
),
),
);
|
|
Showing Flutter logo in the center with a rotation animation, on a dimmed, dismissible background
|
|
Scaffold(
body: Center(
child: ElevatedButton(
child: Text('Show'),
onPressed: () => context.show(
(_) => FlutterLogo(size: 200),
background: (_) =>
Container(color: Colors.black.withAlpha(100)),
duration: Duration.zero,
safeArea: false,
dismissible: true,
transition: TransitionBuilders.rotation,
),
),
),
);
|
|
Displays a small red banner at the top center, aligned with the app bar and safe area insets. It slides in from below with a rotation effect, over a reddish, dismissible background
|
|
Scaffold(
appBar: AppBar(backgroundColor: Colors.blue),
body: Builder(
builder: (context) {
return Center(
child: ElevatedButton(
child: Text('Show'),
onPressed: () => context.show(
(overlay) => Container(
margin: overlay.safeArea.insets,
padding: EdgeInsets.all(12),
color: Colors.red,
child: Text('Banner'),
),
background: (_) =>
Container(color: Colors.red.withAlpha(100)),
safeArea: false,
dismissible: true,
alignment: Alignment.topCenter,
transition: Transition.slideFromBottom().rotation(),
),
),
);
},
),
bottomNavigationBar: Container(color: Colors.blue, height: 100),
);
|
