Basics and Implementation of BottomNavigationBar Widget in Flutter

In our last blog, we talk about what Flutter is and why there is so much talk about it. We also talked about how to set up and start working with it. In this blog, we will be discussing the basics of Flutter and we will see the implementation of a Material Widget.

Reader: Finally some action in the blog, hopefully, less talk this time.

Me: You started again! Don’t make me lose my tempo, by Interrupting me.

Reader: Okiii!!

We’ll start by creating a new project.

So here we have created a new project with ‘flutter create’ command. This will result in a started project which Flutter team was generous enough to make for us. It will look something like this.

Lets jump into the code now,

Let’s talk about first section,

• We see an import statement, which is self explanatory that we will be using stuff from this package.
• Then we see a void function named main(),
  • This is the entry point of any flutter application, it will return a runApp() function which takes the Root widget from where your app’s Widget Tree will start, which in our case is My App.
• So you remember widgets (everything is a widget), My App is a class which extends the Stateless Widget class, which is needed to create your own Stateless Widget.
• Then we see a @override statement and a build() method,
  • The @override statement is used when you are overriding a method, here we are overriding the build() method of Stateless Widget Class.
  • build() method is where we draw/code the widget’s look and feel.
  • It takes one parameter i.e BuildContext, flutter uses this to locate the widget in the Widget tree. 
  • Every Widget has to override this method.
• Here in our overriding method, we are returning a MaterialApp widget, which is our Application Widget, it basically wraps all your widgets and makes it into an application.
  • Title: Defines the title of the application.
  • Theme: theme configuration of the application.
  • Home: home/landing page of the application, in our case its the MyHomePage widget.

Reader: Are you going to code something or just talk about already written code?

Me (Sarcastically):  Talk! Why code when its already done.

Me: I will code, i mean copy paste from somewhere don’t worry.

Let’s remove the MyHomePage widget code and write our own to implement a bottom navigation bar.

Let’s jump into this section,

• We created a stateful widget by extending our widget class with StatefulWidget class.
• We create the state for our stateful widget by overriding the createState method, and providing our own State class which is extended with the State class.
• Now you see there is a title in Stateful Widget and and _selectedIndex in our state class.
  • The title in StatefulWidget is the information that our widget needs to render, and this is what it will get from outside.
  • The _selectedIndex in our State class, represents what our state is made of and this is what will be changing in the widget, which is why we needed it to be a StatefulWidget.
• In our build method we have our BottomNavigationBar Widget,
  • Items are the navigation buttons/options.
  • currentIndex defines the active widget, which is currently being pointed.
  • selectedItemColor defines the color attribute of the navigation option which is currently selected.
  • onTap defines the function that will trigger on tapping any navigation option. Here we will implement the change in widget on tapping any navigation option.
• Our _onItemTapped function updates the state with the index of tapped navigation option. Which then results in updating the currentIndex of BottomNavigationBar.
• The body of our Scaffold widget is Center Widget, which positions its child widget to the center of it’s parent widget.
• The child of Center widget is an array of widgets pointing to an index of its own.
  • The pointing is done by our state member _selectedIndex, so when it changes the pointing changes, ultimately updating the child widget of Center.

Reader: Hey!, wait a second I recognize this code.

Reader: You copy pasted this code from Flutter widget docs….

Me (stammering): Uh, umm, err…

Me: So what, why would i reinvent the wheel. I tempered it a little.

Reader: Ohh! Come on….

Me: Hey you! Susssh! Let me complete.

Now we will add some widgets to our widgets array.

Me (proudly): Look I changed the names of components because that’s all I needed.

Reader (sarcastically): OMG! such a professional work.

Me (with a smirk): Always complaining..!

We just added some Text Widgets to demonstrate how the change is happening. In a real application, these will be more complex widgets or widget trees.

Peace out..!

About Faizan Ullah Younus Khan

Faizan Ullah Yonus khan has been working as a senior software engineer at folio3 for the 5 years. He has proven expertise as a Full stack JS Developer. He is proficient in development of applications with clean, and efficient code. He considers coding as art that enhances technical and analytical skills. Faizan is fond of football and few times shares his experience through blogs.