How to Create SideBar Menu In Flutter

Hello Guys How are you all ? Hope you all are fine. Today We are going to learn How to create sidebar menu in flutter app?

In this tutorial I’ll show how to easily create a side menu in flutter in very easy way. So lets start this Tutorial without wasting your time.

How to Create SideBar Menu In Flutter

• First of all Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

• Create Stateless widget and Define in runApp.

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

• Create new StateLess Widget named MyApp And Define Home like below.

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

• After That create MyhomePage Stateless Widget.
• Then we would make Scaffold widget. and define appBar, drawer and body in your Scaffold. Like Below. And Define new StatelessWidget in drawer Exact like Below.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: SideDrawer(),
      appBar: AppBar(
        title: Text('SideBar menu - FlutterCorner'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Text('Side Menu Tutorial'),
      ),
    );
  }
}

• Then After, make another Class named SideDrawer stateless widget.

class SideDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  }
}

• To make SideBar Drawer Flutter Has its own widget, named Drawer it self. So We are Return Drawer in This SideDrawer class.
• Drawer returns a special widget, Drawer which contains a ListView. This ListView contains all the links that you want the user to navigate around.

class SideDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            child: Center(
              child: Text(
                'Side menu  FlutterCorner',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.black,
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () => {},
          ),
          ListTile(
            leading: Icon(Icons.shopping_cart),
            title: Text('Cart'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text('Feedback'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.exit_to_app),
            title: Text('Logout'),
            onTap: () => {Navigator.of(context).pop()},
          ),
        ],
      ),
    );
  }
}

• Here is first widget is a DrawerHeader in which we have a title text and a background image. This is totally optional. If you don’t want this header, simply remove this from the list.

• Here In Every ListTile we are used onTap: () => {Navigator.of(context).pop()}, This Means Nothing But It Will Dissmiss This Drawer.

Here I am Providing Full Source code Here for batter understanding.

import 'package:flutter/material.dart';

void main() => runApp(
      MyApp(),
    );

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: SideDrawer(),
      appBar: AppBar(
        title: Text('SideBar menu - FlutterCorner'),
        backgroundColor: Colors.black,
      ),
      body: Center(
        child: Text('Side Menu Tutorial'),
      ),
    );
  }
}

class SideDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            child: Center(
              child: Text(
                'Side menu  FlutterCorner',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.black,
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () => {},
          ),
          ListTile(
            leading: Icon(Icons.shopping_cart),
            title: Text('Cart'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text('Feedback'),
            onTap: () => {Navigator.of(context).pop()},
          ),
          ListTile(
            leading: Icon(Icons.exit_to_app),
            title: Text('Logout'),
            onTap: () => {Navigator.of(context).pop()},
          ),
        ],
      ),
    );
  }
}

Faq

Summery

So, It’s All About This tutorial. I hope this tutorial helps you lot. Please Comment Below if You stucks anywhere with my code. Thank You.

Also Check Out Below Tutorials

• How To stretch an image to fit the whole background 100% height x 100% width in Flutter?
• How to Use ElevatedButton Widget Flutter
• Also Read How to Create a rounded button / button with border-radius in Flutter
• How to Create Elevated Button with Icon and Text in Flutter
• How to Manage Space Between Column’s Children In Flutter?