Flutter Tabbar Widget | RRTutors

Flutter TabBar Widget | Tabbar View

TabBar is a row of horizontal tabs, you can switch back and forth, the effect map


TabBar is generally used together with TabBarView. 

TabBarView is used to select different TabBars. 

TabBarView displays the corresponding View

TabBarView property description


class TabBarDemo extends StatefulWidget {


 State<StatefulWidget> createState() => _TabBar();



class _TabBar extends State<TabBarDemo> {

 final List<String> _tabValues = [











 TabController _controller;



 void initState() {


   _controller = TabController(

     length: _tabValues.length,

     vsync: ScrollableState(),





 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(

       backgroundColor: Colors.pink,

       title: Text('TabBar'),

       bottom: TabBar(

         tabs: _tabValues.map((f) {

           return Text(f,style: TextStyle(fontSize: 20),);


         controller: _controller,

         indicatorColor: Colors.grey,


         isScrollable: true,

         labelColor: Colors.white,

         unselectedLabelColor: Colors.white54,

         indicatorWeight: 5.0,

         labelStyle: TextStyle(height: 2),



     body: TabBarView(

       controller: _controller,

       children: _tabValues.map((f) {

         return Center(

           child: Text(f,style: TextStyle(fontSize: 80,color: Colors.pink),),








TabBar flutter


Custom TabBar, Different Styles of TabBar Example