Change background color of Tab bar in flutter

user_10018034 0
Viewed 17771

I am trying to change the background color of the tab bar in flutter, I have tried the following ( which was accepted as an answer on this forum ) but it didnt work:

here is the code 

   return new MaterialApp(
      theme: new ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.pink[800], //Changing this will change the color of  the TabBar
      accentColor: Colors.cyan[600],
    ),

EDIT :

When I change the theme data colors the background color doesnt change. Im trying to create a horizontal scrolling sub menu underneath the app bar and it was suggested I use a Tab bar.

Here is the entire dart file:

  import 'package:flutter/material.dart';
  import 'package:font_awesome_flutter/font_awesome_flutter.dart';

  class Index extends StatelessWidget {

//final User user;

  // HomeScreen({Key key, @required this.user}) : super(key: key);

  @override
   Widget build(BuildContext context) {
     // TODO: implement build
    // String emoji = emojify(":cool:");
   return new MaterialApp(
     theme: new ThemeData(
      brightness: Brightness.light,
       primaryColor: Colors.white, //Changing this will change the color of     the TabBar
      accentColor: Colors.cyan[600],
     ),

    home: DefaultTabController(
    length: 2,
  child: Scaffold(
  appBar: new AppBar(
     backgroundColor: const Color(0xFF0099a9),
     title: new Image.asset('images/lb_appbar_small.png', fit: BoxFit.none,),
     bottom: TabBar(
          tabs: [
            Tab( text: "Tab 1",),
            Tab(text: "Tab 2"),
             ],       
     ),
  ),
    body: Column(children: <Widget>[
          Row(
            //ROW 1
            children: [
              Container(
                margin: EdgeInsets.all(25.0),
                child: IconButton(
                     icon: new Icon(FontAwesomeIcons.checkSquare,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                ),
              ),
              Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.glasses,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.moon,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); 
                      Text("Check Out");
                      }
                  )

              ),
            ]
          ),
          Row(//ROW 2
              children: [
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.users,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.trophy,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
             Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.calendar,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              )
          ]),
          Row(// ROW 3
              children: [
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.fileExcel,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
            Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.shoppingCart,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
             Container(
                margin: EdgeInsets.all(25.0),
                  child: IconButton(
                     icon: new Icon(FontAwesomeIcons.list,),
                     iconSize: 60.0,
                     color: const Color(0xFF0099a9),
                      onPressed: () { print("Pressed"); }
                  )

              ),
          ]),
        ],
        ),


 bottomNavigationBar: new BottomNavigationBar(
    items: [
      new BottomNavigationBarItem(
          icon: new Icon(Icons.feedback, color: const Color(0xFF0099a9),),
          title: new Text("feedback")
      ),
      new BottomNavigationBarItem(
          icon: new Icon(Icons.help, color: const Color(0xFF0099a9),),
          title: new Text("help")
      ),
      new BottomNavigationBarItem(
          icon: new Icon(Icons.people, color: const Color(0xFF0099a9),),
          title: new Text("community",)
       )
     ]
    )







         )
   )
 );






  }
}
dart flutter
5 Answers

You have the TabBar inside your AppBar for that reason it take the same color, just move the TabBar outside the Appbar

    Scaffold(
                    appBar: new AppBar(
                      backgroundColor: const Color(0xFF0099a9),
                      title: new Image.asset(
                        'images/lb_appbar_small.png',
                        fit: BoxFit.none,
                      ),
                    ),
                    body: Column(
                      children: <Widget>[
                        TabBar(
                          tabs: [
                            Tab(
                              text: "Tab 1",
                            ),
                            Tab(text: "Tab 2"),
                          ],
                        ),
                        Row(
                            //ROW 1
                         ....
user_6662210

Hi you are getting same color since you have added tabbar in appbar,If you are looking for different color for both TabBar and Appbar. Here is what you have to do.
*Add TabBar in body of Scafold.
Sample Code:

    class _SwapOfferPageState extends State<SwapOfferPage> with SingleTickerProviderStateMixin{
  TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Swap or Offer shift"),
        centerTitle: true,
      ),
      body: Column(      // Column
        children: <Widget>[
          Container(
            color: Color(0xffF5F5F5),        // Tab Bar color change
            child: TabBar(           // TabBar
              controller: _tabController,
              labelColor: const Color(0xff959595),
              indicatorWeight: 2,
              indicatorColor: Color(0xff4961F6),
              tabs: <Widget>[
                Tab(
                  text: "SWAP MY SHIFT",
                ),
                Tab(
                  text: "OFFER MY SHIFT",
                ),
              ],
            ),
          ),
          Expanded(
            flex: 3,
            child: TabBarView(         // Tab Bar View
              physics: BouncingScrollPhysics(),
              controller: _tabController,
              children: <Widget>[
                Text('Tab1'),
                Text('Tab2'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
user_92365250

For anyone who is still looking for How to separate a TabBar from Appbar , please check the below code- 

appBar: new AppBar(
    title: new Text("some title"),
    body: new Column(
        children: [
            /// this is will not colored with theme data
            new TabBar(...),
            Expanded(
                new TabBarView(...)
            )
        ]
    )
)
user_60650320

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

Or you can even simply wrap the TabBar in a Container widget, and apply the "color" you want.

user_35287740
Related