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.

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")
        ],
      ),
    );
  }
}

Create Navigation Item

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

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),

        );

      },
    );
  }
}

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"),
      ),
    );
  }
}

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"),
      ),
    );
  }
}

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,),
        ],
      ),

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,),
                    ],
            ),
       ),
    );
  }
}

Here the output of Flutter Navigation Drawer.

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