Navigation Drawer is a very essential user interface (UI) of any mobile application. It consists of main navigation menu from which app’s features can be surfed. It appears when the user tap on the drawer icon or slide the screen from left edge to right.
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 in just two easy steps for better understanding as:
- 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 in 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 a 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 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,
),
);
}
