Overlay Widget Package
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.
Screenshot
How to use
Add overlay to pubspec.yaml of your project:
ADVERTISEMENT
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 aa 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 aa 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'))
],
)
],
),
),
),
),
),
),
