As mobile applications become bigger and more complex, they usually end up containing multiple primary high-level destinations, which are logically independent from one another. The
BottomTabs layout is often used when an app contains three to five top-level destinations which should be accessible from anywhere in the app.
Lets return to the example code from the previous section (Basic navigation) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen. Similarly to
Stack layout, The BottomTabs layout also contains a
children property where each child will be displayed in a tab.
Lets change our code to the following and reload the app.
Now our app has two tabs at the bottom of the screen and our users can easily navigate between them.
Replacing the root
Up until now, we've discussed how to navigate within the same layout structure. We'll now learn how to replace the entire layout structure to display a new Root. A real life example for this use case would be, for instance, if you need to switch from a login screen to the app's main root. Replacing the root fits this use case since we'd like to discard the previous root (login root) entirely when switching to the main root.
To demonstrate this, we'll make the following changes to our code:
- Add a login screen with a login button.
- When the button is clicked, we will switch to the main root.
- Replace our current root with the login screen. We'll also extract both roots to variables to improve code readability.
Now that our initial root is the Login root, we're facing a new problem - how do we show the Login root only to users that are not logged in? Since our initial root is determined in the
registerAppLaunchedListener callback, we'll check if a user is logged in there and set the appropriate root accordingly.