Change Flutter Drawer Background Color
Navigation DrawerFlutterDrawerNavigation Drawer Problem Overview
How can I change the background color of a flutter nav drawer? There doesn't seem to be a color or background-color property.
Navigation Drawer Solutions
Solution 1 - Navigation Drawer
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 - Navigation Drawer
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 - Navigation Drawer
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 - Navigation Drawer
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 - Navigation Drawer
You can just use this code;
drawer: Drawer(
child: Container(
//child: Your widget,
color: Colors.red,
width: double.infinity,
height: double.infinity,
),
)
Solution 6 - Navigation Drawer
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());
}
Solution 7 - Navigation Drawer
Try This.
@override
Widget build(BuildContext context) {
return Drawer(
child: Container(
color: Colors.black,
child: ListView(
padding: const EdgeInsets.all(0),
children: [
],
),
),
);
}
}
Solution 8 - Navigation Drawer
The simplest way:
Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(color:Theme.of(context).bottomAppBarColor),
)],
),
)
Solution 9 - Navigation Drawer
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("[email protected]"),
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()));
},
),
],
),
),
),
Solution 10 - Navigation Drawer
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'),
),
),
)