How to change the whole background color of Drawer in Flutter

Question

first of all i'm new to flutter and so i am quite confused how to change the "whole" background color in drawer flutter.

i managed to change my ListTile and my so called DrawerHeader to the color i want but the rest (below the ListTile is all white). And there is a line below the DrawerHeader that i don't really want but i can't get rid of it.

here is the code

    import 'package:flutter/material.dart';
import '../style/theme.dart' as style;

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // width: MediaQuery.of(context).,
      child: Drawer(
        elevation: 0,
        child: ListView(
          children: <Widget>[
            Container(
              height: 170,
              width: 170,
              padding: EdgeInsets.only(top:30),
              color: style.Colors.secondColor,
              child: Column(children: <Widget>[
                Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child: Image.asset('images/circle.png',width: 80, height: 80,),),
                  //TODO ganti logo
                ),
              ],),
            ),
            Container(
              color: style.Colors.secondColor,
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.help_outline_sharp),
                    title: Text('Help', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('About us', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

here is the photo of the current situation

Here is the photo

Another Question what if i want to put a single ListTile on the bottom? (like log out)

Does this answer your question? [Change Flutter Drawer Background Color](https://stackoverflow.com/questions/47951907/change-flutter-drawer-background-color) — Simon Sot, Mar 13 '21 at 21:47

score 0 · Accepted Answer · answered Mar 13 '21 at 19:51

For changing the background color of drawer you can just swap the Drawer Widget with Container and give color to container

class MyDrawer extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return Drawer(
        elevation: 0,
        child: Container(
          color: Colors.blue,
        child: ListView(
          children: <Widget>[
            Container(
              height: 170,
              width: 170,
              padding: EdgeInsets.only(top:30),
              color: Colors.red,
              child: Column(children: <Widget>[
                Material(
                  borderRadius: BorderRadius.all(Radius.circular(100)),
                  child: Padding(padding: EdgeInsets.all(20.0),
                  child: Image.asset('images/circle.png',width: 80, height: 80,),),
                ),
              ],),
            ),
            Container(
              color: Colors.red,
              child: Column(
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.help_outline_sharp),
                    title: Text('Help', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                  ListTile(
                    leading: Icon(Icons.person),
                    title: Text('About us', style: TextStyle(fontSize: 18,),),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This can be the final code you can use, it has answer to all your three questions

class MyDrawer extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                Container(
                  height: 170,
                  width: 170,
                  padding: EdgeInsets.only(top:30),
                  color: Colors.blue,
                  child: Column(children: <Widget>[
                    Material(
                      borderRadius: BorderRadius.all(Radius.circular(100)),
                      child: Padding(padding: EdgeInsets.all(20.0),
                                     child: Image.asset('images/circle.png',width: 80, height: 80,),),
                    ),
                  ],
                 ),
                ),
                ListTile(
                  leading: Icon(Icons.help_outline_sharp),
                  title: Text('Help', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
                ListTile(
                  leading: Icon(Icons.person),
                  title: Text('About us', style: TextStyle(fontSize: 18,),),
                  onTap: () {},
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: ListTile(
              leading: Icon(Icons.logout),
              title: Text('Logout')
            ),
          ),
        ],
      ),
    );
  }
}

score 0 · Answer 2 · answered Apr 13 '22 at 20:44

To change the color, wrap the Drawer widget in a Theme widget as follows:

Scaffold(
  drawer:Theme(
    data:Theme.of(context).copyWith(
     canvasColor://the desired color will go here
    ),
    child:Drawer(/*drawer content*/)
  )
)

Hope this is useful for someone

How to change the whole background color of Drawer in Flutter

2 Answers2