Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

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,
        ),

 


2765 Views

Author: RRTutors

Flutter Questions

Android Questions