在颤动中更改标签栏的背景颜色答案

【问题标题】：Change background color of Tab bar in flutter在颤动中更改标签栏的背景颜色
【发布时间】：2019-02-08 19:19:57
【问题描述】：

我正在尝试在颤动中更改标签栏的背景颜色，我尝试了以下方法（在此论坛上已被接受为答案），但没有奏效：

这里是代码

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

编辑：

当我更改主题数据颜色时，背景颜色不会改变。我试图在应用栏下方创建一个水平滚动子菜单，有人建议我使用标签栏。

这是整个 dart 文件：

  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 文件，我会编辑它并添加它。
我添加了整个 dart 文件。谢谢@diegoveloper
你想要什么颜色？
只是白色，我正在尝试实现类似 Quora 的设计。

标签： dart flutter

【解决方案1】：

当 Tabbar 位于 Material 小部件内时，您可以更改 Tabbar 的背景颜色。

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

【讨论】：

【解决方案2】：

您好，因为您在 appbar 中添加了标签栏，所以您得到了相同的颜色，如果您正在为 TabBar 和 Appbar 寻找不同的颜色。这是您必须做的。
*在Scafold的正文中添加TabBar。
示例代码：

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

【讨论】：

【解决方案3】：

对于仍在寻找如何将 TabBar 与 Appbar 分开的任何人，请查看以下代码 -

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(...)
            )
        ]
    )
)

【讨论】：

【解决方案4】：

或者您甚至可以简单地将 TabBar 包装在一个 Container 小部件中，然后应用您想要的“颜色”。

【讨论】：

不能，因为Container没有实现PreferredSizeWidget

【解决方案5】：

您的AppBar 中有TabBar，因此它采用相同的颜色，只需将TabBar 移到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
                         ....

【讨论】：

将TabBar 放入body，然后效果很好！