Change Flutter Drawer Background Color

Question

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

Solution 1

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.

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:

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

       ....),
)

Solution 2

Best way to wrap Drawer with Theme,

For example:

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

Solution 3

The easiest way would probably be to just wrap the ListView inside a Container and specify its color like following:

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

Solution 4

For changing Drawer Header color use blow code

---

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

Solution 5

You can just use this code;

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

View more solutions

Comments

[Alex Semeniuk]

Thanks for the advice about ThemeData. IMHO, using consistent color scheme is a way to go here.

[Fabian Bettag]

As this is some pretty extensive code, you should probably add a little bit of explanation or related documents such as documentation.

[Kennedy Owusu]

@FabianBettag Okay. I will do so next time I make an attempt to answer a question. Thanks

[Erez.info]

Only this works for transparent background

[Álvaro Agüero]

canvas key is what I was searching, thanks

[Chris]

This should be the top answer