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.
DeveloperXon 
Leave a Reply