flutter_inner_drawer

pub package Awesome Flutter Donate

Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_inner_drawer: "^0.5.2"

Demo

Simple usage

import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransition: Color.red, // default Color.black54
            innerDrawerCallback: (a) => print(a ),// return bool
            leftOffset: 0.6, // default 0.4
            rightOffset: 0.6,// default 0.4            
            leftScale: 0.9,// default 1
            rightScale: 0.9,// default 1
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundColor: Colors.red, // default  Theme.of(context).backgroundColor
            
            //when a pointer that is in contact with the screen and moves to the right or left            
            onDragUpdate: (double val, InnerDrawerDirection direction) {
                // return values between 1 and 0
                print(val);
                // check if the swipe is to the right or to the left
                print(direction==InnerDraweDirection.start);
            },
            
            innerDrawerCallback: (a) => print(a), // return  true (open) or false (close)
            leftChild: Container(), // required if rightChild is not set
            rightChild: Container(), // required if leftChild is not set
            
            //  A Scaffold is generally used but you are free to use other widgets
            // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                ),
            ) 
            OR
            CupertinoPageScaffold(                
                navigationBar: CupertinoNavigationBar(
                    automaticallyImplyLeading: false
                ),
            ), 
        )
    }
    
    //  Current State of InnerDrawerState
    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();    

    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used
       //InnerDrawerDirection.start OR InnerDrawerDirection.end                        
        direction: InnerDrawerDirection.end 
       );
    }
    
    

InnerDrawer Parameters

PropNameDescriptiondefault value
scaffoldA Scaffold is generally used but you are free to use other widgetsrequired
leftChildInner Widgetrequired if rightChild is not set
rightChildInner Widgetrequired if leftChild is not set
leftOffsetOffset drawer width0.4
rightOffsetOffset drawer width0.4
leftScaleLeft scaffold scaling1
rightScaleRight scaffold scaling1
proportionalChildAreaIf true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen.true
borderRadiusFor scaffold border0
onTapCloseTap on the Scaffold closes itfalse
swipeactivate or deactivate the swipetrue
tapScaffoldEnabledPossibility to tap the scaffold even when openfalse
boxShadowBoxShadow of scaffold openedBoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)
colorTransitionChange background color while swipingColors.black54
leftAnimationTypestatic / linear / quadraticstatic
rightAnimationTypestatic / linear / quadraticstatic
backgroundColorcolor of the main backgroundTheme.of(context).backgroundColor
innerDrawerCallbackOptional callback that is called when a InnerDrawer is opened or closed
onDragUpdateWhen a pointer that is in contact with the screen and moves to the right or left
_innerDrawerKey.currentState.openCurrent State of GlobalKey(check example) - OPEN
_innerDrawerKey.currentState.closeCurrent State of GlobalKey(check example) - CLOSE
_innerDrawerKey.currentState.toggleCurrent State of GlobalKey(check example) - OPEN or CLOSE

If you found this project helpful or you learned something from the source code and want to thank me:

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

Libraries

inner_drawer