Overlay

This package can help you insert and remove multiple widgets into an overlay without having to manage them yourself. It will also provide you with a simple method to close an overlay, if you wish to control that manually.

How to use

Add overlay to pubspec.yaml of your project:

dependencies:
  overlay: ^0.0.1

Import it in your Dart code:

import 'package:overlay/overlay.dart';

In any action or button, which triggers an overlay, call the constructor for the class CustomOverlay and pass the context and the widget

The overlayWidget way:

    MaterialButton(
      color: Colors.lightBlueAccent,
      child: Text('Use Overlay Widget'),
      // Call CustomOverlay Constructor in on pressed function
      onPressed: () => CustomOverlay(
        context: context,
        // Using overlayWidget
        overlayWidget: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Text(
                  'This widget is passed to the overlay using overlayWidget so there is no close button, but you can always close this overlay by tapping anywhere in the darker areas.'),
            ),
          ),
        ),
      ),
    ),

The builder way:

Builder passes a function removeOverlay as argument which can be used to manually remove the overlay

    MaterialButton(
      color: Colors.lightBlueAccent,
      child: Text('Use Overlay Builder'),
      // Call CustomOverlay Constructor in on pressed function
      onPressed: () => CustomOverlay(
        context: context,
        // Builder passes a function removeOverlay as argument which can be used to manually remove the overlay
        builder: (removeOverlay) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Column(
                children: <Widget>[
                  Text(
                    'This widget is passed to the overlay using the builder method so there is a close button, but you can also close this overlay by tapping anywhere in the darker areas.',
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FlatButton(
                          onPressed: removeOverlay,
                          child: Text('Close'))
                    ],
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    ),

License

MIT License.