How to Implement a Navigation Drawer in Flutter using Scaffold Widget and Drawer Property

The Scaffold widget is an essential component of the Flutter framework that provides a consistent visual structure to your app following the material design guidelines. It supports special material design components such as the app bar, snackbar, and drawer. In this blog post, we’ll focus on the drawer widget and how it can be used to implement navigation in your app.

What is a Drawer?

A drawer is a type of navigation menu that can be accessed by clicking a menu button. When clicked, the drawer slides in from the side of the screen, displaying a list of items or menu options that can be selected. It is an easy way to navigate throughout your app and can be customized to suit your design needs.

Using a Drawer with the Scaffold Widget To create a drawer in your app, you first need to create a Scaffold widget and set its drawer property to a Drawer widget. The Drawer widget takes a widget as a child, which can be any widget. However, in this case, we want to create a navigation bar. We can use either a listView or a column widget to render a list of items, but a listView is more dynamic since it has scroll behavior.

class DrawerApp extends StatelessWidget {
  const DrawerApp ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [],
        ),
      ),
    );
  }
}

Next, the listView takes a list of ListTilewidgets, which will be our navigation items. The drawer widget also has a widget that works with it called the DrawerHeader. The DrawerHeader is used to specify a header for the drawer widget and has a decoration property that means it can be styled just like any other container.

class DrawerApp extends StatelessWidget {
  const DrawerApp ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.greenAccent,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('item 1'),
            ),
            ListTile(
              title: const Text('item 2'),
            ),
          ],
        ),
      ),
    );
  }
}

Finally, we need to add an onTap callback to navigate to another screen in the app. When an item in the drawer is clicked, we can use the onTap callback to navigate to the desired screen.

class DrawerApp extends StatelessWidget {
  const DrawerApp ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.greenAccent,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('item 1'),
              onTap: () {
                Navigator.pushNamed(context, Screen1());
              },
            ),
            ListTile(
              title: const Text('item 2'),
              onTap: () {
                Navigator.pushNamed(context, Screen2());
              },
            ),
          ],
        ),
      ),
    );
  }
}

Putting everything together and you will get something like this

class DrawerApp extends StatelessWidget {
  const DrawerApp ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        title: const Text('Drawer App'),
        backgroundColor: Colors.greenAccent,
      ),
      body: const Center(
        child: Text('My Page'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.greenAccent,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('item 1'),
              onTap: () {
                Navigator.pushNamed(context, Screen1());
              },
            ),
            ListTile(
              title: const Text('item 2'),
              onTap: () {
                Navigator.pushNamed(context, Screen2());
              },
            ),
          ],
        ),
      ),
    );
  }
}

Result:

Other Features of the Scaffold Widget In addition to the drawer widget, the Scaffold widget also supports other material design components such as the app bar and snackbar. The app bar is typically used to display the title of the current screen and provide navigation options. It can be customized with icons, search fields, and dropdown menus. The snackbar is used to display a brief message to the user, such as a confirmation message after an action has been taken.

In conclusion, the Scaffold widget is an essential component of the Flutter framework that provides a consistent visual structure to your app. The drawer widget is a great way to implement navigation in your app, and it works seamlessly with the scaffold and other material design components. With the steps outlined in this post, you can easily create a drawer widget that suits your app’s design needs.