8

I searched everywhere and could not come up with an answer.

I have a BottomNavigationBar and a FloatingActionButton.

What I am trying to do is pushing a full screen page when the user presses the FloatingActionButton.

This page needs to cover the area of the BottomNavigationBar and previous AppBar since in this new page user is not allowed to go to the other tabs of the BottomNavigationBar.

I came across fullscreenDialog, a property of PageRoute Widget class and got excited but could not get it to exactly work as I wanted it to work(top<->bottom as I will explain later)

This page will have it's own Scaffold and AppBar and is able to push/pop to next screens(inside of it's own navigation tree)

In order to pop this page, the user will press a 'x' button positioned at bottom center of the page.

I want to push/pop this new Page from top<->bottom instead of the usual navigation style which is left<->right (For iOS/Cupertino)

I am familiar with this type of UI from iOS devices(ModalViewController)

So How would we implement the push and pop commands?

Or is there another, better/recommended way to do this?

aytunch
  • 1,326
  • 1
  • 16
  • 31

2 Answers2

16

I had a similar problem, and it was solved with this:

await Navigator.of(context, rootNavigator:true).push( // ensures fullscreen
      CupertinoPageRoute(
            builder: (BuildContext context) {
              return MyWidget();
            }
      ) );

Found at https://stackoverflow.com/a/54017488/247451

Jon Mountjoy
  • 4,498
  • 22
  • 24
  • This one deserves an upvote as well, if you are dealing with multiple Navigators then you will need a way to access the rootNavigator. I wasn't aware of `rootNavigator`. Thanks! – Marius Popescu Aug 01 '20 at 20:33
  • It works as I expected!!! very very thanks and rootNavigator is very proper to show full screen page even using CupertinoTabScaffold!. Thanks again! – TaeJung Shim Sep 11 '20 at 13:09
  • This is the most simple and correct method. – Fabrunet Dec 27 '20 at 23:38
  • Note that using the root navigator breaks screen tracking for analytics, because it can't provide a correct previous route on `RouteObserver.didPop` – Andrey Gordeev Feb 22 '21 at 12:59
  • This should be the correct answer. works like a charm. even with customPageRoutes – Jason Waku Nov 16 '21 at 09:02
10

You should try MaterialPageRoute with fullscreenDialog prop (docs):

Navigator.of(context).push(new MaterialPageRoute<Null>(
  builder: (BuildContext context) {
    return new AddEntryDialog();
  },
  fullscreenDialog: true
));

Might not be the best way in your case, but it will appear above the bottom bar and any other navigation widgets.

Code taken from: https://marcinszalek.pl/flutter/flutter-fullscreendialog-tutorial-weighttracker-ii/

George Zvonov
  • 9,401
  • 5
  • 33
  • 37
  • This worked thanks:) Do you know of a method to disable the automatically generated 'x' close button at the left side of the AppBar? – aytunch Feb 08 '19 at 20:56
  • 1
    @aytunch Glad it worked! You could try setting `appBar: AppBar(leading: null)` for `Scaffold` in the dialog widget class. – George Zvonov Feb 09 '19 at 23:31