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…

Navigation Drawer Flutter

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);