How to push a full-screen page that stays on top of Flutter BottomNavigationBar

Question

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?

Answer 1

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

Answer 2

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/