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?

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