Navigation drawer
The navigation drawer is useful when you want to perform different page actions and events on different pages with the use of switching pages in the main drawer page.Create a project structure like this
You can create drawer in a different way like
- Add only the body section with a list of actions.
- Divide drawer into two sections: Header and body
- Divide drawer into three sections: header, body, and footer.
AppDrawer
In flutter, we code inside<project-package>/lib/
Create navigationDrawer.dart file inside lib/navigationDrawer folderclass navigationDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
createDrawerHeader(),
createDrawerBodyItem(
icon: Icons.home,text: 'Home'),
createDrawerBodyItem(
icon: Icons.account_circle,text: 'Profile'),
createDrawerBodyItem(
icon: Icons.event_note,text: 'Events'),
Divider(),
createDrawerBodyItem(
icon: Icons.notifications_active,text: 'Notifications'),
createDrawerBodyItem(
icon: Icons.contact_phone,text: 'Contact Info'),
ListTile(
title: Text('App version 1.0.0'),
onTap: () {},
),
],
),
);
}
}createDrawerHeader.dart
Widget createDrawerHeader() {
return DrawerHeader(
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage('images/bg_header.jpeg'))),
child: Stack(children: <Widget>[
Positioned(
bottom: 12.0,
left: 16.0,
child: Text("Welcome to Flutter",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w500))),
]));
}Add drawer Items
Create drawer body items in lib/widget folder with the name createDrawerBodyItem.dartWidget createDrawerBodyItem(
{IconData icon, String text, GestureTapCallback onTap}) {
return ListTile(
title: Row(
children: <Widget>[
Icon(icon),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Text(text),
)
],
),
onTap: onTap,
);
}When Should You Hire Dedicated Developers for Your Project
Read Moreclass pageRoutes {
static const String home = homePage.routeName;
static const String contact = contactPage.routeName;
static const String event = eventPage.routeName;
static const String profile = profilePage.routeName;
static const String notification = notificationPage.routeName;
}Adding Fragment Pages
Create fragment pages in lib/Fragments folder.homePage.dartclass homePage extends StatelessWidget {
static const String routeName = '/homePage';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Home"),
),
drawer: navigationDrawer(),
body: Center(child: Text("This is home page")));
}
}class contactPage extends StatelessWidget {
static const String routeName = '/contactPage';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Contacts"),
),
drawer: navigationDrawer(),
body: Center(child: Text("This is contacts page")));
}
}class eventPage extends StatelessWidget {
static const String routeName = '/eventPage';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Events"),
),
drawer: navigationDrawer(),
body: Center(child: Text("Hey! this is events list page")));
}
}class notificationPage extends StatelessWidget {
static const String routeName = '/notificationPage';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("Notifications"),
),
drawer: navigationDrawer(),
body: Center(child: Text("This is notification page")));
}
}class profilePage extends StatelessWidget {
static const String routeName = '/profilePage';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("My Profile"),
),
drawer: navigationDrawer(),
body: Center(child: Text("This is profile page")));
}
}class navigationDrawer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
createDrawerHeader(),
createDrawerBodyItem(
icon: Icons.home,
text: 'Home',
onTap: () =>
Navigator.pushReplacementNamed(context, pageRoutes.home),
),
createDrawerBodyItem(
icon: Icons.account_circle,
text: 'Profile',
onTap: () =>
Navigator.pushReplacementNamed(context, pageRoutes.profile),
),
createDrawerBodyItem(
icon: Icons.event_note,
text: 'Events',
onTap: () =>
Navigator.pushReplacementNamed(context, pageRoutes.event),
),
Divider(),
createDrawerBodyItem(
icon: Icons.notifications_active,
text: 'Notifications',
onTap: () =>
Navigator.pushReplacementNamed(context, pageRoutes.notification),
),
createDrawerBodyItem(
icon: Icons.contact_phone,
text: 'Contact Info',
onTap: () =>
Navigator.pushReplacementNamed(context, pageRoutes.contact),
),
ListTile(
title: Text('App version 1.0.0'),
onTap: () {},
),
],
),
);
}
}void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'NavigationDrawer Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: homePage(),
routes: {
pageRoutes.home: (context) => homePage(),
pageRoutes.contact: (context) => contactPage(),
pageRoutes.event: (context) => eventPage(),
pageRoutes.profile: (context) => profilePage(),
pageRoutes.notification: (context) => notificationPage(),
},
);
}
}Result
Run the application and you will see the result like this· · · ·Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.
