Navigation Drawer (Sidebar) Using Flutter

Hello guys,

Today we are going to learn how to implement navigation drawer or side bar using Flutter. In this article we are implementing basic side bar, in upcoming articles we are going to learn material sidebar. So let’s get started.

First, create new flutter project and then create main class SideBar and call inside main method. The code is given below.

import 'package:flutter/material.dart';

void main() => runApp(SideBar());

class SideBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Now, we can see in home we are calling object of HomePage class. Now We have to create custom row for drawer which is as below.

class CustomTitle extends StatelessWidget{

  IconData icon;
  String title;
  Function onTap;

  CustomTitle(this.icon,this.title,this.onTap);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        decoration: BoxDecoration(
          border: Border(bottom: BorderSide(
            color: Colors.grey.shade400
          ))
        ),
        child: InkWell(
          splashColor: Colors.orangeAccent,
          onTap: onTap,
          child: Container(
            height: 35.0,
            child: Row(
              children: <Widget>[
                Icon(icon),
                SizedBox(width: 20),
                Padding(
                  padding: const EdgeInsets.all(5.0),
                  child: Text(title,style: TextStyle(
                    fontSize: 17.0
                  ),),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

In this we are constructor which takes icon, title and onTap() function that perform action when drawer item is clicked. Inside override build method we are using Container that uses BoxDecoration which create box outlined the item. Here we are using InkWell which is class that respond to touch. For more information about InkWell visit official  site. Inside InkWell, we are using splashColor that is the color which is reflected when tap on drawer item.

Now in body we are calling object of _MainScreen which is as below.

class _MainScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Welcome'),
    );
  }
}

Now create the class HomePage as below.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SideBar'),
        backgroundColor: Colors.deepOrange,
      ),
      body: _MainScreen(),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                    Colors.deepOrange,
                    Colors.orangeAccent
                  ]
                )
              ),
              child: Container(
                child: Column(
                  children: <Widget>[
                    Material(
                      borderRadius: BorderRadius.all(Radius.circular(40.0)),
                      elevation: 10,
                      child: Padding(padding: EdgeInsets.all(8.0),
                      child: Image.asset('assets/flutter-logo.png',width: 80,height: 80,),)
                    ),
                    Padding(padding: EdgeInsets.all(5.0),
                    child: Text('Flutter',style: TextStyle(
                        fontSize: 25,
                        color: Colors.white
                    ),),)
                  ],
                ),
              )
            ),
            CustomTitle(Icons.person,'Profile',()=>{}),
            CustomTitle(Icons.notifications,'Notifiction',()=>{}),
            CustomTitle(Icons.settings,'Settings',()=>{}),
            CustomTitle(Icons.lock,"Logout",()=>{}),
          ],
        ),
      ),
    );
  }
}

Here, DrawerHeader() is used to create header in navigationbar, and give gradient effect using LinearGradient().

For image in DrawerHeader() we have to create assest folder in the root and then put image inside assets folder and in pubspec.yaml put code as below.

flutter:

  uses-material-design: true

  assets:
    - assets/flutter-logo.png

Now click on Pub get on upper left corner and then use it inside Image.asset() to add image inside drawer header. Now it is done.

You can also find the video tutorial here.

Happy Flutter