Flutter BottomNavigationBar Tutorial

Image for post
Image for post
Flutter BottomNavigationBar Tutorial

In this very short Flutter BottomNavigationBar Tutorial we will have a look at how to implement a BottomNavigationBar with three tabs.

First, we want to add a BottomNavigationBar with three tabs: home, messages and profile.

Then we want to create one more dart file. Let’s call it content.dart. We use that to show three different screens when changing the tab.

Let us then add the following code to our main.dart. Since we want to use three different screens, we create three content tabs with a different text. Also, we hook up the _onBottomNavBarTab() method.

And last but not least we want to add code to the content.dart file. So, the only thing we do here is passing a string and showing different texts for each tab.

And that is all. When you run the app you should be able to switch between the different tabs.

Also, you can find more information in the official documentation here.

Besides, you may want to learn more about how to navigate in Flutter. You can find a tutorial here, which builds on top of this one. Or maybe you are interested in using Firestore with Flutter. And here you can find something about dynamic localization in Flutter.

Originally published at www.gotut.net.

In my spare time I work on Timeless Adventure — a fantasy adventure game

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store