Change Flutter Drawer Background Color
Answer :
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, ....), )
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( ... ) ) )
Comments
Post a Comment