In this example, you can find how to create a navigation drawer using flutter.
Things like Opening new page along with parameters, adding some space to the next of drawer, adding username and email information using color: rgb(78, 201, 176); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; white-space: pre-wrap;](UserAccountsDrawerHeader constructor.
Here are the final output and main.dart code. All you need to do is create a default flutter program and copy paste the below content and run it.
![](/Uploads/1d8943b3-7dc4-4624-b9e8-788cd2c3089b.gifwidth="50%height="auto](
Final main.dart code below.
color: #dcdcaa;](runApp(color: #c586c0;](new color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #6a9955;](// This widget is the root of your application.
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](MaterialApp(
title: color: #ce9178;]('Flutter Menu Demo',
theme: color: #c586c0;](new color: #4ec9b0;](ThemeData(
primarySwatch: color: #4ec9b0;](Colors.blue,
),
home: color: #c586c0;](new color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Flutter Menu Demo Home Page'),
);
}
}
color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key);
color: #569cd6;](final color: #4ec9b0;](String title;
color: #569cd6;](@override
color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #c586c0;](new color: #4ec9b0;](_MyHomePageState();
}
color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State {
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold(
appBar: color: #c586c0;](new color: #4ec9b0;](AppBar(
title: color: #c586c0;](new color: #4ec9b0;](Text(widget.title),
),
body: color: #c586c0;](new color: #4ec9b0;](Center(
child: color: #c586c0;](new color: #4ec9b0;](Column(
mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center,
children: [
color: #c586c0;](new color: #4ec9b0;](Text(
color: #ce9178;]('Navigation Drawer example',
),
],
),
),
drawer: color: #c586c0;](new color: #4ec9b0;](Container(
constraints: color: #c586c0;](new color: #4ec9b0;](BoxConstraints.color: #dcdcaa;](expand(
width: color: #4ec9b0;](MediaQuery.color: #dcdcaa;](of(context).size.width - color: #b5cea8;](20,
),
color: color: #4ec9b0;](Colors.white,
alignment: color: #4ec9b0;](Alignment.center,
child: color: #c586c0;](new color: #4ec9b0;](ListView(
padding: color: #4ec9b0;](EdgeInsets.zero,
children: [
color: #c586c0;](new color: #4ec9b0;](DrawerHeader(
padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](all(color: #b5cea8;](16.0),
child: color: #c586c0;](new color: #4ec9b0;](UserAccountsDrawerHeader(
accountName: color: #c586c0;](new color: #4ec9b0;](Text(
color: #ce9178;]('Someusername',
style: color: #4ec9b0;](TextStyle(color: color: #4ec9b0;](Colors.black),
),
accountEmail: color: #c586c0;](new color: #4ec9b0;](Text(
color: #ce9178;]('Someemail@flutter.com',
style: color: #4ec9b0;](TextStyle(color: color: #4ec9b0;](Colors.black),
),
currentAccountPicture: color: #4ec9b0;](FlutterLogo(),
decoration: color: #c586c0;](new color: #4ec9b0;](BoxDecoration(
color: color: #4ec9b0;](Colors.amberAccent,
),
),
decoration: color: #c586c0;](new color: #4ec9b0;](BoxDecoration(color: color: #4ec9b0;](Colors.amberAccent)),
color: #c586c0;](new color: #4ec9b0;](ListTile(
leading: color: #c586c0;](new color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.info),
title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]("Page 1"),
onTap: () {
color: #dcdcaa;](_opennewpage(color: #ce9178;]("page 1");
}),
color: #c586c0;](new color: #4ec9b0;](ListTile(
leading: color: #c586c0;](new color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.info),
title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]("Page 2"),
onTap: () {
color: #dcdcaa;](_opennewpage(color: #ce9178;]("page 2");
}),
color: #c586c0;](new color: #4ec9b0;](ListTile(
leading: color: #c586c0;](new color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.info),
title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]("Page 3"),
onTap: () {
color: #dcdcaa;](_opennewpage(color: #ce9178;]("page 3");
}),
color: #c586c0;](new color: #4ec9b0;](ListTile(
leading: color: #c586c0;](new color: #4ec9b0;](Icon(color: #4ec9b0;](Icons.close),
title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]("Close"),
onTap: () {
color: #4ec9b0;](Navigator.color: #dcdcaa;](pop(context);
}),
],
),
));
}
color: #569cd6;](void color: #dcdcaa;](_opennewpage(s) {
color: #4ec9b0;](Navigator.color: #dcdcaa;](of(context).color: #dcdcaa;](push(
color: #c586c0;](new color: #4ec9b0;](MaterialPageRoute(
builder: (color: #4ec9b0;](BuildContext context) {
color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold(
appBar: color: #c586c0;](new color: #4ec9b0;](AppBar(
title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]('Success'),
),
body: color: #c586c0;](new color: #4ec9b0;](Center(
child: color: #c586c0;](new color: #4ec9b0;](Column(
mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center,
children: [
color: #4ec9b0;](Padding(
padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(
horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0),
child: color: #4ec9b0;](Column(
children: [
color: #4ec9b0;](Padding(
padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(
horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0),
child: color: #4ec9b0;](FlutterLogo(
size: color: #b5cea8;](70.0,
),
),
color: #4ec9b0;](Text(
color: #ce9178;]('This is a New Page and you click on ' + s,
textAlign: color: #4ec9b0;](TextAlign.center,
style: color: #c586c0;](new color: #4ec9b0;](TextStyle(fontWeight: color: #4ec9b0;](FontWeight.w300),
),
],
),
),
],
),
),
);
},
),
);
}
}
`
Thanks,
Srikanth