Navigation Drawer | Navigation Drawer in Flutter

In apps that use Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative.

In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:

1. Create a Scaffold.
2. Add a drawer.
3. Populate the drawer with items.
4. Close the drawer programmatically.

Interactive example

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
   
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('My Page!')),
   
      drawer: Container(
        width: 220.0,
        child: Drawer(
          child: ListView(
         
            padding: EdgeInsets.zero,
            children: <Widget>[
           
              DrawerHeader(
                child: Column(
                  children: <Widget>[
               
                 Container(
                   margin: EdgeInsets.only(top: 2.0),
                  child: Align(
                    alignment: Alignment.bottomLeft,
                    child: FlutterLogo(
                      size:50
                    ),
                  )
                ),
                 
                   Container(
                   margin: EdgeInsets.only(top: 30.0),
                  child: Align(
                    alignment: Alignment(-0.95,0.0),
                    child: Text('FlutterTute'),
                  )
                ),

                  Container(
                   margin: EdgeInsets.only(top: 5.0),
                  child: Align(
                    alignment: Alignment.bottomLeft,
                    child: Text('fluttertute.blogspot.com'),
                  )
                ),
              ],
            ),
             
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
           
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
         
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}