flutter inner drawer

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.7+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            
            colorTransitionChild: Color.red, // default Color.black54
            colorTransitionScaffold: Color.black54, // default Color.black54
            
            //When setting the vertical offset, be sure to use only top or bottom
            offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
            
            scale: IDOffset.horizontal( 0.8 ), // set the offset in both directions
            
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundDecoration: BoxDecoration(color: 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==InnerDrawerDirection.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

PropName	Description	default value
`scaffold`	A Scaffold is generally used but you are free to use other widgets	required
`leftChild`	Inner Widget	required if rightChild is not set
`rightChild`	Inner Widget	required if leftChild is not set
`leftOffset(deprecated)`	Offset drawer width	0.4
`rightOffset(deprecated)`	Offset drawer width	0.4
`leftScale(deprecated)`	Left scaffold scaling	1
`rightScale(deprecated)`	Right scaffold scaling	1
`offset`	Offset InnerDrawer width	IDOffset.horizontal(0.4)
`scale`	Scaffold scaling	IDOffset.horizontal(1)
`proportionalChildArea`	If true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen.	true
`borderRadius`	For scaffold border	0
`onTapClose`	Tap on the Scaffold closes it	false
`swipe`	activate or deactivate the swipe	true
`swipeChild`	activate or deactivate the swipeChild	false
`duration`	Animation Controller duration	Duration(milliseconds: 246)
`velocity`	Allows you to set the opening and closing velocity when using the open/close methods	1
`tapScaffoldEnabled`	Possibility to tap the scaffold even when open	false
`boxShadow`	BoxShadow of scaffold opened	[BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)]
`colorTransitionChild`	Change background color while swiping	Colors.black54
`colorTransitionScaffold`	Change background color while swiping	Colors.black54
`leftAnimationType`	static / linear / quadratic	static
`rightAnimationType`	static / linear / quadratic	static
`backgroundDecoration`	possibility to manage the main background Decoration	BoxDecoration(color: Theme.of(context).backgroundColor)
`innerDrawerCallback`	Optional callback that is called when a InnerDrawer is opened or closed
`onDragUpdate`	When a pointer that is in contact with the screen and moves to the right or left
`_innerDrawerKey.currentState.open`	Current State of GlobalKey(check example) – OPEN
`_innerDrawerKey.currentState.close`	Current State of GlobalKey(check example) – CLOSE
`_innerDrawerKey.currentState.toggle`	Current State of GlobalKey(check example) – OPEN or CLOSE