Repo for MultiLevel Drawer Flutter Package

Related tags

Templates multilevel_drawer
Overview

MultiLevel Drawer

An easy to implement Multi Level Drawer for Flutter Applications. Just use this in place of regular Scaffold Drawer and you are ready to go.

Current Features

  • Add MultiLevel Drawer to Selected Items
  • Change Color of Main and Sub menu According to your Application Needs.

Demo

Usage

To Use, simply add MultiLevelDrawer to your Scaffold's drawer property:

      child: Scaffold(
        drawer: MultiLevelDrawer(
          backgroundColor: Colors.white,
          rippleColor: Colors.white,
          subMenuBackgroundColor: Colors.grey.shade100,
          header: Container(                  // Header for Drawer
            height: size.height * 0.25,
            child: Center(child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset("assets/dp_default.png",width: 100,height: 100,),
                SizedBox(height: 10,),
                Text("RetroPortal Studio")
              ],
            )),
          ),

          children: [           // Child Elements for Each Drawer Item
            MLMenuItem(
                leading: Icon(Icons.person),
                trailing: Icon(Icons.arrow_right),
                content: Text(
                  "My Profile",
                ),
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 3")),
                ],
                onClick: () {}),
            MLMenuItem(
                leading: Icon(Icons.settings),
                trailing: Icon(Icons.arrow_right),
                content: Text("Settings"),
                onClick: () {},
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2"))
                ]),
            MLMenuItem(
              leading: Icon(Icons.notifications),
              content: Text("Notifications"),
              onClick: () {},
            ),
            MLMenuItem(
                leading: Icon(Icons.payment),
                trailing: Icon(Icons.arrow_right),
                content: Text(
                  "Payments",
                ),
                subMenuItems: [
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 1")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 2")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 3")),
                  MLSubmenu(onClick: () {}, submenuContent: Text("Option 4")),
                ],
                onClick: () {}),
          ],
        ),
        appBar: AppBar(
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(color: Colors.black),
          title: Text(
            "Multi Level Menu",
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Container(
            decoration: BoxDecoration(
              gradient:
              LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [
                Color.fromRGBO(255, 65, 108, 1.0),
                Color.fromRGBO(255, 75, 43, 1.0),
              ]),
            ),
            child: Center()),
      ),

Important Classes:

MLMenuItem //For Each direct child item of Drawer
MLSubmenu  //For Adding Submenu to MLMenuItem

Roadmap

Plans to add more customizations.

License

MIT

Comments
  • when i adding more then 5 ML submenu it getting overflow error

    when i adding more then 5 ML submenu it getting overflow error

    opened by jamuflutterer 14
  • Navigator.pushNamed

    Navigator.pushNamed

    MLMenuItem( leading: Icon(Icons.arrow_forward_ios), content: Text("Usuário - Equipes & Locais"), onClick: () { // Ir para tela de cadastro de equipes Navigator.pushNamed(context, '/equipe'); },

    when calling a menu item the error below occurs

    E/flutter ( 5466): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: NoSuchMethodError: The getter 'focusScopeNode' was called on null. E/flutter ( 5466): Receiver: null E/flutter ( 5466): Tried calling: focusScopeNode E/flutter ( 5466): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5) E/flutter ( 5466): #1 Route.didPush. (package:flutter/src/widgets/navigator.dart:139:17) E/flutter ( 5466): #2 _rootRunUnary (dart:async/zone.dart:1134:38) E/flutter ( 5466): #3 _CustomZone.runUnary (dart:async/zone.dart:1031:19) E/flutter ( 5466): #4 _FutureListener.handleValue (dart:async/future_impl.dart:139:18) E/flutter ( 5466): #5 Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:680:45) E/flutter ( 5466): #6 Future._propagateToListeners (dart:async/future_impl.dart:709:32) E/flutter ( 5466): #7 Future._completeWithValue (dart:async/future_impl.dart:524:5) E/flutter ( 5466): #8 Future._asyncComplete. (dart:async/future_impl.dart:554:7) E/flutter ( 5466): #9 _rootRun (dart:async/zone.dart:1126:13) E/flutter ( 5466): #10 _CustomZone.run (dart:async/zone.dart:1023:19) E/flutter ( 5466): #11 _CustomZone.runGuarded (dart:async/zone.dart:925:7) E/flutter ( 5466): #12 _CustomZone.bindCallbackGuarded. (dart:async/zone.dart:965:23) E/flutter ( 5466): #13 _microtaskLoop (dart:async/schedule_microtask.dart:43:21) E/flutter ( 5466): #14 _startMicrotaskLoop (dart:async/schedule_microtask.dart:52:5)

    opened by vvagnersilva 1
  • On certain android phones, the last main menu option doesn't appear.

    On certain android phones, the last main menu option doesn't appear.

    On my older Android Phone, the "Lload store file data" appears as the last main menu choice. On my newer Android phone, the "Load Store File Data" option doesn't appear. I thought maybe there's a bug where the last main menu option doesn't appear. To test my hypothesis, I add another main menu option after the "load store file data" option. I made the selection text blank.

    As I predicted, the "load store data file" option appeared on the main menu selection.

    I had the same issue for another app I wrote.

    The phone details that have the issue:

    motorola one 5g ace Android version 10

    opened by aden-collector 1
  • Drawer not in sync

    Drawer not in sync

    image

    Kindly find attached link. The submenu that opens when clicking on a particular menu is showing a-bit lower than it's supposed to be like in the example of this package shown.

    opened by shabeenabarde 0
  • Update multilevel_drawer.dart

    Update multilevel_drawer.dart

    • Scroll on the sub-menu if it does not fit the screen
    • Leading and trailing for sub-menu items
    • RTL language support (for example Arabic)
    • Configurable hPadding and vPadding for the items (the old hard-coded values are default)
    • Gradient also for the sub-menu
    • Small correction for scroll in the menu
    opened by FRFGCCEVCV 0
  • Widget doesn't pop if clicking on the transparent part / outside the drawer

    Widget doesn't pop if clicking on the transparent part / outside the drawer

    In normal drawer widgets, we can pop the drawer when clicking outside of the widget where the transparent area is.

    But for this widget, we have to swipe it to close the drawer.

    It will be better to add this function so that it can be user friendly coz my testers when using for the first time are asking me how to dismiss the drawer.

    Or if there is already a current way i can do this?

    opened by shabeenabarde 1
  • In windows platforms MLMenuItem leading imposible to constrain.

    In windows platforms MLMenuItem leading imposible to constrain.

    I couldn't constraint the width of leading, content and trailing of the MLMenuItem. Tried all sort of approache. I was testing in a Windows plataform build.

    opened by linkel77 0
  • Use endDrawer have drawers open on right side of screen.

    Use endDrawer have drawers open on right side of screen.

    Thank-you for this widget. I am using the endDrawer option, so the drawer is on the right side of the screen. However, when it's tapped the multilevel opens on the left side with the slides opening to the right. I would like the drawer to open/stay on the right and the slide outs to open to the left. Thanks, Julian.

    opened by JulianSwales 0
Owner
Paras Jain
Mobile Application and Web Developer | @youtube Content Creator | Worship ReactJs | Flutter | Java | Dart | If anybody's gonna save us... it's us
Paras Jain
GitHub
A Flutter package with custom implementation of the Side Menu (Drawer)

Flutter Awesome Drawer Bar A Flutter package with custom implementation of the Side Menu (Drawer) Getting Started To start using this package, add awe

Appcheap 4 Nov 13, 2022
A side drawer using Flutter_advanced_drawer package

advanced_drawer A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Azamatjan 3 Feb 10, 2022
This repo provides a starter kit thats include Getx package.

Getx_Starter This repo provides a starter kit thats include Getx package. It includes key-value databases, sample pages, and components which they are

Okan 2 Apr 27, 2022
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 12 Dec 26, 2022
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 22 Jan 3, 2023
Best ever drawer in Flutter for Android and ISO.

Login & Register Screen in Flutter Best ever login and register screen in flutter to make precious application. This flutter app is made just to demon

Asad Malik 11 Aug 28, 2021
Flutter Split View and Drawer Navigation example

Flutter Split View and Drawer Navigation example This repo contains the source code for this tutorial: Responsive layouts in Flutter: Split View and D

Andrea Bizzotto 32 Nov 17, 2022
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Flutter drawer (dynamic ready side menu)

Flutter side menu (Drawer) Getting Started Use KFDrawer widget as Scaffold's body with items property (List<KFDrawerItem>) you should define onPressed

null 213 Dec 5, 2022
A flutter app with custom navigation drawer

Delivery Um Aplicativo de Delivey em Flutter Preview Getting Started This project is a starting point for a Flutter application. A few resources to ge

Pedro Massango 275 Dec 17, 2022
A customized Flutter Drawer

SideMenuDownSide This project is about a Customized Flutter Drawer Table of contents How it work Struture How to use Contribution How it work Structur

Tran Manh Quy 10 May 25, 2022
Android Debug Drawer for faster development

Android Debug Drawer Faster development with Debug Drawer Features DeviceModule - common information about your device BuildModule - app build informa

Mantas Palaima 1.2k Nov 21, 2022
Airplane ticket app with animated drawer

airplane_ticket_app Preview.mp4

Benjamin Mahmić 85 Dec 29, 2022
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Bryan Cancel 30 Dec 4, 2021
Aplicação para aula sobre Scaffold, Drawer e Navigator

scaffold_class A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started i

Deyvid J. Lira 7 Dec 27, 2022
This repo is a boilerplate to create flutter application easily. It is based on **GetX**.

flutter-app boilerplate This repo is a boilerplate to create flutter application easily. It is based on GetX. More info about GetX here. The app has b

NEWWAVE SOLUTIONS JSC 35 Dec 3, 2022
continue to my flutter journey here's the comeback repo , lets see what i will end up making

flutter_application_1 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Nerajan kc 3 May 19, 2021
This repo is for anything that can be reusable in flutter like custom widgets 🟥, animations 🌟and more

Ease This packa is for anything that can be reusable in flutter like custom widgets ?? , animations ?? and more. Features 1-custom text widget to ease

Abdelrahman Mostafa Elmarakby 91 Dec 3, 2022
A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity

Flutter Ready to Go A Flutter repo with a ready-to-go architecture containing flavors, bloc, device settings, json serialization and connectivity. Why

null 139 Nov 11, 2022