Question

如何更改颤动导航抽屉的背景颜色？似乎没有颜色或背景颜色属性。

Answer 1

当您在def edit if current_user != User.find(params[:id]) sound_loud_alarm elsif current_user = User.find(params[:id]) allow_user_to_edit else end end的{{1}}属性中构建ListView时，可以将child的不同部分包含在Drawer内并使用Drawer的{{1}}属性。

Container

如果您已经有了一致的着色设计，那么更好的选择是在应用根目录的主题属性下定义color，Container并且正文将跟随您drawer: new Drawer( child: new ListView( children: <Widget>[ new Container(child: new DrawerHeader(child: new CircleAvatar()),color: Colors.tealAccent,), new Container ( color: Colors.blueAccent, child: new Column( children: new List.generate(4, (int index){ return new ListTile( leading: new Icon(Icons.info), ); }), ), ) ], ), ),，因此您需要覆盖其中一个的值以更改颜色：

ThemeData

Answer 2

你可以直接使用这个代码；

drawer: Drawer(
        child: Container(
          //child: Your widget,
          color: Colors.red,
          width: double.infinity,
          height: double.infinity,
        ),
      )

Answer 3

最简单的方法可能是将ListView包裹在Container内并指定其颜色，如下所示：

drawer: Drawer(
  child: Container(color: Colors.red,
    child: new ListView(
      ...
    )
  )
)

Answer 4

用Drawer包装Theme的最佳方法，

例如：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //other scaffold items
        drawer: Theme(
           data: Theme.of(context).copyWith(
              canvasColor: Colors.blue; //This will change the drawer background to blue.
              //other styles
              child: Drawer(
                 child: Column(
                    children: <Widget>[
                       //drawer stuffs
                    ],
                 ),
             ),
        );
  }

Answer 5

这会有所帮助

 drawer: Drawer(
    child: Container(
      color: Colors.blueAccent,
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            decoration: BoxDecoration(
              color: Color(0xFF56ccf2),
            ),
            accountName: Text("User Name Goes"),
            accountEmail: Text("emailaddress@gmail.com"),
            currentAccountPicture: CircleAvatar(
              backgroundColor:
              Theme.of(context).platform == TargetPlatform.iOS
                  ? Color(0xFF56ccf2)
                  : Colors.white,
              child: Text("TK",
                style: TextStyle(fontSize: 50,
                  color: Colors.lightGreenAccent,),),
            ),
          ),
          ListTile(
            title: Text('Home',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                )),
            contentPadding: EdgeInsets.fromLTRB(20, 5, 0, 5),
            trailing: Icon(Icons.arrow_right,
              color: Colors.white,),
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) => HomeScreen()));
            },
          ),
        ],
      ),
    ),
  ),

Answer 6

主要背景

只需使用 ThemeData

中的 primarySwatch ：Colors.brown 属性设置所需的主题颜色。

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      theme: new ThemeData(
        primarySwatch: Colors.brown, // Your app THEME-COLOR
      ),
      home: MyHomePage(title: appTitle),
    );
  }
}

梯度背景 将 gradient 属性添加到 AppBar 。

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("profyl.org",
              style: TextStyle(color: Colors.white),
              textDirection: TextDirection.ltr),
          flexibleSpace: Container(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                  colors: [
                    const Color(0xFF3366FF),
                    const Color(0xFF00CCFF),
                  ],
                  begin: const FractionalOffset(0.0, 0.0),
                  end: const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
          ),
        ),
        body: HomeListPage(),
        drawer: DrawerPage());
  }

Answer 7

要更改抽屉标题颜色，请使用打击代码

UserAccountsDrawerHeader( accountName: Text("Ashish Rawat"), accountEmail: Text("ashishrawat2911@gmail.com"), decoration: BoxDecoration( color: const Color(0xFF00897b), ), currentAccountPicture: CircleAvatar( backgroundColor: Theme.of(ctxt).platform == TargetPlatform.iOS ? const Color(0xFF00897b) : Colors.white, child: Text( "A", style: TextStyle(fontSize: 40.0), ), ), ) ,

Answer 8

最简单的方法：

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
         decoration: BoxDecoration(color:Theme.of(context).bottomAppBarColor),
    )],
  ),
)

Answer 9

您可以使用扩展了小部件的容器包装抽屉中的所有物品。因此，您可以在此处更改容器的颜色。这样的事情会起作用。

Drawer(
    child: Expanded(
      child: Container(
       color: Colors.red,
       child: Text('Tabs'),
      ),
    ),
  )

Answer 10

尝试一下。

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        color: Colors.black,
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [

          ],
        ),
      ),
    );
  }
}

改变颤振抽屉背景颜色

10 个答案: