首页 文章

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

提问于
浏览
0

我试图改变标签栏的背景颜色,我尝试了以下(这个论坛被接受作为答案),但它没有工作:

这是代码

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

编辑:

当我更改主题数据颜色时,背景颜色不会改变 . 我试图在应用程序栏下创建一个水平滚动子菜单,建议我使用Tab栏 .

这是整个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",)
       )
     ]
    )







         )
   )
 );






  }
}

1 回答

  • 2

    您的 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
                             ....
    

相关问题