May 6, 2020

How to create a sidebar menu in Flutter?

By Mohit Agrawal

Welcome to this another flutter post. Today I will show you how to create a sidebar menu flutter with some basic animations. The widgets which I am going to use are row, column, stack, material, and flex. The final output will be like this.

sidebar poster
flutte sidebar menu
Flutter sidebar menu

Let’s create our sidebar menu

Create a new flutter project and name it sidebar menu. I prefer to use the android studio for developing flutter apps. If you are not aware of the flutter set up in the android studio then I highly recommend you go through this post first. Replace the code with this code block.

import 'package:flutter/material.dart';
import 'menu_dashboard.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Drawer',
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MenuDashBoard();
  }
}

In the above code block, you can see that I am using a reusable widget MenuDashBoard(). This is going to be our main widget. Create a new dart file and name it menu_dashboard.dart and copy this code.

  import 'package:flutter/material.dart';
  import 'circularImage.dart';


  class MenuDashBoard extends StatefulWidget {
  @override
  _MenuDashBoardState createState() => _MenuDashBoardState();
}

class _MenuDashBoardState extends State<MenuDashBoard> {

    bool isMenuClosed = true;
    double screenWidth;

    @override
    Widget build(BuildContext context) {
      
      Size size = MediaQuery.of(context).size;
      screenWidth = size.width;

      return Scaffold(
        backgroundColor: Colors.grey[850],
        body: Stack(
          children: <Widget>[
            menu(context),
            dashboard(context)
          ],
        ),
      );
    }

    Widget menu(context) {
      //In this widget we will code four tiles and circular image view.
    }

    Widget dashboard(context) {
      //In this widget we will code setting and menu button.
    }
}

Till here we have written basic code for the menu dashboard as well but it is not yet complete. Where are the tiles or menu buttons? So let’s complete now the menu and dashboard widget.

Our menu widget will have four tiles and one circular image view for the user’s profile image. Use this code block.

Widget menu(context) {
      return Padding(
        padding: EdgeInsets.fromLTRB(0, 0, screenWidth*0.15, 0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Flexible(
              flex: 4,
              child: Container(
                color: Colors.grey[850],
                child: Align(
                  alignment: Alignment.center,
                  child: circularImage(),
                ),
              ),
            ),
            Flexible(
              flex: 6,
              child: Container(
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: Column(
                      children: <Widget>[
                        Flexible(
                          child: Container(
                            decoration: new BoxDecoration(
                                color: Color.fromRGBO(218, 107, 107, 1),
                                borderRadius: new BorderRadius.only(
                                    topLeft: const Radius.circular(80.0))
                            ),
                            child: Align(
                              alignment: Alignment.center,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Icon(Icons.headset, color: Colors.white, size: 50,),
                                  Text('Listen', style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22
                                  ))
                                ],
                              ),
                            ),
                          ),
                        ),
                        Flexible(
                          child: Container(
                            color: Color.fromRGBO(211, 96, 96, 1),
                            child: Align(
                              alignment: Alignment.center,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Icon(Icons.satellite, color: Colors.white, size: 50,),
                                  Text('Browse', style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22
                                  ))
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  Flexible(
                    child: Column(
                      children: <Widget>[
                        Flexible(
                          child: Container(
                            decoration: new BoxDecoration(
                                color: Color.fromRGBO(211, 96, 96, 1),
                                borderRadius: new BorderRadius.only(
                                    topRight: const Radius.circular(80.0))
                            ),
                            child: Align(
                              alignment: Alignment.center,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Icon(Icons.assignment, color: Colors.white, size: 50,),
                                  Text('Assignment', style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22
                                  ))
                                ],
                              ),
                            ),
                          ),
                        ),
                        Flexible(
                          child: Container(
                            color: Color.fromRGBO(218, 107, 107, 1),
                            child: Align(
                              alignment: Alignment.center,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Icon(Icons.settings, color: Colors.white, size: 50,),
                                  Text('Settings', style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 22
                                  ))
                                ],
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
            )
          ],
        ),
      );
    }
Widget dashboard(context) {
      return AnimatedPositioned(
        //top: isMenuClosed? 0 : 100,
        //bottom: isMenuClosed? 0 : 100,
        top: 0,
        bottom: 0,
        left: isMenuClosed? 0 : screenWidth - screenWidth*0.15,
        right: isMenuClosed? 0 : -90,
        duration: Duration(milliseconds: 300),
        child: Material(
          elevation: 8,
          color: Colors.grey[850],
          child: Padding(
            padding: EdgeInsets.fromLTRB(10, 50, 10, 10),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    InkWell(child: Icon(Icons.menu, color: Colors.white, size: 40,),
                      onTap: () {
                        setState(() {
                          isMenuClosed = !isMenuClosed;
                        });
                      },
                    ),
                    Text("Welcome",
                        style: TextStyle(fontSize: 22, color: Colors.white)
                    ),
                    Icon(Icons.settings, color: Colors.white, size: 40,)
                  ],
                )
              ],
            ),
          ),
        ),
      );
    }

Now you have both menu and dashboard widget code. Let’s do the final touch by adding a circular image view widget. Create a new dart file and name circularImage.dart and copy this code.

import 'package:flutter/material.dart';

Widget circularImage() {
  return Container(
      width: 200.0,
      height: 200.0,
      decoration: new BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: Colors.teal, width: 10.0, style: BorderStyle.solid),
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage("images/profile.jpg")
          )
      ),
  );
}

So, let’s run our final code and see the outcome. If you are not getting the output then you can download the source code from the GitHub link.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!

My gaming PC build:
🔥 Graphics card: https://amzn.to/3hdZjzc
🔥 RAM: https://amzn.to/30zIh7I
🔥 Gaming motherboard: https://amzn.to/30ANEE1
🔥 Cabinet: https://amzn.to/32Dibn1
🔥 SSD: https://amzn.to/32D4VyK
🔥 AMD processor: https://amzn.to/2OKP8FW
🔥 PSU: https://amzn.to/32HRJJ0
🔥 Gaming RGB keyboard: https://amzn.to/2CnVVmF
🔥 Gaming RGB Mouse: https://amzn.to/3jna4Rv