context_show 0.2.0 copy "context_show: ^0.2.0" to clipboard
context_show: ^0.2.0 copied to clipboard

Published 3 months ago β€’ verified publisherdominikkrajcer.comβ€’ Latest: 0.3.0
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
β†’

Metadata

A lightweight and flexible Flutter package for showing custom overlays, banners, toasts and dialogs with simple, context-based extension. Highly customizable and easy to use.

More...

Pub Package Build Status MIT License

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.
Simple blue toast that slides up from the bottom and auto-dismisses after 4 seconds demo 

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.
Green banner that slides down from the top and can be only closed by clicking on the close icon button demo 

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
Showing multiple banners with random color with random alignment and closing them one by one with separate button demo 

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
Showing Flutter logo in the center with a rotation animation, on a dimmed, dismissible background demo 

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
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 demo 

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),
  );

← Metadata

3
likes
160
points
14
downloads
screenshot

Publisher

verified publisherdominikkrajcer.com

Weekly Downloads

Metadata

A lightweight and flexible Flutter package for showing custom overlays, banners, toasts and dialogs with simple, context-based extension. Highly customizable and easy to use.

Repository (GitHub)
View/report issues

Topics

#overlay #toast #banner #snackbar #dialog

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on context_show

Back