Flutter show full screen dialog

Question

I have the following function to show a dialog, I used media query to set it to 100%, but when it runs, I still see white margin around the dialog.

How can I archive full-screen dialog?

Future<void> showLoadingDialog(BuildContext context, GlobalKey key) async {

    Widget myDialog = SimpleDialog(
        key: key,
        backgroundColor: Colors.black54,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 10,),
                  Text("Please Wait....",style: TextStyle(color: accentColor),)
                ]),
          )
        ]);

    return showDialog<void>(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return myDialog;
        });
  }

If you are going to showing full screen... why not using Navigator push but with modal enabled? You can even make you own page route to create an enter/exit animation — Mariano Zorrilla, Apr 30 '20 at 02:20
https://stackoverflow.com/questions/52922743/how-to-create-full-screen-dialog-in-flutter-when-i-am-using-root-names-to-naviga — , Apr 30 '20 at 04:50

score 8 · Answer 1 · answered Apr 30 '20 at 04:27

You can do it using showGeneralDialog Widget.

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),
                  )
                ],
              ),
            ),
          );
        });

I would love to know what is wrong with my solution, who down voted. — Viren V Varasadiya, Apr 30 '20 at 06:49

Flutter show full screen dialog

1 Answers1