How To Create Navigation Drawer In Flutter: Navigation Drawer is a very essential user interface (UI) of any mobile application. The app consists of the main navigation menu from which the app’s features can be surfed. It appears when the user taps on the drawer icon or slides the screen from the left edge to right.
Create Navigation Drawer In Flutter
In the tutorial, we are going to create a navigation bar using flutter. As compared to native Android or iOS apps, we will have to write very minimal code and all the heavy lifting regarding it will be done by our flutter framework.
At first, Let’s create a new flutter project in Android Studio by navigating to File => New => New Flutter Project.
Once the project is created. We will have default flutter code in the main.dart file. We will remove all the default generated code and write everything from scratch.
I have divided this blog post into just two easy steps for better understanding:
- Drawer Class
- Create a list of items (navigation menu) by using ListView widget
1. Drawer Class
Drawer Class in flutter is a material design panel that slides horizontally from the left edge. This class is used with Scaffold.drawer property and the child of the drawer is generally a listview widget.
2. Create a list of items (menu items) by using ListView widget
Now we will create a list of items inside the Drawer class that will be used as navigation drawer items as:
ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Coding Ninja'),
accountEmail: Text('ninja@codingninja.info'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.deepPurple,
child: Text("C")),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Home");
},
),
ListTile(
leading: Icon(Icons.local_laundry_service),
title: Text('Services'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Services");
},
),
Divider(
color: Colors.black87,
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Settings");
},
),
ListTile(
leading: Icon(Icons.report_problem),
title: Text('Report Problem'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Report Problem");
},
),
],
)
We have already read in our previous articles of creating listview as static and long dynamic lists. The only thing new here is the UserAccountsDrawerHeader Section.
UserAccountsDrawerHeader(
accountName: Text('Coding Ninja'),
accountEmail: Text('ninja@codingninja.info'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.deepPurple,
child: Text("C")),
),
This property is provided by the Drawer Class. It will create the User info section or head section of the navigation drawer with the user avatar/image.
At last, our main.dart file will have the following code:
main.dart
import 'package:flutter/material.dart';
void main() => runApp(NavigationDrawerDemo());
class NavigationDrawerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Navigation Drawer Demo",
//Hide Debug Mode Banner
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text('Navigation Drawer Demo')),
drawer: Builder(
builder: (BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Coding Ninja'),
accountEmail: Text('ninja@codingninja.info'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.deepPurple,
child: Text("C")),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Home");
},
),
ListTile(
leading: Icon(Icons.local_laundry_service),
title: Text('Services'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Services");
},
),
Divider(
color: Colors.black87,
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Settings");
},
),
ListTile(
leading: Icon(Icons.report_problem),
title: Text('Report Problem'),
onTap: () {
//add routes to navigate
showSnackBar(context, "Report Problem");
},
),
],
),
);
},
),
),
);
}
}
//Show SnackBar
void showSnackBar(BuildContext context, title) {
//Hide navigation drawer while showing SnackBar
Navigator.of(context).pop();
//Show SnackBar
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('$title is Clicked!'),
backgroundColor: Colors.black87,
),
);
}