Learn how to create and use a navigationdrawer in flutter using simple step by step examples.

Included are animated drawers.

Flutter Animated Hero Drawer Example

A flutter Animated hero NavigationDrawer Example.

This example has 4 files:

  1. main.dart – app entry point
  2. accounts.dart – accounts page
  3. home.dart – home page
  4. settings.dart – settings page.

Step 1: Create Project

Start by creating an empty Flutter Project in your favorite editor or IDE.

Step 2: Add Dependencies

No external packages are needed for this project.

Step 3: Create Pages

There are three pages:

(a). pages/accounts.dart

Create an accounts.dart file and add the following code:

import 'package:flutter/material.dart';

class Account extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Account Page"),
      ),
      body: Container(
        child: Center(
          child: SizedBox(
            width: 100.0,
            child: Hero(
              tag: 'kangaroo',
              child: ClipOval(
                child: Image.asset("images/kangaroo.jpg"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

(b). pages/home.dart

In the home.dart add the following code:

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
  Drawer buildDrawer(BuildContext context) {
    var header = DrawerHeader(
      child: Text("Header"),
    );
    var about = AboutListTile(
      child: Text("About Screen"),
      applicationName: "Hero and Drawer Example",
      applicationVersion: "V0.1.0",
      applicationIcon: Icon(Icons.hourglass_empty),
      icon: Icon(Icons.info),
    );

    ListTile buildNavItem(var icon, String label, String route) {
      return ListTile(
        leading: Icon(icon),
        title: Text(label),
        onTap: () {
          setState(() {
            Navigator.of(context).pop();
            Navigator.of(context).pushNamed(route);
          });
        },
      );
    }

    var navList = [
      header,
      buildNavItem(Icons.home, "Home", "/"),
      buildNavItem(Icons.settings, "Settings", "/settings"),
      buildNavItem(Icons.account_balance_wallet, "Account", "/account"),
      about
    ];

    ListView listView = ListView(children: navList);

    return Drawer(child: listView);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hero Drawer App'),
      ),
      body: Container(
        child: Center(
          child: Hero(
            tag: 'kangaroo',
            child: Image.asset('images/kangaroo.jpg'),
          ),
        ),
      ),
      drawer: buildDrawer(context),
    );
  }
}

(c).pages/settings.dart

Add the following code:

import 'package:flutter/material.dart';

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings Page"),
      ),
      body: Container(
        child: Center(
          child: SizedBox(
            width: 400.0,
            child: Hero(
              tag: 'kangaroo',
              child: ClipRRect(
                borderRadius: BorderRadius.circular(60.0),
                child: Image.asset("images/kangaroo.jpg", fit: BoxFit.cover),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Step 4: Create main class

Lastly create the main.dart file and add the following code:

main.dart

import 'package:flutter/material.dart';
import 'package:hero_drawer/pages/home.dart';
import 'package:hero_drawer/pages/settings.dart';
import 'package:hero_drawer/pages/accounts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
      routes: <String, WidgetBuilder>{
        "/settings": (BuildContext context) => Settings(),
        "/account": (BuildContext context) => Account(),
      },
    );
  }
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author

Categorized in: