Drawer Navigation in Flutter

Create Free Backend With Appwrite

Introduction

You already learned how to create drawer in flutter. In this section, you will learn how to implement drawer navigation in flutter.

Example 1: Simple Drawer Navigation

In this example below, there are three screens: HomePage, ContactPage, and AboutPage. We’ll add a drawer to navigate between these screens.

Step 1: Create Contact Page & About Page

First define ContactPage and AboutPage.

// Contact Page
class ContactPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contact Page')),
      body: Center(child: Text('Contact Page')),
    );
  }
}

// About Page
class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About Page')),
      body: Center(child: Text('About Page')),
    );
  }
}

Step 2: Define Home Page with Drawer

Now in home page, add a drawer to navigate between these screens.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        child: Text('My App'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Home'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        title: Text('Contact'),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => ContactPage()));
        },
      ),
      ListTile(
        title: Text('About'),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => AboutPage()));
        },
      ),
    ],
  ),
),
Run Online

Challenge

Click on Try Online and create new screen called SettingsPage. Add a new item to the drawer to navigate to the SettingsPage.

Try Online