改变颤振抽屉背景颜色

Question

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

Answer 1

当你在ListView的child属性中构建你的Drawer时，你可以将Drawer的不同部分包裹在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，DrawerHeader和正文将跟随你的canvasColor，所以你需要覆盖一个值他们改变颜色：

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

       ....),
)

Answer 2

用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 3

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

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

Answer 4

平原背景

只需使用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 BACKGROUND将渐变属性添加到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 5

要更改抽屉头颜色，请使用吹码

---

UserAccountsDrawerHeader( accountName: Text("Ashish Rawat"), accountEmail: Text("[email protected]"), 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), ), ), ) ,