Flutter drawer (dynamic ready side menu)

Overview

Flutter side menu (Drawer)

Getting Started

Use KFDrawer widget as Scaffold's body with items property (List<KFDrawerItem>)

you should define onPressed on KFDrawerItem

KFDrawer properties
  • controller (optional)
  • header
  • footer
  • items (optional if controller defined)
  • decoration

or set drawer items with controller (KFDrawerController)

define page property on KFDrawerItem

KFDrawerController properties
  • initialPage
  • items
Drawer page widget should extend KFDrawerContent widget
You can use ClassBuilder for string based class init

Example

class MainWidget extends StatefulWidget {
  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> {
  KFDrawerController _drawerController;

  @override
  void initState() {
    super.initState();
    _drawerController = KFDrawerController(
      initialPage: ClassBuilder.fromString('MainPage'),
      items: [
        KFDrawerItem.initWithPage(
          text: Text('MAIN', style: TextStyle(color: Colors.white)),
          icon: Icon(Icons.home, color: Colors.white),
          page: MainPage(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'CALENDAR',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.calendar_today, color: Colors.white),
          page: CalendarPage(),
        ),
        KFDrawerItem.initWithPage(
          text: Text(
            'SETTINGS',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(Icons.settings, color: Colors.white),
          page: ClassBuilder.fromString('SettingsPage'),
        ),
      ],
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: KFDrawer(
        controller: _drawerController,
        header: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            width: MediaQuery.of(context).size.width * 0.6,
            child: Image.asset(
              'assets/logo.png',
              alignment: Alignment.centerLeft,
            ),
          ),
        ),
        footer: KFDrawerItem(
          text: Text(
            'SIGN IN',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(
            Icons.input,
            color: Colors.white,
          ),
          onPressed: () {
            Navigator.of(context).push(CupertinoPageRoute(
              fullscreenDialog: true,
              builder: (BuildContext context) {
                return AuthPage();
              },
            ));
          },
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color.fromRGBO(255, 255, 255, 1.0), Color.fromRGBO(44, 72, 171, 1.0)],
            tileMode: TileMode.repeated,
          ),
        ),
      ),
    );
  }
}
Comments
  • Flutter upgrade Animation<BorderRadius?> with an exception

    Flutter upgrade Animation with an exception

    Hi! greetings! I found a issue when i updagrde flutter:

    kf_drawer-1.2.0/lib/kf_drawer.dart:169:10: Error: A value of type 'Animation<BorderRadius?>' can't be assigned to a variable of type 'Animation<BorderRadius>' because 'BorderRadius?' is nullable and 'BorderRadius' isn't.

    and my project no works, I appreciate your help, thanks!

    opened by odproductor 6
  • Any plans on migrating to Dart SDK 2.12.0 for

    Any plans on migrating to Dart SDK 2.12.0 for "null safety" ?

    I am using your package as a dependency, and need to ship this project by the end of this month. I came across this hurdle when I was migrating my project to null safety.

    opened by Shawn1912 0
  • KF_drawer With Bottom Navigation Bar

    KF_drawer With Bottom Navigation Bar

    Hello Developer Actually I was making app which contains both drawer and bottom navigation but I am not able to do that please add function to add both together.

    Some Code Demo

    import 'package:drawer/pages/mainpage.dart';
    import 'package:drawer/shared/drawer.dart';
    
    import 'package:flutter/material.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: 'Flutter Demo',
          theme: ThemeData(
           
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Plaza'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      
      int _currentIndex = 0;
     
     static  List _widgetOptions = [
        MainPage(), 
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            title: Text(widget.title , style: TextStyle(color: Colors.black54,fontSize: 26 , fontWeight: FontWeight.w600),),
          ),
          **body: Center(
            child: _widgetOptions.elementAt(_currentIndex),
          ),** // Here i can only add one thing that is a drawer or bottom navigation bar
          bottomNavigationBar: BottomNavigationBar(
            elevation: 2,
            onTap: onTabTapped,
            currentIndex: _currentIndex,
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.fastfood,
                  color: Colors.black,
                ),
                title: Text(
                  'Recipies',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.local_offer,
                  color: Colors.black,
                ),
                title: Text(
                  'Brands',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.restaurant_menu,
                  color: Colors.black,
                ),
                title: Text(
                  'Menu',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.person,
                  color: Colors.black,
                ),
                title: Text(
                  'Profile',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.shopping_basket,
                  color: Colors.black,
                ),
                title: Text(
                  'Cart',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        );
      }
    
       void onTabTapped(int index) {
        setState(() {
          _currentIndex = index;
        });
      }
    }
    
    
    opened by abhishekdana1999 0
  • NoSuchMethodError

    NoSuchMethodError

    flutter: #7      ComponentElement.mount 
    package:flutter/…/widgets/framework.dart:3902
    flutter: #8      Element.inflateWidget 
    package:flutter/…/widgets/framework.dart:3084
    flutter: #9      Element.updateChild 
    package:flutter/…/widgets/framework.dart:2887
    flutter: #10     ComponentElement.performRebuild 
    package:flutter/…/widgets/framework.dart:3935
    flutter: #11     Element.rebuild 
    package:flutter/…/widgets/framework.dart:3721
    flutter: #12     BuildOwner.buildScope 
    package:flutter/…/widgets/framework.dart:2340
    flutter: #13     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame 
    package:flutter/…/widgets/binding.dart:700
    flutter: #14     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback 
    package:flutter/…/rendering/binding.dart:285
    flutter: #15     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback 
    package:flutter/…/scheduler/binding.dart:1016
    flutter: #16     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame 
    package:flutter/…/scheduler/binding.dart:958
    flutter: #17     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame 
    package:flutter/…/scheduler/binding.dart:874
    flutter: #21     _invoke  (dart:ui/hooks.dart:236:10)
    flutter: #22     _drawFrame  (dart:ui/hooks.dart:194:3)
    flutter: (elided 3 frames from package dart:async)
    flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    opened by malibayram91 0
  • Centered menu List - Scrollable

    Centered menu List - Scrollable

    Please add centered list when menu is scrollable

    if (widget.scrollable) { return Column( children: [ Container( child: widget.header, ), Expanded( child: Center( child: ListView( shrinkWrap: true, children: widget.items, ), ), ), if (widget.footer != null) widget.footer!, ], ); }

    opened by Edu4rdoBG 0
  • KFDrawerItem onPressed prevents routing

    KFDrawerItem onPressed prevents routing

    Adding KFDrawerItem onPress function prevents page routing and onMenuPress. Is there a way to add an onPress handler to the KFDrawerItem while still maintaining the usual navigation?

    opened by franknmungai 0
  • adding other method in onPressed method

    adding other method in onPressed method

    normally the method "onPressed"just redirect to the "item.page"but don't give opportunity to make changes on "item.page" selected.That.s why a method called "click" is added inside the "item.onpressed" method.That method help to add other functionalities in "onPressed" method like adding variables or other event who can make changes on the "item.page"

    opened by cedos10 0
  • Issue while going back

    Issue while going back

    Hello,

    First thanks for the good job you have done.

    I have an issue with the routing, the issue is that no route is been pushed while navigating through the drawer item. If I landed @ home page then go to second page and pressed on back button it will navigate me back to '/' or to login page in my case.

    Is there is a way to keep a track for the route while navigating through the drawer?

    Thanks in advance.

    enhancement 
    opened by x8Haider 3
  • Modification of KFDrawerController.items during execution

    Modification of KFDrawerController.items during execution

    The possibility to change the KFDrawerController.items programmatically after first initialization/declaration.

    Examples:

    • disable or delete items
    • rename items
    • change icon
    opened by deezaster 0
Owner
null
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
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
Dynamic var - Dart dilinde dynamic ve var veri tiplerini anlamanızı kolaylaştıracak örnektir.

dynamic ve var arasındaki fark dynamic Tanımlanan değişkenin tipi daha sonra kod içerisinde değişebilir. Örneğin int olarak tanımlanan bir a değişkeni

Abdullah Sevmez 0 Jan 1, 2022
A Side Menu plugin for flutter and compatible with liquid ui for flutter

Liquid Shrink Side Menu A Side Menu plugin for flutter and compatible with liquid ui Side Menu Types There are 8 configuration of Liquid shrink side m

Raj Singh 18 Nov 24, 2022
An easy to use side menu in flutter and can used for navigations

Easy Sidemenu Easy sidemenu is An easy to use side menu (bar) for flutter that you can use for navigations in your application. Sidemenu is a menu tha

Mohammad Jamalianpour 86 Dec 29, 2022
Adds a side menu in all screens with debug information

Adds a side menu in all screens with debug information. You can decide which information to show and create new modules to include more information.

Sergi Martínez 27 Oct 7, 2022
This is a repository for Flutter Focused Menu, an easy to implement package for adding Focused Long Press Menu to Flutter Applications

Focused Menu This is an easy to implement package for adding Focused Long Press Menu to Flutter Applications Current Features Add Focused Menu to Any

Paras Jain 160 Dec 26, 2022
Arissettingsmenuexm - Settings Menu with different choices by clicking on a Popup Menu Button in Flutter

Flutter Tutorial - Settings Menu & AppBar Dropdown Menu Show a Flutter Settings

Behruz Hurramov 1 Jan 9, 2022
Flutter-pop-up-menu - Pop up Menu - Mobile Devices Programming

Pop Up Menu App A flutter demo app with a pop up menu button Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asillanes/) Technolo

Alexander Sosa 0 Jan 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
🚀A Flutter plugin to scanning. Ready for PDA

PDA Scanner A Flutter plugin ?? to scanning. Ready for PDA ?? github Installation Add this to your package's pubspec.yaml file: dependencies: pda_sca

Sword 51 Sep 29, 2022
Croco: Stylized widgets ready to plug into your Flutter Web project

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Diego Romero-Lovo 1 Jul 7, 2022
An instantly ready, full-featured alerts for development on any platform with flutter

An instantly ready, full-featured alerts for development on any platform with flutter. Enabling you to complete projects and deploy quickly. With QuickAlert, you can display animated alert dialogs such as success, error, warning, confirm, loading or even a custom dialog.

Belovance 16 Dec 18, 2022
A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready.

Package Rename A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready. Package Rename handles changing 30 fields

OutdatedGuy 3 Aug 24, 2022
null 1 Jan 8, 2022
A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready.

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready. Getting started Gallery Basic usage Featu

null 2 Mar 17, 2022
Kullanmaya hazir widget cozumleri -Ready to use widget solutions

Ready to use widgets ( ???? ) Projelerimde yararlı widget çözümleri kullanıyorum ve çoğu zaman orada kalıyor. Bunları hem ben hemde sizden gelenler il

Veli Bacik 117 Dec 27, 2022
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

Mohit Chauhan 8 Oct 3, 2022