Navigation Drawer in Flutter

<p>In this example, you can find how to create a navigation drawer using flutter.</p> <p>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.</p> <p>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.</p> <p>![](/Uploads/1d8943b3-7dc4-4624-b9e8-788cd2c3089b.gifwidth="50%height="auto](</p> <p>Final main.dart code below.</p> <p>color: #dcdcaa;](runApp(color: #c586c0;](new color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #6a9955;](// This widget is the root of your application.</p> <p>color: #569cd6;](@override</p> <p>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'), ); } }</p> <p>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</p> <p>color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #c586c0;](new color: #4ec9b0;](_MyHomePageState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {</p> <pre>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);
          }),
    ],
  ),
));

</pre> <p>} 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), ), ], ), ), ], ), ), ); }, ), ); } } `</p> <p>Thanks, Srikanth</p>