Flutter

This is to post is to keep a record of the know-hows and gotchas while learning and developing Flutter projects.

1. Navigator

Each MaterialApp (or WidgetApp in general) will create one Navigator, which represents a navigation stack. In a general app, where there are multiple bottom tab bar items, each tab bar item widget should have its own Navigator such that different tabs won’t be sharing the same navigator and causing undetermined behavior. Also, using its own Navigator (instead of the top MaterialApp’s Navigator), will not cover the bottom tab bar (BottomNavigationBar in Flutter). When using the nested Navigator, make sure to set the key for the Navigator (such as using GlobalKey<NavigationState>(debugLabel:”some label”);

). This is vital to the setting up of nested Navigator.
However, if the modal transition is preferred (i.e. modal presentation in iOS that covers the whole screen including the BottomNavigationBar), one could you Navigator.of(buildContext, rootNavigator:true) the top navigator from anywhere in the Widget tree.

2. Keep Tab State

With BottomNavigationBar, when switching between different tabs, a one Widget for the tab will be rendered. This means the state of the tab is lost, i.e. scroll position or navigation stack etc. Use IndexedStack to set up the stack of Widgets for each tab. It will keep the states of the Widget in each tab. (One possible drawback is it may be less performant cause all the widgets of each tab is created even though user never touches the tab.)