Flutter BottomNavigationBar Tutorial

Free Time Dev
2 min readApr 12, 2019
Flutter BottomNavigationBar Tutorial

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

BottomNavigationBar

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.

./lib folder

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.

--

--

Free Time Dev

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