[flutter] overlay example

gistfile1.txt

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: OverlayExample(),
        ),
      ),
    );
  }
}

class OverlayExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      RaisedButton(
        onPressed: () {
          showAlignedOverlay(context);
        },
        child: Text(
          "AlignedOverlay",
        ),
      ),
      RaisedButton(
        onPressed: () {
          showPositionedOverlay(context);
        },
        child: Text(
          "PositionedOverlay",
        ),
      ),
    ]);
  }

  showAlignedOverlay(BuildContext context) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = _buildAlignedOverlayEntry(context);
    overlayState.insert(overlayEntry);

    await Future.delayed(Duration(seconds: 2));

    overlayEntry.remove();
  }

  showPositionedOverlay(BuildContext context) async {
    OverlayState overlayState = Overlay.of(context);
    OverlayEntry overlayEntry = _buildPositionedOverlayEntry(context);
    overlayState.insert(overlayEntry);

    await Future.delayed(Duration(seconds: 2));

    overlayEntry.remove();
  }

  _buildAlignedOverlayEntry(BuildContext context) {
    return OverlayEntry(
        builder: (context) =>
            Align(alignment: Alignment.center, child: OverlayContents()));
  }

  _buildPositionedOverlayEntry(BuildContext context) {
    return OverlayEntry(
        builder: (context) =>
            Positioned(top: 100.0, left: 100.0, child: OverlayContents()));
  }
}

class OverlayContents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 200.0,
        height: 200.0,
        color: Colors.blue.withOpacity(0.3),
        child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center, 
              children: [
                    FloatingActionButton(
                      onPressed: () {
                        print('clicked');
                      },
                      child: Icon(Icons.navigation),
                    ),
          Container(child: Text('hello', style: Theme.of(context).textTheme.headline3,)),
        ])));
  }
}