Present modally in Flutter?

Question

How to do a modal presentation of a route in Flutter?

I figured out how to navigate to a route using the usual "push" transition, but I am struggling to implement a modal transition. See animation attached (done using native iOS). How do I present a screen modally (a screen that itself can be pushed more screens to).

See an example below. The transition I am struggling with is from "A" to "C" (and of course a way to dismiss it and go back to "A").

You may want to take a look at MaterialPageRoute, CupertinoPageRoute and PageRouteBuilder — Rémi Rousselet, Oct 05 '18 at 09:19

score 44 · Accepted Answer · edited Nov 18 '20 at 10:35

44

You can push like this:

Navigator.of(context).push(
        CupertinoPageRoute(
                fullscreenDialog: true,
                builder: (context) => SomePage(),
        ),
);

Hope this helps.

edited Nov 18 '20 at 10:35

Anit Kumar

8,075
1
24
27

answered Oct 05 '18 at 10:05

Daibaku

11,416
22
71
108

**fullscreenDialog: true** – 0llie Aug 23 '22 at 10:59

score 36 · Answer 2 · answered Aug 17 '19 at 19:00

Go to Section B(push) animation can be achieved by following:

Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SectionBRoute()),
              );

Go to Section C(present modally) animation can be achieved by following:

Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => SectionCRoute(), fullscreenDialog: true),
              );

Present modally in Flutter?

2 Answers2