Flutter's Overlay Feature Demo

main.dart

import 'package:flutter/material.dart';

/*
Overlay allows you to show your desired widget above everything.
All you have to do is pass a `context` and your `widget`. **It will be shown even above the Dialogs as well.**

When using `overlay`, your given widget will be shown above all the widgets.
However, **Keep in mind that the position of the `Overlayed` widget will be in reference to the parent widget area.**
So, **Do not forget to position the widget accordingly.**

Inspired by this [source](https://github.com/iampawan/FlutterWidgets/blob/master/lib/Episode7_Overlay/overlay_example.dart).
*/

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        title: Text('Answers'),
      ),
      body: Demo(),
      // body: IntroSliderDemo(),
    ),
  ));
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  showOverlay(BuildContext context, Widget child) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => child,
    );
    overlayState.insert(overlayEntry);
    await Future.delayed(Duration(seconds: 2));
    overlayEntry.remove();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
          child: Text('showDialog'),
          onPressed: () {
            showDialog(
              context: context,
              //showing a dialog to make sure that overlay is above dialog as well
              builder: (context2) => AlertDialog(
                content: RaisedButton(
                  child: Text('ShowOverlay'),
                  onPressed: () {
                    showOverlay(
                      context2,
                      Center(
                        child: CircleAvatar(
                          radius: 50.0,
                          backgroundColor: Colors.red,
                          child: Text("1"),
                        ),
                      ),
                    );
                  },
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}