Flutter Tutorials – Navigation Drawer in Flutter – Android and iOS

Today we will see how we can implement a Navigation Drawer in Flutter.
In Flutter, its easy, so Lets start…

 

Watch Video Tutorial

 

 
Navigation Drawer can be added as part of the Scaffold Widget. The Scaffold widget has a ‘drawer’ property on to which you can
add the drawer. This simple example below demonstrates that.

 
Here I will be adding some children to the drawer, basically a DrawerHeader, and three List Tiles.
The DrawerHeader can take its own child and you can customize the way you want. In this example I will be adding
an image, a SizedBox(for some spacing) and a Text widget.

 
Let’s jump into the code.
I believe the code is self explanatory, so I am not going into unnecessary details.

 
Complete Code

import 'package:flutter/material.dart';

class NavigationDrawerDemo extends StatefulWidget {
  NavigationDrawerDemo() : super();

  final String title = "Navigation Drawer Demo";

  @override
  _NavigationDrawerDemoState createState() => _NavigationDrawerDemoState();
}

class _NavigationDrawerDemoState extends State<NavigationDrawerDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset('images/flutter.jpg',
                  width: 80,
                  height: 80,),
                  SizedBox(height: 15,),
                  Text("name",
                  style: TextStyle(color: Colors.grey),)
                ],
              ),
              decoration: BoxDecoration(
                color: Colors.white,
              ),
            ),
            ListTile(
              leading: Icon(Icons.add_to_photos),
              title: Text('Add to Photos'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.add_alarm),
              title: Text('Alarm'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

 
Close the Drawer
 

To close the drawer call

 
Navigator.pop(context);