How to Create SideBar Menu In Flutter - fluttercorner.com

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.

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. Here Is How to Create SideBar Menu In Flutter