更改 Flutter 抽屉背景颜色

Question

如何更改 flutter nav drawer 的背景颜色？似乎没有颜色或背景颜色属性。

Answer 1

当您在 Drawer 的 child 属性中构建 ListView 时，您可以将 Drawer 的不同部分包裹在 Container 并使用 Container.

的 color 属性

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，即 DrawerHeader正文将跟随您的 canvasColor，因此您需要覆盖其中之一的值以更改颜色：

return new MaterialApp(
....
theme: new ThemeData(
       canvasColor: Colors.redAccent,

       ....),
)

Answer 2

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

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

Answer 3

普通背景

只需使用 primarySwatch 设置您想要的主题颜色：Colors.brown 属性 in 主题数据

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 4

用 Theme、

包装 Drawer 的最佳方式

例如：

  @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

要更改抽屉Header颜色请使用打击代码

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 6

最简单的方法：

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

Answer 7

这会有所帮助

 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 8

您可以将抽屉中的任何东西都包裹在一个包裹有扩展小部件的容器中。因此，您可以在那里更改容器的颜色。这样的东西会起作用。

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

Answer 9

试试这个。

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

          ],
        ),
      ),
    );
  }
}

Answer 10

您可以只使用此代码；

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

更改 Flutter 抽屉背景颜色

Change Flutter Drawer Background Color

drawer

navigation-drawer

flutter