flutter fullscreen overlay code example

Example 1: flutter modal dialog fullscreen

showDialog(        context: context,        builder: (BuildContext context) {          return Dialog(            shape: RoundedRectangleBorder(                borderRadius:                    BorderRadius.circular(20.0)), //this right here            child: Container(              height: 200,              child: Padding(                padding: const EdgeInsets.all(12.0),                child: Column(                  mainAxisAlignment: MainAxisAlignment.center,                  crossAxisAlignment: CrossAxisAlignment.start,                  children: [                    TextField(                      decoration: InputDecoration(                          border: InputBorder.none,                          hintText: 'What do you want to remember?'),                    ),                    SizedBox(                      width: 320.0,                      child: RaisedButton(                        onPressed: () {},                        child: Text(                          "Save",                          style: TextStyle(color: Colors.white),                        ),                        color: const Color(0xFF1BC0C5),                      ),                    )                  ],                ),              ),            ),          );        });

Example 2: flutter modal dialog fullscreen

showGeneralDialog(      context: context,      barrierDismissible: true,      barrierLabel: MaterialLocalizations.of(context)          .modalBarrierDismissLabel,      barrierColor: Colors.black45,      transitionDuration: const Duration(milliseconds: 200),      pageBuilder: (BuildContext buildContext,          Animation animation,          Animation secondaryAnimation) {        return Center(          child: Container(            width: MediaQuery.of(context).size.width - 10,            height: MediaQuery.of(context).size.height -  80,            padding: EdgeInsets.all(20),            color: Colors.white,            child: Column(              children: [                RaisedButton(                  onPressed: () {                    Navigator.of(context).pop();                  },                  child: Text(                    "Save",                    style: TextStyle(color: Colors.white),                  ),                  color: const Color(0xFF1BC0C5),                )              ],            ),          ),        );      });

Example 3: add fullscreen modal on a page in flutter app

import 'package:flutter/material.dart';

class TutorialOverlay extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'This is a nice overlay',
            style: TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Dismiss'),
          )
        ],
      ),
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}


// Example application:
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  void _showOverlay(BuildContext context) {
    Navigator.of(context).push(TutorialOverlay());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: RaisedButton(
            onPressed: () => _showOverlay(context),
            child: Text('Show Overlay'),
          ),
        ),
      ),
    );
  }
}