Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

flutter bottom navigation bar with routes
flutter bottom navigation bar keep state
flutter bottom navigation bar example
flutter persistent bottom navigation
flutter navigator push bottomnavigationbar
keep the bottom navigation bar static when pushed to new screen flutter
flutter bottom navigation bar change page
multiple navigators flutter

In iOS, we have a UITabBarController which stays permanently at the bottom of the screen when we push to a new ViewController.

In Flutter, we have a bottomNavigationBar of a Scaffold. However, unlike iOS, when we Navigator.push to a new screen, this bottomNavigationBar disappears.

In my app, I want to fulfil this requirement: Home screen has a bottomNavigationBar with 2 items (a & b) presenting screen A & B. By default, screen A is displayed. Inside screen A, there is a button. Tap that button, Navigator.push to screen C. Now in screen C, we can still see the bottomNavigationBar. Tap item b, I go to screen B. Now in screen B, tap item a in the bottomNavigationBar, I go back to screen C (not A, A is currently below C in the navigation hierarchy).

How can I do this? Thanks, guys.

Edit: I'm including some pictures for demonstration:

Screen A Screen A

Tap Go to C button, push to screen C Screen C

Tap Right item inside bottom navigation bar, go to screen B Screen B

tl;dr: Use CupertinoTabBar with CupertinoTabScaffold

The problem is not in Flutter but in UX just like Rémi Rousselet has mentioned.

It turned out Material Design doesn't recommend sub-pages in the hierarchy to access the Bottom navigation bar.

However, iOS Human Interface Guide recommend this. So, to use this feature, I had to adapt Cupertino widgets instead of Material ones. Specifically, in main, return a WidgetsApp/MaterialApp which contains a CupertinoTabScaffold. Implement the tab bar with a CupertinoTabBar and each screen is a CupertinoTabView.

Keep BottomNavigationBar When Push to New Screen with , In Flutter, we have a bottomNavigationBar of a Scaffold . However, unlike iOS, when we Navigator.push to a new screen, this  In iOS, we have a UITabBarController which stays permanently at the bottom of the screen when we push to a new ViewController. In Flutter, we have a bottomNavigationBar of a Scaffold. However, unlike iOS, when we Navigator.push to a new screen, this bottomNavigationBar disappears.

You need to create MaterialApp with routes and make BottomNavigationBar a sibling of it. Then use MaterialApp.navigatorKey which you pass to BottomNavigationBar to do navigation.

https://medium.com/@swav.kulinski/flutter-navigating-off-the-charts-e118562a36a5

Keep BottomNavigationBar When Push to New Screen with Navigator, In Flutter, we have a bottomNavigationBar of a Scaffold . However, unlike iOS, when we Navigator.push to a new screen, this bottomNavigationBar disappears. In Flutter, a route is just a widget. Navigate to a new route using the Navigator. This recipe uses the following steps: The next few sections show how to navigate between two routes, using these steps: Create two routes. Navigate to the second route using Navigator.push(). Return to the first route using Navigator.pop().

You could actually place a placeholder inside body so the structure like this

- AppBar
- body (dynamic content from placeholder)
- BottomNavigationBar

Then you would have another class as a placeholder So each time you tap on the BottomNavigationBar it will refresh content of the body

One example I found is here https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation

and here but a litte too complex and not working for me https://medium.com/@swav.kulinski/flutter-navigating-off-the-charts-e118562a36a5

and this https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

Keeping State with the Bottom Navigation Bar in Flutter, to Flutter. Today's post its about the Bottom Navigation Bar from the Material… But where do we put the screens that should be displayed when we select an item in the bar? Which is also quite simple, i just created a new Stateful Widget. Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator In iOS, we have a  UITabBarController  which stays permanently at the bottom of the screen when we push to a new ViewController. In Flutter, we have a bottomNavigationBar of a Scaffold.

I think the #right way of doing this would be to have the BottomNavigationBar wrapped in a Hero in both cases with the same tag. This way, when the animation between pages happens they would be excluded.

This is as brief as an example as I could make, but I'd highly recommend cleaning it up i.e. passing the hero string in, using widgets rather than a huge block of build, making your own widget for BottomNavigationBar.

Note that during the hero transition it does overflow by 0.0000191 pixels on my phone at least, but in release mode that shouldn't be an issue I don't think.

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Builder(
        builder: (context) => new Scaffold(
              bottomNavigationBar: new Hero(
                tag: "bottomNavigationBar",
                child: new BottomNavigationBar(items: [
                  new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
                  new BottomNavigationBarItem(icon: new Icon(Icons.ac_unit), title: new Text("AC Unit"))
                ]),
              ),
              body: new SafeArea(
                child: new Container(
                  constraints: new BoxConstraints.expand(),
                  color: Colors.green,
                  child: new Column(
                    children: <Widget>[
                      new RaisedButton(
                          child: new Text("Press me"),
                          onPressed: () {
                            Navigator.push(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) => new Scaffold(
                                          bottomNavigationBar: new Hero(
                                            tag: "bottomNavigationBar",
                                            child: new BottomNavigationBar(items: [
                                              new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
                                              new BottomNavigationBarItem(icon: new Icon(Icons.ac_unit), title: new Text("AC Unit"))
                                            ]),
                                          ),
                                          body: new SafeArea(
                                            child: new Container(
                                              constraints:
                                                  new BoxConstraints.expand(),
                                              color: Colors.red,
                                              child: new Column(
                                                children: <Widget>[
                                                  new RaisedButton(
                                                    onPressed: () =>
                                                        Navigator.pop(context),
                                                    child: new Text("Back"),
                                                  )
                                                ],
                                              ),
                                            ),
                                          ),
                                        )));
                          })
                    ],
                  ),
                ),
              ),
            ),
      ),
    ));

I don't know how well the hero system handles multiple heroes etc, and if you say wanted to animate the navigation bar this might not work overly well.

There is another way of doing this which would allow you to animate the bottom navigation bar; it's actually a question that has already been answered though: Flutter: Hero transition + widget animation at the same time?

Flutter, Tab screen. Details screen. Introducing CustomScaffold. It's a stateful widget that uses the CustomNavigator to handle item transition of BottomNavigationBar with​  When you push with Navigator.push() or Navigator.pushNamed(), flutter is trying to find the nearest Navigator. If Flutter finds Navigator, it would try to rebuild(render) specified widgets (in most

Another way to achieve this (though not good practice) is to nest a material app in the body of your scaffold. And handle all "sub-navigation" there.

So, your hierarchy will look like this

Material App
  - home
     - Scaffold
       - body
         - Material App
              - Scaffold
                  - AppBar
                  - body
                  ...
         - routes (internal)
       - bottomNavigationBar
  - routes (external)

I've tried this and it works perfectly. Unfortunately I can't post the source code now.

Bottom Navigation in Flutter: Mastery Guide, The problem is not in Flutter but in UX. It turned out Material Design doesn't recommend sub-pages in the hierarchy to access the Bottom navigation bar. However,  However, if we just use Navigator.of(context) to push the new route, something unexpected happens. The whole BottomNavigationBar and its contents slide away as the new page is presented. Not cool. 🤨 What we actually want is for the detail page to be pushed over the main page, but to keep the BottomNavigationBar at the bottom.

Flutter- Screen push and pop with Navigator. ~ Developer Libs, Understand and build an Instagram-like bottom navigation structure that visually Apps like Youtube and Instagram, allows navigation to happen inside tabs, keeping the bottom menu visible we want to push the new screen in the current​/inner Navigator , for navigating Material's bottom navigation bar. Bottom navigation in mobile apps is popular because our phones keep getting bigger but our thumbs do not. The Material Design specification describes a bottom navigation bar as a row of three to five buttons at the bottom of the screen that are used to select among as many destinations.

persistent_bottom_nav_bar, Let's try to understand navigation and route in detail. The route is an abstraction for a screen of an app. It keeps tags of new screen entered in  @dhuma1981 yes, you are right, .pushReplacement() works fine. The problem was that I had sign up screen where I had a button that pushed the sign in screen with Navigator.push. So when a user signed in and navigated back, he got back to the sign up screen.

Flutter Case Study: Multiple Navigators with BottomNavigationBar , Ability to push new screens with or without bottom navigation bar. Includes platform specific behavior as an option (specify it in the two navigator  In this Google flutter code example we are going to learn how to route to a new page from Bottom Navigation Bar in Flutter. You can copy and adopt this source code example to your android project without reinventing the wheel.

Comments
  • Are the button you talked about inside BottomNavigationBar ?
  • No, the button is not in the bottom bar. It's inside main screen. It's just something to trigger Navigator to push to a new screen.
  • I think it's more a UX problem. As your C view shouldn't have the bottomnavigationbar. Or alternatively C should be accessible from that bottombar.
  • Isn't it common for screen in same hierarchy to be able to have that bottom navigation bar. Take Twitter for example (Please open the iOS Twitter app), tap on a tweet, a TweetViewController get pushed and the bottom bar is still visible. I think almost all popular apps have this behaviour.
  • I'd agree with Harry that this is quite a common thing in iOS, and TBH flutter's way of animating the entire screen is actually a little bit contrary to iOS's way of handling the navigation bar - although iOS does cover the navigation bar when it does modal popup type screens.