Multiple Navigators with Bottom Navigation Bar

by Flutter Awesome

Multiple Navigators with BottomNavigationBar

This is the source code for my article:

Preview

In this example each tab has its own navigation stack. This is so that we don’t lose the navigation history when switching tabs.

This is a very common use case for a lot of apps.

How is it built?

  • Create an app with a Scaffold and a BottomNavigationBar.
  • In the Scaffold body, create a Stack with one child for each tab.
  • Each child is an Offstage widget with a child Navigator.
  • Don’t forget to handle Android back navigation with WillPopScope.

Read the full story on my article:

Credits

  • Brian Egan: for suggesting to use Stack + Offstage & Navigator widgets.

License: MIT

GitHub

View Github