Bottom Navigation Bar - TabBarView

Published July 20, 2019

Hellow Guys,

Today we are going to learn about BottomNavigationBar with Tabbarview.

Now a days users likes the Navigation bar at bottom instead of side navigation.

with the Bottom Navigation user quickly go to respected screen easily.

Flutter provided this bottom navigation by widget  BottomNavigationbar 



appBar: AppBar(
title: Text("Posts"),


bottomNavigationBar: BottomNavigationBar(
  icon: Image.asset("flutter.png",width: 32,height: 32,),
  title: Text('Flutter',style: TextStyle(color: Colors.white),),


  icon: Image.asset("android.png",width: 32,height: 32,),
  title: Text('Android',style: TextStyle(color: Colors.white),),

Scaffold widget have the argument bottomNavigationBar

For this property we will add the BottomNavigationBar.

We will add its items by BottomNavigationBarItem argument.

you can find above how to add items to BottomnavigationBar.

With this BottomNavigationbar, we will handle the Tabs by TabarView Widget

body: TabBarView(children:

we will add the tab items by TabarView children argument.

To handle the selected tab we will use the TabController

create object for TabController 

TabController _tabController=TabController(length: 2, vsync: this);

here first argument indicates how many tabs will present, second argument is TickerProvider which can be used by any object that wants to be notified whenever a frame 

You can find complete example at  rrtutors   github account


Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions