Change Flutter Drawer Background Color

AlexL picture AlexL · Dec 23, 2017 · Viewed 39.6k times · Source

How can I change the background color of a flutter nav drawer? There doesn't seem to be a color or background-color property.

Answer

aziza picture aziza · Dec 23, 2017

When you build your ListView in the child property of your Drawer, you can wrap your different sections of the Drawer inside a Container and use the color property of the Container.

enter image description here

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

A better alternative if you already have a consistent coloring design in your mind, is to define your ThemeData under the theme property of the root of your app, the DrawerHeader and the body will follow your canvasColor, so you need to override the value of one of them to change the color:

enter image description here

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

       ....),
)