How to create a navigation drawer with icons? -Flutter

Hey, what’s up, guys. Do you want to create a drawer with icons in flutter? In this post, I will tell you two methods to associate an icon with each drawer item. So, without further ado, let’s start our main topic.

The first method of adding icons to the drawer is very simple. You just have to use the leading property of the ListTile widget. Let’s see the code.

import 'package:flutter/material.dart';

void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Drawer with icons"), backgroundColor: Colors.deepPurple,),
      body: const Center(
        child: Text('Flutter Drawer with icons'),
      ),
      drawer: Drawer(
        // Add a ListView to the drawer.
        child: ListView(
          //  Ensure that ListView doesn't have any padding.
          //  This line will Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.deepPurple,
              ),
              child: Icon(Icons.mark_email_read_outlined,size: 50,)
            ),
            ListTile(
              leading: Icon(Icons.email),
              title: const Text('Inbox'),
              onTap: () {
                // Here you can Update the state of the app,
                //like, navigating to the screen the user has selected
                // ...
                // After User has selected the option,
                // close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(Icons.send),
              title: const Text('Sent'),
              onTap: () {
                // Here you can Update the state of the app,
                //like, navigating to the screen the user has selected
                // ...
                // After User has selected the option,
                // close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

You can see in the above code that I have associated a different icon with each drawer item using the leading property of the ListTile widget.

Output :

That’s the one way of adding icons to the navigation drawer. But, If you want more control over spacing(Like space between icon and title), then I have another way of doing the same.

In this method, I will build drawer items using the Row widget. Let’s see the code.

import 'package:flutter/material.dart';

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

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

  static const appTitle = 'Drawer with Icons';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const Center(
        child: Text('Drawer with icons'),
      ),
      drawer: Drawer(
        // Add a ListView to the drawer
        child: ListView(
          //  Ensure that ListView doesn't have any padding.
          //  This line will Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Icon(Icons.mark_email_read_outlined,size: 50),
            ),

            Container(
                height: 50,
                child: InkWell(
                    child: Padding(
                        padding: EdgeInsets.only(left:15),
                        child: Row(
                            children: <Widget>[
                              Icon(Icons.email),
                              SizedBox(width:10),
                              Text("Inbox")
                            ])),
                    onTap: (){
                      // Here you can Update the state of the app,
                      //like, navigating to the screen the user has selected
                      // ...
                      // After User has selected the option,
                      // close the drawer
                      Navigator.pop(context);
                    })),
            Container(
                height: 50,
                child: InkWell(
                    child: Padding(
                        padding: EdgeInsets.only(left:15),
                        child: Row(
                            children: <Widget>[
                              Icon(Icons.send),
                              SizedBox(width:10),
                              Text("Sent")
                            ])),
                    onTap: (){
                      // Here you can Update the state of the app,
                      //like, navigating to the screen the user has selected
                      // ...
                      // After User has selected the option,
                      // close the drawer
                      Navigator.pop(context);
                    })),
          ],
        ),
      ),
    );
  }
}

Output :

Here, I have added a Container widget first then inside the Container widget I have added the Inkwell widget then comes the Padding widget, and finally, the Row widget that contains the title and icon for the drawer item.

That were the two methods to add icons to the navigation drawer. If you want to see the codes as a Github gist then click here for the first method code and click here for the second method code.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: