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.

Drawer documentation lists BackgroundColor property, but it doesn't seem to exist. Strange. — app_sciences, Jan 04 '22 at 18:06

Shady Aziza · Accepted Answer · 2018-01-06T13:07:15.060

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,

       ....),
)

Thanks for the advice about `ThemeData`. IMHO, using consistent color scheme is a way to go here. — Alex Semeniuk, Jul 25 '19 at 12:37

Raj Yadav · Answer 2 · 2019-06-23T06:25:16.223

52

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

edited Jun 23 '19 at 06:25

answered Mar 30 '19 at 08:55

Raj Yadav

9,677
6
35
30

1

Only this works for transparent background – Erez.info Jan 20 '21 at 10:58
1

canvas key is what I was searching, thanks – Álvaro Agüero Oct 01 '21 at 16:31
1

This should be the top answer – Chris Oct 05 '21 at 09:53

score 17 · Answer 3 · answered Jul 06 '18 at 05:02

17

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(
      ...
    )
  )
)

answered Jul 06 '18 at 05:02

JonasH

3,960
3
15
17

score 9 · Answer 4 · edited Sep 30 '19 at 07:16

For changing Drawer Header color use blow code

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

score 6 · Answer 5 · answered Mar 13 '21 at 20:40

6

You can just use this code;

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

answered Mar 13 '21 at 20:40

leylekseven

687
7
15

jazzbpn · Answer 6 · 2019-03-13T08:41:33.350

PLAIN BACKGROUND

Just set your desired theme color using primarySwatch: Colors.brown property in ThemeData

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 Add the gradient property to 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());
  }

BC TUBE · Answer 7 · 2020-10-30T18:35:25.413

3

Try This.

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

          ],
        ),
      ),
    );
  }
}

edited Oct 30 '20 at 18:35

answered Oct 30 '20 at 18:28

BC TUBE

664
5
15

score 2 · Answer 8 · answered Jul 22 '20 at 07:22

This will help

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

As this is some pretty extensive code, you should probably add a little bit of explanation or related documents such as documentation. — Fabian Bettag, Jul 22 '20 at 07:46
@FabianBettag Okay. I will do so next time I make an attempt to answer a question. Thanks — Kennedy Owusu, Jul 22 '20 at 17:05

score 1 · Answer 9 · edited Apr 05 '20 at 22:39

1

The simplest way:

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

edited Apr 05 '20 at 22:39

David Buck

3,752
35
31
35

answered Apr 05 '20 at 14:57

Дмитрий Пырин

11
2

score 1 · Answer 10 · answered Aug 10 '20 at 12:40

You can wrap whatever you have in your drawer with a container wrapped with expanded widget. Thus you can change the color of the container there. Something like this will work.

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

Change Flutter Drawer Background Color

10 Answers10

Linked