Blog

Learn NavigationDrawer using these step by step examples in flutter. Here are the examples:

Example 1: Flutter NavigationDrawer Examples

A NavigationDrawer example in flutter - simple example.

Example 1: NavigationDrawer Example

Here are the demo screenshots:

This example will comprise the following files:

• NavigationDrawer.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependencies are needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). NavigationDrawer.dart

Create a file Dart named NavigationDrawer.dart

Here is the full code

import 'package:flutter/material.dart';
import 'package:flutter_playground/utils/Strings.dart';
class NavigationDrawer extends StatefulWidget {
  @override
  _NavigationDrawerState createState() => _NavigationDrawerState();
}
class _NavigationDrawerState extends State<NavigationDrawer> {
  bool _isVisible = true;
  String _title = "Navigation Example";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      endDrawer: endDrawer(),
      drawer: startDrawer(),
      body: Center(child: Text(_title)),
    );
  }
  ///
  /// right hand side drawer using [UserAccountsDrawerHeader]
  /// [Drawer]
  ///
  Widget endDrawer() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: const Text("Flutter Example"),
            accountEmail: const Text("[email protected]"),
            currentAccountPicture: circularAvatars(),
            otherAccountsPictures: <Widget>[
              circularAvatars(),
              circularAvatars(),
              circularAvatars(),
            ],
            onDetailsPressed: () {
              setState(() {
                _isVisible = !_isVisible;
              });
            },
          ),
          Offstage(
            offstage: _isVisible,
            child: Column(
              children: <Widget>[
                createDrawerAccountListTiles(),
                createDrawerAccountListTiles(),
                createDrawerAccountListTiles(),
                createDrawerAccountListTiles(),
              ],
            ),
          ),
          Offstage(
            offstage: !_isVisible,
            child: Column(
              children: <Widget>[
                createDrawerListTiles(
                  Icons.photo_camera,
                  "Import",
                ),
                createDrawerListTiles(Icons.photo, "Gallery"),
                createDrawerListTiles(Icons.slideshow, "Slideshow"),
                createDrawerListTiles(Icons.build, "Tools"),
                const Divider(),
                createDrawerListTiles(Icons.share, "Share"),
                createDrawerListTiles(Icons.send, "Send"),
              ],
            ),
          ),
        ],
      ),
    );
  }
  ///
  /// left side drawer using [DrawerHeader]
  ///
  Widget startDrawer() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: const BoxDecoration(color: Colors.orangeAccent),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.end,
              children: const <Widget>[
                FlutterLogo(
                  size: 48.0,
                ),
                Text(
                  "Flutter Example",
                  style: TextStyle(
                    fontFamily: Strings.fontRobotoRegular,
                    fontSize: 16.0,
                  ),
                ),
                Text(
                  "[email protected]",
                  style: TextStyle(
                    fontFamily: Strings.fontRobotoRegular,
                    fontSize: 14.0,
                  ),
                ),
              ],
            ),
          ),
          createDrawerListTiles(Icons.photo_camera, "Import"),
          createDrawerListTiles(Icons.photo, "Gallery"),
          createDrawerListTiles(Icons.slideshow, "Slideshow"),
          createDrawerListTiles(Icons.build, "Tools"),
          const Divider(),
          createDrawerListTiles(Icons.share, "Share"),
          createDrawerListTiles(Icons.send, "Send"),
        ],
      ),
    );
  }
  ///
  /// Account list tile
  ///
  Widget createDrawerAccountListTiles() {
    return const ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.orangeAccent,
        child: FlutterLogo(),
      ),
      title: Text(
        "[email protected]",
        style: TextStyle(
          fontFamily: Strings.fontRobotoBold,
          fontSize: 16.0,
        ),
      ),
    );
  }
  ///
  /// Drawer container list tiles
  /// [IconData]
  ///
  Widget createDrawerListTiles(IconData icon, String title) {
    return ListTile(
      leading: Icon(
        icon,
      ),
      title: Text(
        title,
        style: const TextStyle(
          fontFamily: Strings.fontRobotoBold,
          fontSize: 16.0,
        ),
      ),
      onTap: () {
        setState(() {
          _title = title;
          Navigator.pop(context);
        });
      },
    );
  }
  ///
  /// creates the circular avatar for the header
  /// [CircleAvatar]
  ///
  Widget circularAvatars() {
    return const CircleAvatar(
      backgroundColor: Colors.orangeAccent,
      child: FlutterLogo(),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.

Read Individually.

---