TabBar in Flutter, Custom TabBar, BottomNavigationbar, Different Styles of TabBar

TabBar - Flutter
In this Section we are going to learn TabBar in flutter.
Flutter provided TabBar widget to handle the Tabs.

We can use TabBar in 2 ways.
bottomNavigationBar property for the Scaffold widget.
Scaffold(
      bottomNavigationBar: TabBar(tabs: ),
)
or 
bottom property for the AppBar widget.
AppBar(title: Text("TabBar with GridView"),

    bottom: TabBar(tabs: )
)

 

      

 

TabBar Properties
tabs: Will shows the tabs which will add.
        TabBar(tabs: 
            Tab(),
            Tab(),)
Each Tab we can add child,Icon,text
labelColor: Set the color for the lables of tab.
isScrollable: We can make scrollable TabBar with making this property true.
indicatorColor: Set the Indicator Color
indicatorSize: Set the Indicator Size(TabBarIndicatorSize.tab,TabBarIndicatorSize.lable)
controller: Will asign the TabController to the TabBar to handle the tab events.

TabController controller=TabController(length: 4, vsync: this,initialIndex: _currentIndex);

The TabController will be defined by the length of Tabs, which tab we need to show initial load...

With BottomNavigationBar

 

class TabwithBottomNavigation extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final List myTabs = [
      Tab(icon: Icon(Icons.home),text: "Home",),
      Tab(icon: Icon(Icons.live_tv),text: "Live",),
      Tab(icon: Icon(Icons.settings),text: "Settings",),
    ];
    return MaterialApp(

      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text("BottomNavigationBar",style: TextStyle(

             
          ),),
        ),
        bottomNavigationBar: TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.orangeAccent,
          controller: TabController(length: myTabs.length, vsync: AnimatedListState()),
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: BoxDecoration(color:Colors.pink),
          tabs: myTabs,
        ),
        backgroundColor: Colors.purple,
      body: Flex(

        direction: Axis.vertical,
        children: [
          Expanded(
              flex: 1,
              child: Container(
            color: Colors.white,
            child: Center(child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text("A bottom navigation bar is usually used in conjunction with a Scaffold, where it is provided as the Scaffold. bottomNavigationBar argument."
              ,style: TextStyle(
                fontSize: 20,
                ),textAlign: TextAlign.center,textScaleFactor: 1.2,),
            ),),
          ))

        ],

      ),
      ),
    );
  }

}

 

With AppBar bottom Property:

class TabwithAppBar extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final List myTabs = [
      Tab(child:Column(children: [ Icon(Icons.home),Text("Home")],)),
      Tab(child:Column(children: [ Icon(Icons.live_tv),Text("Live")],)),
      Tab(child:Column(children: [ Icon(Icons.settings),Text("Settings")],)),

    ];
    return MaterialApp(

      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Text("TabBar with AppBar Bottom",style: TextStyle(

              fontFamily: 'mont'
          ),),
          bottom: TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.orangeAccent,
          controller: TabController(length: myTabs.length, vsync: AnimatedListState()),
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: ShapeDecoration(

              gradient: LinearGradient(colors: [Colors.pink,Colors.pink,Colors.red]),
    shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(20),

  ))
    ,  tabs: myTabs,
        ),
        ),


      body: Flex(

        direction: Axis.vertical,
        children: [
          Expanded(
              flex: 1,
              child: Container(
            color: Colors.white,
            child: Center(child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text("Any widget with a Preferred Size can appear at the bottom of an AppBar."
              ,style: TextStyle(
                fontSize: 20, fontFamily: 'mont'
                ),textAlign: TextAlign.center,textScaleFactor: 1.2,),
            ),),
          ))

        ],

      ),
      ),
    );
  }

}

 

Different Custom Shapes

bottom: TabBar(
            labelColor: Colors.white,
            unselectedLabelColor: Colors.orangeAccent,
            controller: TabController(length: myTabs.length, vsync: AnimatedListState()),
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: BoxDecoration(gradient:LinearGradient(colors: [Colors.pink,Colors.pink,Colors.red]), color:Colors.pink,borderRadius: BorderRadius.only(topRight: Radius.circular(50),topLeft: Radius.circular(50))),

            tabs: myTabs,
          ),

 

 

 

bottom: TabBar(
            labelColor: Colors.white,
            unselectedLabelColor: Colors.orangeAccent,
            controller: TabController(length: myTabs.length, vsync: AnimatedListState()),
            indicatorSize: TabBarIndicatorSize.tab,
            indicator: BoxDecoration(gradient:LinearGradient(colors: [Colors.pink,Colors.pink,Colors.red]), color:Colors.pink,borderRadius: BorderRadiusDirectional.vertical(top: Radius.circular(18))),

            tabs: myTabs,
          ),

 

 

 

bottom: TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.orangeAccent,
          controller: TabController(length: myTabs.length, vsync:      AnimatedListState()),
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: ShapeDecoration(
            
    gradient: LinearGradient(colors: [Colors.pink,Colors.pink,Colors.red]),
    shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(20),

  )),  tabs: myTabs,
        ),

 


Subscribe For Daily Updates