close

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

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

  1. How to Create SideBar Menu In Flutter

    to Create SideBar Menu In Flutter
    First of all Import material.dart package in your app’s main.dart file.
    Create Stateless widget and Define in runApp.
    Create new StateLess Widget named MyApp And Define Home like below.
    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.
    To make SideBar Drawer Flutter Has its own widget, named Drawer it self. So We are Return Drawer in This SideDrawer class.

  2. Create SideBar Menu In Flutter

    to Create SideBar Menu In Flutter
    First of all Import material.dart package in your app’s main.dart file.
    Create Stateless widget and Define in runApp.
    Create new StateLess Widget named MyApp And Define Home like below.
    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.
    To make SideBar Drawer Flutter Has its own widget, named Drawer it self. So We are Return Drawer in This SideDrawer class.

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

Leave a Comment