Drawer in Flutter is a widget that helps us to navigate to other links. We can imagine it as a sub-router that consists of various links to other routes.
So with the help of Drawer widget we can navigate to other useful screens or pages in Flutter.
Drawer has a horizontal movement from the edge of the Scaffold. It actually helps to navigate the link to different routes in the flutter app.
How does the Drawer widget work?
Drawer plays a key role in Flutter User Interface or UI Material Design implementation. When our flutter use Material design, we use to navigate with two primary widgets.
One is tab and the other is Drawer.
When we don’t have sufficient space, we avoid tabs. We use Drawer.
In Flutter, we use the Drawer widget in combination with a Scaffold.
We need to use Scaffold to create a layout with a Material Design drawer and then populate the Drawer with items.
After that we close the Drawer pro grammatically.
The First step is, we wrap the Drawer with Scaffold widget. Let us consider a home page that starts with MaterialApp widget and we define two extra route.
We define those so that we can navigate to these pages with the help of our Drawer widget.
import 'package:flutter/material.dart';
import '/drawer_example/drawer_about.dart';
import '/drawer_example/drawer_contact.dart';
class DrawerExample extends StatelessWidget {
const DrawerExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Drawer Example',
home: DrawerHome(),
routes: {
DrawerAbout.routename: (context) => const DrawerAbout(),
DrawerContact.routename: (context) => const DrawerContact(),
},
);
}
}
class DrawerHome extends StatelessWidget {
const DrawerHome({Key? key}) : super(key: key);
static const routename = "/";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('')),
body: Center(
child: Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
child: Text(
'A Drawer Example.',
style: TextStyle(fontSize: 50.0),
),
),
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
const UserAccountsDrawerHeader(
accountName: Text("Sanjib Sinha"),
accountEmail: Text("sanjib@sanjibsinha.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"S",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("Home"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("About"),
onTap: () {
Navigator.of(context).pushNamed(DrawerAbout.routename);
},
),
ListTile(
leading: const Icon(Icons.contacts),
title: const Text("Contact Us"),
onTap: () {
Navigator.of(context).pushNamed(DrawerContact.routename);
},
),
],
),
),
);
}
}In the above code, we have defined the MaterialApp with two extra routes.
return MaterialApp(
title: 'Drawer Example',
home: DrawerHome(),
routes: {
DrawerAbout.routename: (context) => const DrawerAbout(),
DrawerContact.routename: (context) => const DrawerContact(),
},
);
...To add a Drawer widget to the flutter app, we’ve wrapped it with Scaffold widget.
We’ve done that for one single purpose.
The Scaffold widget maintains that our flutter app should follow the Material design guidelines and builds a consistent visual structure.
Two extra routes that we’ve defined, also follow the same guidelines. In addition, two extra pages also use Scaffold widgets for the same purpose.
So that they can support other Material design components, such as AppBar or SnackBar.
Watch this part of the code, where we’ve populated the Drawer with items.
And to do that we’ve used ListView widget.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('')),
body: Center(
child: Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(20),
child: Text(
'A Drawer Example.',
style: TextStyle(fontSize: 50.0),
),
),
),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
const UserAccountsDrawerHeader(
accountName: Text("Sanjib Sinha"),
accountEmail: Text("sanjib@sanjibsinha.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"S",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("Home"),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text("About"),
onTap: () {
Navigator.of(context).pushNamed(DrawerAbout.routename);
},
),
ListTile(
leading: const Icon(Icons.contacts),
title: const Text("Contact Us"),
onTap: () {
Navigator.of(context).pushNamed(DrawerContact.routename);
},
),
],
),
),
);
}As a result now we have a home page like the following image.
On the top left side, when we tap the Drawer icon, the drawer opens up to navigate to two pages, About and Contact us.
As we can see that it takes no time to populate the Drawer with DrawerHeader arguments and, moreover, we can add other routes with the help of ListTile widgets.
How do you customize the drawer in flutter and navigate?
We’ve already seen that to customize the Drawer in Flutter there are several options.
Moreover, we can follow the same Material Design guidelines and structure with help of Scaffold and Drawer widgets in other pages also.
Consider the About page Drawer instance. As we’ve clicked in the home page Drawer link, the About page opens us.
Moreover, the About or the Contact page can follow the same Material Design guidelines to add Drawer widgets.
Let’s consider the About page code.
import 'package:flutter/material.dart';
import '/drawer_example/drawer_contact.dart';
import '/drawer_example/drawer_example.dart';
class DrawerAbout extends StatelessWidget {
const DrawerAbout({Key? key}) : super(key: key);
static const routename = "/about";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('')),
body: const Center(
child: Text(
'About Us Page.',
style: TextStyle(fontSize: 50.0),
)),
drawer: Drawer(
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
const UserAccountsDrawerHeader(
accountName: Text("Sanjib Sinha"),
accountEmail: Text("sanjib@sanjibsinha.com"),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.orange,
child: Text(
"S",
style: TextStyle(fontSize: 40.0),
),
),
),
ListTile(
leading: const Icon(Icons.home),
title: const Text("Home"),
onTap: () {
Navigator.of(context).pushNamed(DrawerHome.routename);
},
),
ListTile(
leading: const Icon(Icons.contacts),
title: const Text("Contact Us"),
onTap: () {
Navigator.of(context).pushNamed(DrawerContact.routename);
},
),
],
),
),
);
}
}For full code please visit the respective GitHub repository.
As a result when we click the About Drawer, it opens up and displays different navigation links than home page.
To sum up, we wrap Drawer widget with Scaffold so that we can implement the structure that follows the Material Design guidelines.
Moreover, we can add Drawer items according to our needs so that user can navigate to other links.
Therefore, Drawer and Navigator widgets has relations between them. And the relation is a close one.
Leave a Reply