Introduction:
You might have noticed that a lot of android applications introduced a sliding panel menu to navigate between major modules of the application. In flutter, you can use the drawer widget to attain the navigation drawer with sliding menus. Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the app bar.
In this post, We are going to design and implement a navigation drawer using a drawer widget in a flutter to learn more about it you can view the below .
Demo:
The final result of the app
Prerequisites
This tutorial assumes a little knowledge of Flutter and its widget usages.
Visual Studio Code editor / Android studio installed on your machine if you haven’t yet. We’ll use it in our tutorial.
Project Setup:
Create a new flutter project with the name flutter_navigation_drawer. We are going to take an example from Gmail App for the navigation drawer.
Using Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative.
In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:
- Create a Scaffold.
- Add a drawer.
- Populate the drawer with items + close it.
1. Create a Scaffold
To add a drawer you need to wrap it in a Scaffold widget. you can view it in below example:
Scaffold(
drawer: // Add a Drawer here in the next step.
);
2. Add a drawer
Scaffold(
drawer: Drawer(
child: // Populate the Drawer in the next step.
)
);
3. Update your main.dart
import 'package:flutter/material.dart';
import 'maindrawer.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.black
),
title: Text("Gmail",style: TextStyle(color: Colors.red,fontSize: 22.0),),
backgroundColor: Colors.white,
),
//Now we are going to open a new file
// where we will create the layout of the Drawer
drawer: Drawer(
child: MainDrawer(),
),
);
}
}
crossAxisAlignment: CrossAxisAlignment.stretch,Add the list view by using the ListTile widget that will include the options like inbox.mail,snoozed etc and we are going to use the icon to add the icon and text to the list view as below
children: [
Text(
"Gmail",
style:TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.w500,
color: Colors.red[300],
),
//textAlign: TextAlign.left,
),
],
ListTile(The Complete Code to populate the drawer with data . Add this code to the maindrawer.dart
onTap: (){},//add code to set state on click of the items
leading: Icon(
Icons.inbox, // add the icons to the ListTile
color: Colors.black,
),
trailing: Text( // trailling is addded to last part of the listview
"99+"
),
title:Text(
"Inbox"
),
import 'package:flutter/material.dart';
class MainDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
child: Padding(
padding: EdgeInsets.only(top:50.0,left: 20.0),
child: Column(
//mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
"Gmail",
style:TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.w500,
color: Colors.red[300],
),
//textAlign: TextAlign.left,
),
],
),
),
),
SizedBox(
height: 20.0,
),
ListTile(
onTap: (){},
leading: Icon(
Icons.inbox,
color: Colors.black,
),
trailing: Text(
"99+"
),
title:Text(
"Inbox"
),
),
ListTile(
onTap: (){},
leading: Icon(
Icons.star_border,
color: Colors.black,
),
title:Text(
"Starred"
),
),
ListTile(
onTap: (){},
leading: Icon(
Icons.snooze,
color: Colors.black,
),
title:Text(
"Snoozed"
),
),ListTile(
onTap: (){},
leading: Icon(
Icons.label_important,
color: Colors.black,
),
title:Text(
"Important"
),
),ListTile(
onTap: (){},
leading: Icon(
Icons.inbox,
color: Colors.black,
),
title:Text(
"draft"
),
),ListTile(
onTap: (){},
leading: Icon(
Icons.inbox,
color: Colors.black,
),
title:Text(
"sent"
),
)
],
);
}
}
Conclusion: