Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

Question

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

Are the `button` you talked about inside `BottomNavigationBar` ? — Rémi Rousselet, Apr 03 '18 at 11:51
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. — harry, Apr 03 '18 at 12:16
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. — Rémi Rousselet, Apr 03 '18 at 12:30
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. — harry, Apr 03 '18 at 12:34
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. — rmtmckenzie, Apr 03 '18 at 16:39
using [persistent_bottom_nav_bar](https://pub.dev/packages/persistent_bottom_nav_bar) package you can maintain a navigation route of individual tabs and BottomNavigationBar will not disappear when users navigate too to any screen. — 0917237, Apr 06 '20 at 12:20

score 44 · Answer 1 · answered Jan 11 '21 at 11:27

44

Screenshot:

Starting point:

void main() => runApp(MaterialApp(home: HomePage()));

HomePage [BottomNavigationBar + Page1]

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: 'Call'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Message'),
        ],
      ),
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = Page1();
          if (settings.name == 'page2') page = Page2();
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

1st Page:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.pushNamed(context, 'page2'),
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
}

2nd Page:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}

answered Jan 11 '21 at 11:27

CopsOnRoad

237,138
77
654
440

4

Works like a charm. Thanks a lot – ThomasThiebaud Jan 13 '21 at 20:30
1

Could not find a generator for route RouteSettings – Guilherme Ferreira Feb 20 '21 at 05:28
3

And how to navigate some screens without bottom navigation bar, could you explain that too? – Waqas Younis Apr 21 '21 at 20:13
2

You can use root navigator: `Navigator.of(context, rootNavigator: true).pushFunction(...)` but you also need to configure routes in root, e.g set `routes` property in materialApp – batangaming May 03 '21 at 18:01
@batangaming your comment just saved my day Thanks man – Lakshmi Narayanan Aug 01 '21 at 14:45
@CNK Any references for "not recommended"? – CopsOnRoad Aug 28 '21 at 21:25
But how to navigate between different tabs with this solution? – KunYu Tsai Sep 22 '21 at 10:03
2

@KunYuTsai Add the `onChanged` property to the `BottomNavigationBar` widget, use an index to keep track of the current page and then use an `if-else` condition, for example, to choose which widget to show. – CopsOnRoad Sep 22 '21 at 19:14
@CopsOnRoad do you mean `onTap`? the `onChanged` property doesn't exist on `BottomNavigationBar` – ladookie Sep 28 '21 at 15:25
@ladookie Yeah, it's `onTap`, I think it was `onChanged` in earlier Flutter versions. – CopsOnRoad Oct 09 '21 at 15:39
@CopsOnRoad can you please provide a sample code for what kunYu Tsai had problem I am too facing the same issue but not able to make it work with Stateful widget – Mithson Feb 24 '22 at 08:07
Hi, I'm having the same issue, I have posted the question if you don't mind looking at it. @CopsOnRoad https://stackoverflow.com/questions/71484514/navigate-to-a-screen-without-removing-bottom-navigation-bars – LearnFlutter Mar 16 '22 at 09:38
Is is possible to pop back from page2 to page1? – Krahmal May 20 '22 at 07:42

harry · Accepted Answer · 2018-04-04T11:41:01.990

34

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.

edited Apr 04 '18 at 11:41

answered Apr 04 '18 at 09:38

harry

1,191
1
10
12

Material Design now recommends navigation in sub-pages, as per https://github.com/flutter/flutter/issues/16221 and https://material.io/components/bottom-navigation#behavior It is just not yet implemented... – giorgio79 Aug 11 '20 at 04:40
is it now implemented? I can still only find hacky workarounds or using 3rd party packages – MwBakker Feb 27 '21 at 09:29

paras · Answer 3 · 2022-08-02T09:40:28.893

If someone want to keep bottomNavigationBar, Just return a Navigator from body of home page and pass a unique key for each route.

import 'package:bottomnavigation_sample/page1.dart';
import 'package:bottomnavigation_sample/page2.dart';
import 'package:bottomnavigation_sample/page3.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  Map<int, GlobalKey<NavigatorState>> navigatorKeys = {
     0: GlobalKey<NavigatorState>(),
     1: GlobalKey<NavigatorState>(),
     2: GlobalKey<NavigatorState>(),
  };
    final List<Widget> _widgetOptions = <Widget>[
    const page1(),
    const page2(),
    const page3()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
       bottomNavigationBar: BottomNavigationBar(
         items: const <BottomNavigationBarItem>[
           BottomNavigationBarItem(
             icon: Icon(Icons.home),
             label: 'Home',
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.business),
             label: 'Business',
           ),
           BottomNavigationBarItem(
             icon: Icon(Icons.school),
             label: 'School',
           ),
         ],
         currentIndex: _selectedIndex,
         selectedItemColor: Colors.amber[800],
         onTap: _onItemTapped,
       ),
      body:  buildNavigator(),
    );
  }

   buildNavigator() {
     return Navigator(
       key: navigatorKeys[_selectedIndex],
       onGenerateRoute: (RouteSettings settings){
         return MaterialPageRoute(builder: (_) => _widgetOptions.elementAt(_selectedIndex));
       },
     );
  }
}

Dhaval Kansara · Answer 4 · 2020-10-23T05:45:11.657

Option 1: If you only want to keep BottomNavigationBar then try to use this.

Option 2: Use CupertinoTabBar as shown below for the static BottomNavigationBar.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mqttdemo/Screen2.dart';
import 'package:mqttdemo/Screen3.dart';

import 'Screen1.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _currentIndex;
  List<Widget> _children;

  @override
  void initState() {
    _currentIndex = 0;
    _children = [
      Screen1(),
      Screen2(),
      Screen3(),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Screen 1"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Screen 2"),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text("Screen 3")),
        ],

      ),
        tabBuilder: (BuildContext context, int index) {
          return CupertinoTabView(
            builder: (BuildContext context) {
              return SafeArea(
                top: false,
                bottom: false,
                child: CupertinoApp(
                  home: CupertinoPageScaffold(
                    resizeToAvoidBottomInset: false,
                    child: _children[_currentIndex],
                  ),
                ),
              );
            },
          );
        }
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

Navigate to screen4 from Screen3 as shown below:

    class Screen3 extends StatefulWidget {
      @override
      _Screen3State createState() => _Screen3State();
    }
    
    class _Screen3State extends State<Screen3> {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.black,
          child: Center(
            child: RaisedButton(
              child: Text("Click me"),
              onPressed: () {
                Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(
                    builder: (context) => Screen4(), maintainState: false));
              },
            ),
          ),
        );
      }

}

stuckedunderflow · Answer 5 · 2018-11-30T10:51:55.140

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

score 3 · Answer 6 · answered Apr 28 '19 at 09:43

You can create Navigator widget in a Stack widget to use BottomNavigationBar with tabs' inner navigation. You can use WillPopScope to handle Android's back button to pop inner screens of tab. Also, double tap bottom navigation item to pop all inner screens of a tab.

I've created a Sample app for this.

Hope this help!

score 2 · Answer 7 · answered Aug 31 '18 at 11:12

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.

Having the same issue on my case if you don't mind taking a look at it https://stackoverflow.com/questions/71484514/navigate-to-a-screen-without-removing-bottom-navigation-bars — LearnFlutter, Mar 16 '22 at 09:39

score 1 · Answer 8 · answered Apr 03 '18 at 16:36

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?

score 0 · Answer 9 · answered Jun 29 '23 at 21:36

It's very easy when you use GoRouter (https://pub.dev/packages/go_router) as a Navigation. It has a ShellRoute option - you can wrap routes that you want to have the persistent navigation bar (or any other element like app bar and others) with this Shell. https://www.youtube.com/watch?v=b6Z885Z46cU

example:

ShellRoute(
      builder: (context, state, child) {
        return BottomNavigationPage(
          child: child,
        );
      },
      routes: [
        GoRoute(
          path: '/home',
          builder: (BuildContext context, GoRouterState state) {
            return const HomePage();
          },
        ),
        GoRoute(
          path: '/settings',
          builder: (BuildContext context, GoRouterState state) {
            return const SettingsPage();
          },
        ),
      ],
    ),

Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

9 Answers9

Linked