如何在不改变 AppBar 的情况下更改 TabBar 的背景颜色？

Question

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

Answer 1

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

Answer 2

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

return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar
        accentColor: Colors.cyan[600],
      ),
      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),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

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()],
               ),
            ),
         ],
    ),
  );

Answer 4

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

Answer 5

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;
}

Answer 6

for use with SliverPersistenHeader (etc 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;
  }
}

Answer 7

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

Answer 8

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

Answer 9

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