Popup route taking all the screen

Question

I try to make a popup with some content that will cover only a part of the screen, in the center (something like modalBottomSheet, but in the center of the screen) that will close if I press outside of it. I was able to create a class that extends PopupRoute, but the content takes all the screen ( unless I set margins to the container returned by the pageBuilder, but, in this way, the content in the back is shown, but if I click it, nothing happens).

Have anyone any ideas how can I achive what I want ?

Thanks,

Answer 1

Yes, you can do it using the PageRouteBuilder and you can use AlertDialog widget to avoid all of the dialog customization, like this:

class SamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: SizedBox(
        //HERE THE SIZE YOU WANT
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        //your content
        child: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text("Hello world"),
          ),
        ),
      ),
    );
  }
}

And open your dialog in this way:

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
                              barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) => SamplePage(),

                                      ),
                                    );

Of course you can add some extra animations using transitions in a very easy way:

Fade

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) =>
                                            FadeTransition(
                                          opacity: anim1,
                                          child: SamplePage(),
                                        ),

                                      ),
                                    );

Slide

  Navigator.push(
                                      context,
                                      PageRouteBuilder(
barrierDismissible: true,
                                        opaque: false,
                                        pageBuilder: (_, anim1, anim2) =>

                                            SlideTransition(
                                          position: Tween<Offset>(
                                                  begin: Offset(0.0, 1.0),
                                                  end: Offset.zero)
                                              .animate(anim1),
                                          child: SamplePage(),
                                        ),
                                      ),
                                    );

Or create your own transition.