Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

drawer
flutter

Create a drawer in Flutter

Naba Ali

Overview of navigation drawer

The navigation drawer in Flutter is used to navigate different pages in the application. The drawer usually slides horizontally from the edge of the screen and covers 50% of it. In Flutter, the drawer is usually implemented with the Drawer() widget.

This is what the navigation drawer looks like:

1 of 3

How to create a drawer in Flutter

First, we create a new Flutter application with the following command:

flutter create new_application

The new application with the main.dart file is created.

Then, we add the drawer code to the Scaffold widget:

return Scaffold(
  appBar: AppBar(
    title: Text("Drawer app"),
  ),
  drawer: Drawer(),
),

For this demonstration, the ListView is added to the drawer as a child widget.

Drawer(
      backgroundColor: const Color.fromRGBO(50,75,205,1),
      child: ListView(
        children: []
       ),
),

The drawer header

The drawer provides a widget called DrawerHeader to add a header for the drawer:

Drawer(
  backgroundColor: const Color.fromRGBO(50,75,205,1),
  child: ListView(children: [
    DrawerHeader(
      child: Column(
        children: const [
          SizedBox(height: 10),
          Center(
            child: CircleAvatar(
              radius: 30,
              backgroundImage: AssetImage('assets/img.jpg'),
            ),
          ),
          SizedBox(height: 10),
          Text("Flutter Developer",
              style: TextStyle(fontSize: 20, color: Colors.white)),
          Text("dev@abc.com",
              style: TextStyle(fontSize: 20, color: Colors.white)),
        ],
      ),
    ),
  ]),
);

Drawer body

As for the body of the drawer, we add ListTile for further children in the ListView.

Note: Inside each ListTile, there is a comment that says “Add Navigation logic here”. This is where we add a code to navigate to the new screen.

Drawer(
  backgroundColor: const Color.fromRGBO(50,75,205,1),
  child: ListView(
    children: [
      DrawerHeader(
        child: Column(
          children: const [
            SizedBox(height: 10),
            Center(
              child: CircleAvatar(
                radius: 30,
                backgroundImage: AssetImage('assets/img.jpg'),
             ),
            ),
            SizedBox(height: 10),
            Text("Flutter Developer",
                style: TextStyle(fontSize: 20, color: Colors.white)),
            Text("dev@abc.com",
                style: TextStyle(fontSize: 20, color: Colors.white)),
          ],
        ),
      ),
      const Divider(thickness: .06, color: Color.fromARGB(255,30,29,29)),
      ListTile(
        iconColor: Colors.white,
        leading: const Icon(Icons.person),
        title: const Text('My Profile', 
                     style: TextStyle(color: Colors.white)),
         onTap: () {
             // Add Navigation logic here
        },
      ),
      ListTile(
        iconColor: Colors.white,
        leading: const Icon(Icons.book),
        title: const Text('My Course', 
                     style: TextStyle(color: Colors.white)),
         onTap: () {
             // Add Navigation logic here
        },
      ),
      ListTile(
        iconColor: Colors.white,
        leading: const Icon(Icons.subscriptions),
        title: const Text('Go Premium', 
                     style: TextStyle(color: Colors.white)),
        onTap: () {
             // Add Navigation logic here
        },
      ),
    ],
  )
)
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
  <component name="NewModuleRootManager" inherit-compiler-output="true">
    <exclude-output />
    <content url="file://$MODULE_DIR$">
      <sourceFolder url="file://$MODULE_DIR$/lib" isTestSource="false" />
      <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
      <excludeFolder url="file://$MODULE_DIR$/.dart_tool" />
      <excludeFolder url="file://$MODULE_DIR$/.idea" />
      <excludeFolder url="file://$MODULE_DIR$/.pub" />
      <excludeFolder url="file://$MODULE_DIR$/build" />
    </content>
    <orderEntry type="sourceFolder" forTests="false" />
    <orderEntry type="library" name="Dart SDK" level="project" />
    <orderEntry type="library" name="Flutter Plugins" level="project" />
    <orderEntry type="library" name="Dart Packages" level="project" />
  </component>
</module>

Explanation

  • Line 28: We create a Drawer() widget inside the scaffold.
  • Line 30: We add 'ListView` as a child inside the drawer.
  • Lines 32–49: The first child of the ListView is the DrawerHeader(), which further contains multiple children in its column widget.
  • Lines 51–59: We add the ListTile() widget below the DrawerHeader with icons and text that represent a single page.
  • Lines 60–77: We add two more ListTile() for other pages.

Note: Inside each ListTile(), we add the navigation logic to allow for navigation between pages.

RELATED TAGS

drawer
flutter
RELATED COURSES

View all Courses

Keep Exploring