Create a drawer in Flutter

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
        },
      ),
    ],
  )
)

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.