Change Flutter Drawer Background Color
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
],
),
),
);
}
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(
...
)
)
)
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,
....),
)