Flutter Navigation Drawer

Navigation is very important for every app. There are many types of navigation available. Such as Bottom Navigation Bar, Tab bar, Navigation bar, etc. The navigation drawer concept came under the native android applications. Basically, the navigation drawer is an invisible side screen. When some event occurs, the screen will be shown.

In this tutorial, will help you create the same in a flutter application.

Create a Project

First, create a empty project by using IDE or flutter create commend.

Create Navigation Header (Optional)

The navigation header is optional one. if you need this navigation header follow the step otherwise skip this step.

Under the lib folder create navigation_header.dart file. The NavHeader widget look like this.

Flutter Navigation Header

navigation_header.dart

import 'package:flutter/material.dart'; class NavHeader extends StatelessWidget { const NavHeader({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( height: 200, child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( height : 100, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(50.0)) ), child: Image.network("https://www.codewithflutter.com/wp-content/uploads/2021/05/flutter-in-tamil-01.png"), ), Text("Code With Flutter") ], ), ); } }
Code language: JavaScript (javascript)

Create Navigation Item

Next, Under lib folder create a navigation_item.dart file. The NavItem widget look like this.

Flutter Navigation Item

navigation_item.dart

import 'package:flutter/material.dart'; class NavItem extends StatelessWidget { const NavItem({Key key, this.title, this.icon,this.widget}) : super(key: key); final String title; final IconData icon; final Widget widget; @override Widget build(BuildContext context) { return ListTile( leading: Icon(this.icon), title: Text(this.title), onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => this.widget), ); }, ); } }
Code language: JavaScript (javascript)

Create Screen

Then, create a screens. depending upon your need. An empty sample screen code look like this,

my_course.dart

import 'package:flutter/material.dart'; class Course extends StatelessWidget { const Course({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Interest"), ), body: Center( child: Text("This is a My Course Page"), ), ); } }
Code language: JavaScript (javascript)
interest.dart
import 'package:flutter/material.dart'; class Interest extends StatelessWidget { const Interest({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Interest"), ), body: Center( child: Text("This is a Interest Page"), ), ); } }
Code language: JavaScript (javascript)

Create Drawer widget

Now, we created all components of Navigation Drawer. Under Home screen scaffold widget create a Drawer Widget.

drawer: Drawer(),

Under Drawer widget create ListView widget as child widget.In ListView widget add Navigation header and Navigation item as per your requirement. The ListView widget look like this,

ListView( children: [ NavHeader(), Divider(), NavItem(title: "Interest",icon: Icons.list_alt_outlined,widget: Interest(),), NavItem(title: "My Courses",icon: Icons.video_settings_outlined,widget: Course(),), NavItem(title: "Todo/Done",icon: Icons.timeline_outlined,), NavItem(title: "Offline Articles",icon: Icons.save_alt_outlined,), NavItem(title: "Rate us",icon: Icons.star_rate,), NavItem(title: "Support",icon: Icons.support_agent_outlined,), NavItem(title: "Settings",icon: Icons.settings,), NavItem(title: "Log out",icon: Icons.logout,), ], ),
Code language: JavaScript (javascript)

The main.dart look like this,

main.dart

import 'package:flutter/material.dart'; import 'package:navigation/screens/interest.dart'; import 'package:navigation/screens/my_course.dart'; import 'navigation_header.dart'; import 'navigation_item.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Home(), ); } } class Home extends StatelessWidget { const Home({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Navigation Drawer"), ), drawer:Drawer( child: ListView( children: [ NavHeader(), Divider(), NavItem(title: "Interest",icon: Icons.list_alt_outlined,widget: Interest(),), NavItem(title: "My Courses",icon: Icons.video_settings_outlined,widget: Course(),), NavItem(title: "Todo/Done",icon: Icons.timeline_outlined,), NavItem(title: "Offline Articles",icon: Icons.save_alt_outlined,), NavItem(title: "Rate us",icon: Icons.star_rate,), NavItem(title: "Support",icon: Icons.support_agent_outlined,), NavItem(title: "Settings",icon: Icons.settings,), NavItem(title: "Log out",icon: Icons.logout,), ], ), ), ); } }
Code language: JavaScript (javascript)

Here the output of Flutter Navigation Drawer.

Flutter Navigation Drawer

Click here to download the source code of this project. Thank you.