How to change background color of TabBar without changing the AppBar in flutter?

Question

How to change background color of TabBar without changing the AppBar? The TabBar does not have a background property, is there a workaround?

Convenance

Answer 1

You can change the color of the TabBar by changing the Theme primaryColor like that:

return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      // add tabBarTheme 
      tabBarTheme: const TabBarTheme(
        labelColor: Colors.pink[800],
        labelStyle: TextStyle(color: Colors.pink[800]), // color for text
        indicator: UnderlineTabIndicator( // color for indicator (underline)
          borderSide: BorderSide(color: ConstColor.primary))),
        primaryColor: Colors.pink[800], // outdated and has no effect to Tabbar
        accentColor: Colors.cyan[600] // deprecated,
      ),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              indicatorColor: Colors.lime,
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );

If you are not using it in an AppBar you could wrap the TabBar in a Material widget and set the color attribute, like that:

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tabs Demo'),
        ),
        body: DefaultTabController(
          length: 3,
          child: Column(
            children: <Widget>[
              Container(
                constraints: BoxConstraints(maxHeight: 150.0),
                child: Material(
                  color: Colors.indigo,
                  child: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Cupboard

It changed the whole AppBar not onlye TabBar, I need to change only the TabBar – Convenance

As @Convenance mentioned, this will not only change the TabBar color but also the AppBar color. This was explicitly mentioned in the question to ...change background color of TabBar without changing the AppBar.... This should be the accepted answer – Palmore

this is what you're looking for : Material( color: Colors.indigo, child: TabBar(...),) – Fadeout

TabBarTheme doesn't have primaryColor – Alverson

Why does the top answer reference fields that do not exist? – Lurlene

Answer 2

Create a simple Widget for this, cannot be simpler:

class ColoredTabBar extends Container implements PreferredSizeWidget {
  ColoredTabBar(this.color, this.tabBar);

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
    color: color,
    child: tabBar,
  );
}

Vitellin

This worked for changing the color of the tab bar. I was hoping to find something where the tab bar has an elevation of 0 and is transparent. – Arduous

The ripple effects when user clicks on Tabs are not working anymore with this solution, anybody knows why? – Mehalek

@最白目Please wrap the tabBar field above in a Material widget and set type to MaterialType.transparency – Caralie

Answer 3

Screenshot:

---

Code:

TabBar get _tabBar => TabBar(
  tabs: [
    Tab(icon: Icon(Icons.call)),
    Tab(icon: Icon(Icons.message)),
  ],
);
  
@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('AppBar'),
        bottom: PreferredSize(
          preferredSize: _tabBar.preferredSize,
          child: ColoredBox(
            color: Colors.red,
            child: _tabBar,
          ),
        ),
      ),
    ),
  );
}

Partake

This won't work if you're using SliverAppBar because ColoredBox doesn't have a preferred size. – Radix

Answer 4

Change Background Color of TabBar in Flutter..

Simply use TabBar in Body of Scaffold, wrap it with Column Widget so that, you can use both without any issue. Wrap TabBar with Container widget to change the tab color. In this way you can change the color of Tab bar in FLutter.

Here's the sample Code...

   Scaffold(
       appBar: AppBar(
       backgroundColor: const Color(0xFF3baee7),
       title: Text("Jobs"),
        ),
      body: Column(      // Column
         children: <Widget>[
          Container(
            color: Colors.deepOrangeAccent,        // Tab Bar color change
             child: TabBar(           // TabBar
             controller: tabController,
             unselectedLabelColor: Colors.lightBlue[100],
             labelColor: const Color(0xFF3baee7),
             indicatorWeight: 2,
             indicatorColor: Colors.blue[100],
             tabs: <Widget>[               
               Tab(
                 text: "All Jobs",
               ),
               Tab(
                 text: "Most Recent",
               ),
               Tab(
                 text: "Saved Jobs",
               )
             ],
           ),
         ),
         Expanded(
             flex: 3,
             child: TabBarView(         // Tab Bar View
             physics: BouncingScrollPhysics(),
             controller: tabController,
             children: <Widget>[AllJobScreen(), AllJobScreen(), AllJobScreen()],
               ),
            ),
         ],
    ),
  );

Pamper

I used the above method, wrapped the Tabbar in a container to have the unselected tabbar as grey and set the tabbar indicator color, so it shows as selected color. – Aseity

Answer 5

with a little trick

bottom: TabBar(
 labelPadding: EdgeInsets.zero, // this one make 0
 tabs: [
     for (final t in [1, 2, 3])
     Container(
     width: double.infinity,
     color: Colors.blue, // color same as background
     child: Tab(
     text: "tab $t",
      ),
     )
  ],
),

so the trick is, wrap the tab with a container and make the width of the container the same and then change the color of the container according to your wishes

Oden

Answer 6

Simple and concise.

class ColoredTabBar extends ColoredBox implements PreferredSizeWidget {
  ColoredTabBar({this.color, this.tabBar}) : super(color: color, child: tabBar);

  final Color color;
  final TabBar tabBar;

  @override
  Size get preferredSize => tabBar.preferredSize;
}

Titustityus

Answer 7

You can change the Tabbar background-color, when Tabbar is inside the Material widget.

           Material(
              color: Colors.white, //Tabbar background-color
              child: TabBar(
                isScrollable: true,
                labelStyle: Theme.of(context).tabBarTheme.labelStyle,
                unselectedLabelStyle:
                    Theme.of(context).tabBarTheme.unselectedLabelStyle,
                labelColor: Theme.of(context).tabBarTheme.labelColor,
                unselectedLabelColor:
                    Theme.of(context).tabBarTheme.unselectedLabelColor,
                indicatorColor: Theme.of(context).primaryColor,
                tabs: [
                  Tab(text: 'tab 1'),
                  Tab(text: 'tab 2'),
                  Tab(text: 'tab 3'),
                  Tab(text: 'tab 4'),
                ],
              ),
            ),

Laager

this is the simplest working solution if you use TabBar outside the AppBar widget – Firry

Answer 8

So if you are looking for to change the specific tab color and then you can try the following code:

1. Create a variable of color:
   Color tabColor=Colors.green;

2. Create onTap method inside the TabBar and inside the tab bar create setState() method code is given below:

   onTap: (index) {
      setState(() {
   
        if(index==0) { tabColor = Colors.lightGreen;}
        if(index==1) {tabColor = Colors.yellow;}
        if(index==2) {tabColor = Colors.green;}
        if(index==3) {tabColor = Colors.red;}
        if(index==4) {tabColor = Colors.deepPurple;}                      
      });
      print(index);
    },
   

3. Create an indicator and give some radius as per your requirement and change the color code is given:

   indicator: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: 
     Radius.circular(10),topRight: Radius.circular(10)),
      color: tabColor
   ),
   

Epps

Answer 9

for use with SliverPersistenHeader (e.t.c collapsing with sliver appbar in nested scrollview)

 class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
   _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
      color: Colors.red,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Eleonoraeleonore