Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
Menu
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Basics and Implementation of BottomNavigationBar Widget in Flutter

Published by: Faizan Ullah Younus Khan | October 6, 2020 msaqlain
SCROLL AND BE AMAZED!
Home > flutter-app-development > 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..!


Avatar
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.

Newsletter

Search

Archives

  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019
  • Categories

    • Android App Development
    • App Development
    • App Testing
    • Blog
    • Elasticsearch
    • flutter-app-development
    • IOT
    • React Native
    • Staff Augmentation

Recent Posts

  • Startup Incubator – How to Make an App Start on Startup?
  • Jquery Vs. React: Which One Is The Best Option To Create An App For Business?
  • One codebase to rule them all – Sharing code in mobile & web apps using Flutter
  • What is Tree Shaking and Implementation in React
  • Vue VS. React – Crowning the King of Web App Development in 2021

Tags

  • android
  • Automation
  • cross-platform
  • development
  • firebase
  • ios
  • QA
  • react-native
  • Testing
  • Test Script

Newsletter

Newsletter

Post navigation

Previous How to Write Mobile App Business Plan
Next Usability Testing of Mobile Applications

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Schedule an appointment with our Mobile App Development Expert

Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

163 Bangalore Town, Main Shahrah-e-Faisal, Karachi –
75350

705, Business Center, PECHS Block-6, Shahrah-e-Faisal,
Karachi – 75350

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore

Tel: +92-21-3432 3721-4 

© 2020, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f
Twitter
Linkedin-in

Get a free app audit

Tired of your app not performing up to the mark?

Get a free technology and app strategy review.