dn-a/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.

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: "^1.0.0+1"

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

Donate

It takes time to carry on this project. If you found it useful or learned something from the source code please consider the idea of donating 5, 20, 50 € or whatever you can to support the project.

• 

Issues

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

flutter_inner_drawer's Issues

Navigation.

Can i get the basic example of navigation between screens.

tapScaffoldEnabled: false, rebuilds whole page.

I am using InnerDrawer with PageView. But I have observed two things -

1. tapScaffoldEnabled: false, every slightest gesture to open close drawer rebuilds the page
2. tapScaffoldEnabled: true, no rebuild. Works as aspected

return Material(
      child: InnerDrawer(
        key: _innerDrawerKey,
        tapScaffoldEnabled: false, //ISSUE HERE WHOLE PAGE GETS REBUILD
        onTapClose: true, // default false
        swipe: true, // default true
        colorTransitionChild: Colors.transparent,
        scale: IDOffset.horizontal(0.8), // set the offset in both directions
        proportionalChildArea: true, // default true
        borderRadius: 20, // default 0
        boxShadow: [BoxShadow(color: Colors.transparent, blurRadius: 0)],
        rightAnimationType: InnerDrawerAnimation.quadratic,
        backgroundDecoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Colors.green,
              Colors.blue
            ],
          ),
        ), // default  Theme.of(context).backgroundColor
        rightChild: appRightMenu(), // required if leftChild is not set
        scaffold: Scaffold(
          body: PageView(
            physics: NeverScrollableScrollPhysics(),
            controller: _pageController,
            onPageChanged: onPageChanged,
            children: <Widget>[
              PageOne(),
              PageTwo(),
              PageThree(),
              PageFour(),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
                  // showUnselectedLabels: false,
                  backgroundColor: ConfigSettings.baseColor,
                  unselectedItemColor: Colors.white54,
                  items: <BottomNavigationBarItem>[
                    BottomNavigationBarItem(
                      icon: Icon(CustomIcons.home, size: 20),
                      title: Text(translate("START"),
                          style: TextStyle(fontSize: 12)),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(CustomIcons.realtime, size: 20),
                      title: Text(translate("REALTIME_TRACKING"),
                          style: TextStyle(fontSize: 12)),
                    ),
                    BottomNavigationBarItem(
                      icon: Icon(CustomIcons.triplog, size: 22),
                      title: Text(translate("TRIPLOG"),
                          style: TextStyle(fontSize: 12)),
                    ),
                    BottomNavigationBarItem(
                      icon: const Icon(CustomIcons.units, size: 22),
                      title: Text(translate("CHOOSE_UNIT"),
                          style: TextStyle(fontSize: 12)),
                    ),
                    BottomNavigationBarItem(
                      icon: const Icon(CustomIcons.menu, size: 22),
                      title: Text(translate("MENU"),
                          style: TextStyle(fontSize: 12)),
                    ),
                  ],
                  type: BottomNavigationBarType.fixed,
                  currentIndex: _page,
                  iconSize: 24,
                  selectedItemColor: Colors.white38,
                  /*showSelectedLabels: false,  
            showUnselectedLabels: false,*/
                  onTap: navigationTapped,
                ),
        ),
      ),
    )

Inner drawer with sliver

Please help me to deal with this issue. When I use inner drawer with sliverlist - error happens

Code:

import 'package:flutter_inner_drawer/inner_drawer.dart';

class WhiteLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      leftChild: Container(),
      rightChild: Container(),
      scaffold: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: Text('Available seats'),
              ),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.add_circle),
                  tooltip: 'Add new entry',
                  onPressed: () {},
                ),
              ],
            ),
            SliverToBoxAdapter(
              child: SizedBox(
                height: 600,
                child: Center(
                  child: Text('Main content here'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ERROR:
`Performing hot restart...
Syncing files to device Custom Phone preview...
Restarted application in 2,062ms.
I/flutter ( 2154): ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2154): The following assertion was thrown during a scheduler callback:
I/flutter ( 2154): RenderBox was not laid out: RenderDecoratedBox#e8f57 NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 2154): 'package:flutter/src/rendering/box.dart':
I/flutter ( 2154): Failed assertion: line 1694 pos 12: 'hasSize'
I/flutter ( 2154):
I/flutter ( 2154): When the exception was thrown, this was the stack:
I/flutter ( 2154): #2 RenderBox.size (package:flutter/src/rendering/box.dart:1694:12)
I/flutter ( 2154): #3 InnerDrawerState._updateWidth. (package:flutter_inner_drawer/inner_drawer.dart:285:30)
I/flutter ( 2154): #4 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
I/flutter ( 2154): #5 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1060:9)
I/flutter ( 2154): #6 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:861:7)
I/flutter ( 2154): (elided 13 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
I/flutter ( 2154): ════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
The following assertion was thrown during a scheduler callback:
RenderBox was not laid out: RenderDecoratedBox#e8f57 NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

When the exception was thrown, this was the stack:
#2 RenderBox.size (package:flutter/src/rendering/box.dart:1694:12)
#3 InnerDrawerState._updateWidth. (package:flutter_inner_drawer/inner_drawer.dart:285:30)
#4 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1113:15)
#5 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1060:9)
#6 SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:861:7)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderDecoratedBox#e8f57 NEEDS-LAYOUT NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
════════════════════════════════════════════════════════════════════════════════════════════════════
`

Can not Focus TexField

Hello !

I have a probleme, i can't focus a TextField after used Navigator.push()

I have an example :

https://www.youtube.com/watch?v=ppQUZIc8e7s&feature=youtu.be

InnerDrawer(
   scaffold: Stack(
        children: <Widget>[
          TabBarView(
            physics: NeverScrollableScrollPhysics(),
            controller: _pageController,
            children: <Widget>[
              MainKomitScreen(),
              MainSearchScreen(), // TEXTFIELD INSIDE THIS WIDGET
              MainInboxScreen(),
            ]
          ),
    ),
)

if you have an idea why 😇

Add drawerEdgeDragWidth

Is it possible to add new property, that specifies the width of the area within which a horizontal swipe will open the drawer (like drawerEdgeDragWidth in default scaffold Drawer).

tapScaffoldEnabled -> _invisibleCover() dar

While the parameter tapScaffoldEnabled works as intended, it would be great to gain access over the darkening of the main scaffold.
Eg. for tapScaffoldEnabled = true it is turned off, for false it is turned on by default.

Additional shameless Feature Request

An additional cherry on top would be the possibility to add a clipper for a ClipPath above the Container of _invisibleCover(), so certain elements can be excluded from the darkening.

Two Page Example

Hi @Dn-a due to Page(Scaffold) is an children of InnerDrawer how can we implement on two or more pages (Navigation Example)

    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            position: InnerDrawerPosition.start, // required
            onTapClose: true, 
            ...
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                )
            )
        )
    }

Default flutter drawer

return Scaffold(
  appBar: AppBar(
    title: Text("Drawer app"),
  ),
  drawer: Drawer(),
)

Left offset to show menu

Hi,

There is any way to show little part of left menu?

Like mine:
<----

I need show 20px of menu and after swipe --->> it show all.

Thanks.

can't using left/right gesture

when i set offset:IDOffset.horizontal(1),
i can't use gesture to swipe back
can you help me
thanks

Want swipe to close, but not to open

I love the effect when the menu is open to swipe to close, but I don't want my menu to open up when swiping from the side of scaffold. My interface already has a swipable tabview and pageview, so that doesn't work together, but I still want to close it with the swipe.. I tried to find a way, but couldn't figure it out unless I fork and mod, but didn't want to do that if I don't have to. Any suggestions? Otherwise this is a feature request.

Another side question I had, is there a way to shade a color overlay on the scaffold content? Thought it'd look cooler with the transition animation to darken the content as it moves to the side.
Thanks, loving this drawer compared to all the other one's I've tried to use.. Much appreciated.

innerDrawerCallback fired multiple times

First of all, thanks for creating this amazing widget!

I guess this is not really a bug, it's simply the way you implemented the innerDrawerCallback. When using a swipe gesture to open/close the drawer, I receive multiple callbacks (false, false, true when opening and true, true, false when closing).

My issue is, that I only want one callback when the drawer is closed, so that I can safely perform one single update on the main screen.

Any chance you could change this or give me a hint on how I could implement this? Thank You.

Want to only swipe left or right child，not scafford，like scafford default drawer

Swipe and AppBar Actions doesnt work well.

When i use Swipe property i can tap all my icon button widget. exists some space or with near to the device side that cause the problem.

I cant touch all this area...

Opening drawer by tabbing menu button

Is there a way to open this drawer by tabbing hamburger menu icon (among appbar title) instead of swiping?

How do I swipe across the middle of the screen to open or close the sidebar

How do I swipe across the middle of the screen to open or close the sidebar

swipe to open is too sensitive

Hi, I think it has not such a feature yet that allows to set a swipe distance to initiate the drag movement.
I found it's too sensitive and the page would move horizontally inevitably even though I want to scroll down.

if there is such a feature like distance to start dragging , the above issue would be solved. Or more ideally, only swipe from (left or right) edge that trigger the drag.

thanks.

Toogle drawer via _innerDrawerKey.currentState.toggle()

I think its not a bug. But can you help me how deal with it?

When I use _innerDrawerKey.currentState.toggle() - it open/close previously right or lelt panel. But I need toggle specific side - left (When user click menu button - it must open left panel)

Thhanks!

Make the visible scaffold clickable

When the the Inner Drawer is open, is it possible to have the scaffold scrollable and clickable without closing the drawer? In my case, I have a map on the scaffold and the map legend on the inner drawer, and I would like to scroll the map while having the legend visible.

Use AnimatedIcon with onDragUpdate value

I'm new to Flutter , I just want to to use AnimatedIcon with onDragUpdate value
Like this one GIF
Can you show me how to acheive this please ?

Arrow back icon when drawer open

how can i remove the back arrow in the app bar when i open the drawer?

I use both LeftSide and RightSide, but I show Right, then Left will be unmount! who to hold leftside?

I use both LeftSide and RightSide, but I show Right, then Left will be unmount! who to hold leftside?

Can't hide keyboard when toggling the drawer

I can't get rid of the soft-keyboard when I toggle the drawer open and closed. I have tried putting a GestureDetector around the button but it is getting ignored.

class SideBarButtonOpener extends StatelessWidget {
  SideBarButtonOpener({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('toggling drawer...');
        FocusScope.of(context).unfocus();
      },
      child: NavBarButton(
        icon: Icons.menu,
        color: Colors.white,
        onPressed: () {
          Provider.of<LayoutProvider>(context, listen:false).currentDrawer.currentState.toggle();
        },
      ),
    );
  }
}

innerDrawerCallback startup time

If I analyzed that correct, the callback waits for the animation to finish.
Giving the Use Case that a Trigger Button's Color should change onToggle, this creates an ugly visible delay :/
I could imaging 3 ways to fix this issue:

1. an additional callback, which fires on before the animation finishes
2. move the innerDrawerCallback before the animation (might create issues for other existing use cases I am not aware of)
3. open the value of InnerDrawerState, so one can listen to the actual value change and react

(sry, if I am to overreaching)

Need to control open and close state of left-child and right-child separately.

Hi, I am using 0.4.0 version. Instead of using left swipe or right swipe I want to use buttons. I used innerDrawerKey.currentState.open and innerDrawerKey.currentState.close method to open and close drawers. But the problem is I can not open or close one drawer specifically with button clicks.
So, I am wondering if is there any way to manage the open and closed state of left-child and right-child separately.

innerDrawerCallback parameter -> which side

The passing value for innerDrawerCallBack does not define rn which side of the drawer is opened.
It would be great to get ahold of this information somehow.
(I saw one issue here, where someone requested the extension of the GlobalKey to not only change the state, but also get the value, which sounds nice imo :D)

about Display

When I was debugging for release, the drawer could not be displayed.

Doesn't work with RTL locale

It doesn't work (leftChild, rightChild slide doesn't work) when I use a RTL locale.

import 'package:flutter/material.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';
import 'package:flutter_localizations/flutter_localizations.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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      supportedLocales: [
        Locale('ar'),
        Locale('en', 'GB')
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      locale: Locale('ar'),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  //  Current State of InnerDrawerState
  final GlobalKey<InnerDrawerState> _innerDrawerKey =
      GlobalKey<InnerDrawerState>();

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
        key: _innerDrawerKey,
        onTapClose: true,
        swipe: true,
        swipeChild: true,
        offset: IDOffset.only(
          right: 0.60,
          left: 0.60,
        ),
        leftAnimationType: InnerDrawerAnimation.static,
        rightAnimationType: InnerDrawerAnimation.quadratic,
        backgroundDecoration: BoxDecoration(
          color: Colors.white,
        ),
        leftChild: Container(
          color: Colors.red,
        ),
        rightChild: Container(
          padding: const EdgeInsets.all(8.0),
          color: Colors.green,
        ),
        scaffold: Scaffold(
          body: Container(
            constraints: BoxConstraints.expand(),
            color: Colors.teal,
            child: Center(child: Text('center')),
          ),
        ),
      );
  }
}

If I change locale: Locale('ar'), to locale: Locale('en', 'GB'), it works just fine.

Any idea how I can get child sliders to work with RTL language?

Duration of the AnimationController

Make duration of the drawer animation customizable.
Simply passing through constructor.

Drawer width doesn't reflect the offset parameter

I'm not sure if I'm doing something wrong or if the document is not very clear, but I'm trying to create a drawer that will fill 25% of the screen width. I created the following code:

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      scaffold: Scaffold(
        appBar: AppBar(title: Text('GoTV')),
      ),
      leftChild: Text('Left Child'),
      offset: IDOffset.only(left: 0.25),
    );
  }

But instead my drawer is filling a lot more than half of the screen:

the drawer become black on release mode

the drawer works fine on debug mode on both the emulator and a real phone, but when running on release mode or after building the apk, it disappears completely.

this is on debug mode:

this one on release mode:

both of them taken without any changes in the code.

Can't use TextFiled in left or right child

`import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TestPage extends StatefulWidget {
@OverRide
_TestPageState createState() => _TestPageState();
}

class _TestPageState extends State {
TextEditingController _controller = new TextEditingController();
onSearchubmit(String value) {
print("onNameSubmit = $value");
//userName=value;
//SqliteHelper.updateName(value);
}

@OverRide
Widget build(BuildContext context) {
ScreenUtil.init(context, width: 1242, height: 2208, allowFontScaling: true);
return Scaffold(
body:
SingleChildScrollView(
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 96.w, top: 10),
child: Container(
width: 1060.w,
height: 1060.w * 0.16,
decoration: BoxDecoration(
color: Color(0x26000000),
//border: new Border.all(color: Color(0xFFFF0000), width: 0.5),
borderRadius:
BorderRadius.all(Radius.circular(50))),
child:

            TextField(
                controller: _controller,
                onSubmitted: onSearchubmit,
                maxLines: 1,




                textAlign: TextAlign.left,
                //文本对齐方式
                style: TextStyle(
                    color: Color(0xFFB3AFCF),
                    fontSize: ScreenUtil().setSp(48)),
                decoration: InputDecoration(
                  hintText: "address...",
                  hintStyle: TextStyle(
                      color: Color(0xFFB3AFCF),
                      fontSize: ScreenUtil().setSp(48)),
                  counterText: '',
                  contentPadding:
                  EdgeInsets.fromLTRB(30, 17, 10, 0),

                  //border:InputBorder.
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide.none),
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide.none),
                  suffixIcon: Padding(
                      padding: EdgeInsets.only(
                          right: 10, top: 5),
                      child: IconButton(
                        icon: Icon(
                          Icons.search,
                          color: Colors.grey,
                          size: 25,
                        ),
                        onPressed: () {},
                      )),
                )),
          )),
    ])
  ))

);

}
}
`

when I use inner drawer like this:
InnerDrawer( key: _innerDrawerKey, onTapClose: true, swipe: true, rightOffset: 1, // Will be removed in 0.6.0 version leftOffset: 0.6, proportionalChildArea: true, // default true borderRadius: 0, // default 0 leftAnimationType: InnerDrawerAnimation.linear, rightAnimationType: InnerDrawerAnimation.linear, rightChild: TestPage(), ...

when keybord showing , will crash.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
setState() or markNeedsBuild() called when widget tree was locked.

This _ModalScope widget cannot be marked as needing to build because the framework is locked.
The widget on which setState() or markNeedsBuild() was called was: _ModalScope-[LabeledGlobalKey<_ModalScopeState>#59d46]
state: _ModalScopeState#b308a
When the exception was thrown, this was the stack:
#0 Element.markNeedsBuild. (package:flutter/src/widgets/framework.dart:3901:9)
#1 Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:3911:6)
#2 State.setState (package:flutter/src/widgets/framework.dart:1168:14)
#3 _ModalScopeState._routeSetState (package:flutter/src/widgets/routes.dart:664:5)
#4 ModalRoute.setState (package:flutter/src/widgets/routes.dart:784:30)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by animation library ═════════════════════════════════════════════════
'package:flutter/src/widgets/framework.dart': Failed assertion: line 3867 pos 12: '_debugLifecycleState != _ElementLifecycle.defunct': is not true.

Change the scaffold when an item is selected

Hello !
First thanks for this awesome package !
I have an application which use inner_drawer like this:

• A home scaffold
• A right child, which is the main menu off my app.
  When the user open the right menu and choose an item, I would like to close the menu AND change the main scaffold using the statefull widget corresponding in the menu.
  The only problem I have, is how to change the main scaffold ?

I have an idea to create a "Router Page" assigned to the main scaffold and change the returned Widget according, is it the good philosophy concerning this package ?

Thanks for the answer :)
Have a nice day !

Drawer become black in release model

Impossible to tab inside scaffold on the left side !

Hello !
I have a problem detected :

The red square can't be Tab, no action works on that red part !

Do you have an idea how to solve this problem ? thx 😇

leftOffset in px and disable shadow ?

Hello, it's possible to configure "leftOffset" in px but not in percent ?

And if it's possible to disable shadow ?

😇

Problems in showing the content of the drawer in CuportinoScaffold

Hello, thank you for the wonderful package!.
I struggled a lot to make work the package under Cupertino.
After some debugging i found the problem:

In line 267 you have

final RenderBox box = _drawerKey.currentContext?.findRenderObject();
The problem is that the drawerKey context is not always the context of the widget.
I managed to solve by changing the signature of the method to:

void _updateWidth(BuildContext context) {
}

And then calling:

 @override
  Widget build(BuildContext context) {
    //assert(debugCheckHasMaterialLocalizations(context));

    /// initialize the correct width
    if (_initWidth == 400 ||
        MediaQuery.of(context).orientation != _orientation) {
      _updateWidth(context); <---- /*here the change*/
      _orientation = MediaQuery.of(context).orientation;
    }

I am not sending a pull request, since I don't know if this change would break something, thanks.

Request exposure _handleDragDown

Request exposure "_handleDragDown，_move，_settle please".These things are very useful.

innerDrawerKey.currentState.toggle() ==> "The getter 'currentState' was called on null"

innerDrawerKey.currentState.toggle() ==>
"
The getter 'currentState' was called on null.
Receiver: null
Tried calling: currentState
"

When using the toggle after going back to the page with 'Navigator.pop'

Prevent Scaffold rebuilds

I have a ton of animations in the scaffold widget of the InnerDrawer.
Most of them play only on buidl() and moving the drawer constantly calls rebuild on the scaffold widget.
This causes a very jittery experience.
I tried using AutomaticKeepAliveClientMixin and set the wantKeepAlive to true but, InnerDrawer somehow bypasses it

Close drawer when swipe left or right child

Hello, I want to close the opened scaffold when the left or right child swipe to proper derection. Currently I can only drag the scaffold part to close drawers. Do you have any suggestions?

Problem with StatefulWidgets in Version 0.5.6,

Hello there!
I noticed some unexpected behaviour after version 0.5.5 when using a StatefulWidget inside the InnerDrawer.
Specifically the state of the widget is lost after swiping to the left or right (initState will be called).

Here is a small code example to reproduce this behaviour.

import 'package:flutter/material.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Wrapper(),
    );
  }
}

class Wrapper extends StatefulWidget {
  @override
  _WrapperState createState() => _WrapperState();
}

class _WrapperState extends State<Wrapper> {
  final GlobalKey<InnerDrawerState> _innerDrawerKey =
      GlobalKey<InnerDrawerState>();

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      offset: IDOffset.only(left: 0.7, right: 0.7),
      key: _innerDrawerKey,

      leftChild: Scaffold(
        body: Container(
          color: Colors.red,
        ),
      ),
      scaffold: StatefulPage(
        key: ValueKey("statefulPage"),
      ),
    );
  }
}

class StatefulPage extends StatefulWidget {
  StatefulPage({Key key}) : super(key: key);

  @override
  _StatefulPageState createState() => _StatefulPageState();
}

class _StatefulPageState extends State<StatefulPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Any help would be appreciated
Thank you :)

Lagging while using it inside PageView

When I use it in the a PageView everything slows down.🤔

Inner Drawer turns to blank when after debugging

Hello, I have a problem with the drawer became blank after stacking an image container below the scaffold. The problem only persists when finishing debugging.

The following code:

Main Page

return InnerDrawer(
      key: _innerDrawerKey,
      onTapClose: true,
      swipe: true,
      offset: IDOffset.only(bottom: 0, top: 0, right: 0, left: 0.5),
      borderRadius: 20,
      leftChild: CustomDrawer(
        pageName: 'Home',
      ),
      scaffold: Stack(
        children: <Widget>[
          Container(
            height: _screenHeight,
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.fill, 
                image: AssetImage('assets/sunflower.jpg')
              ),
            ),
            child: BackdropFilter(
              filter: prefix0.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: Container(
                decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
              ),
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
              centerTitle: true,
              title: OutlineButton(
                borderSide: BorderSide(
                    color: Colors.white, style: BorderStyle.solid, width: 1),
                highlightedBorderColor: Colors.white30,
                shape: StadiumBorder(),
                padding: EdgeInsets.only(
                    bottom: 2.0, top: 2.0, left: 40.0, right: 0.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      'ACCOUNTS',
                      style: TextStyle(color: Colors.white),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 2.0),
                      child: Icon(
                        Icons.keyboard_arrow_down,
                        color: Colors.white,
                      ),
                    )
                  ],
                ),
                onPressed: () {},
              ),
              leading: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {
                  _innerDrawerKey.currentState
                      .toggle(direction: InnerDrawerDirection.start);
                },
              ),
              actions: <Widget>[
                RawMaterialButton(
                  child: Column(
                    children: <Widget>[
                      Icon(Icons.lock_open),
                      Padding(
                        padding: const EdgeInsets.only(top: 5),
                        child: Text(
                          'LOGOUT',
                          style: TextStyle(color: Colors.white, fontSize: 9),
                        ),
                      )
                    ],
                  ),
                  onPressed: () {},
                )
              ],
            ),
            body: SingleChildScrollView(
                child: Column(
              children: <Widget>[
                Container(
                  height: _screenHeight / 4,
                  width: _screenWidth,
                  child: PageView(
                    children: <Widget>[
                      Container(
                        color: Colors.red,
                        child: Stack(
                          children: <Widget>[
                            Positioned(
                                top: _screenHeight / 14,
                                left: _screenWidth / 3,
                                child: Text(
                                  'RM 422',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 30,
                                    fontWeight: FontWeight.w200,
                                  ),
                                ))
                          ],
                        ),
                      ),
                      Container(
                        color: Colors.blue,
                      ),
                      Container(
                        color: Colors.green,
                      ),
                    ],
                  ),
                ),
              ],
            )),
          ),
        ],
      ),
    );

Custom Drawer

return Material(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.teal[700]),
            child: Stack(children: <Widget>[
              Positioned(
                  bottom: 12.0,
                  left: 16.0,
                  child: Text("Flutter Step-by-Step",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.0,
                          fontWeight: FontWeight.w500))),
            ]),
          ),
          DrawerItem(
            icon: Icons.home,
            text: 'Home',
            onTap: () {
              Navigator.pushReplacementNamed(context, '/');
            },
            selected: this.pageName.contains('Home'),
          ),
          DrawerItem(
            icon: Icons.event,
            text: 'Events',
            onTap: () {
              Navigator.pushReplacementNamed(context, Routes.events);
            },
            selected: this.pageName.contains('Events'),
          ),
          DrawerItem(
            icon: Icons.note,
            text: 'Notes',
            onTap: () {
              Navigator.pushReplacementNamed(context, Routes.notes);
            },
            selected: this.pageName.contains('Notes'),
          ),
          ListTile(
            title: Text('0.0.1'),
            onTap: () {},
          )
        ],
      ),
    );

DrawerItem Widget

return ListTileTheme(
      selectedColor: Colors.teal[300],
      iconColor: Colors.black,
      child: ListTile(
        leading: Icon(this.icon),
        title: Text(this.text),
        selected: selected,
        onTap: this.onTap,
      ),
    );

Flutter Doctor

[√] Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 6.3.9600], locale en-US)
    • Flutter version 1.12.13+hotfix.5 at D:\flutter
    • Framework revision 27321ebbad (2 days ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.40.2)
    • VS Code at 
    • Flutter extension version 3.7.1

[√] Connected device (1 available)
    • CPH1803 • 5b907b66 • android-arm64 • Android 8.1.0 (API 27)

• No issues found!

Screenshots:

During debugging

After debugging

Repo link
https://github.com/haziq-danial/flutter_first_app

When swipe set to true, then 'back' button on navigation bar not working

I have a two page, Dashboard page and slidepanel page.
Click a button in Dashboard page and then go to slidepanel page.

I set 'swipe' parameter to be true. i click 'back' button on navigation bar. it cannot back to Dashboard.

Also, i call Navigator.pop(context), which also not work.

Gradient Background

Is it possible to have gradient background ?

Navigation

How can i navigate between pages using only one drawer ? Can you show very simple example ?

Enable swipe only from the edge

Currently, it listens full area and blocks Horizontal swipe gesture in main content

Body of Scaffold

Is there any way when swiping, the body of Scaffold still stand still.

Two menus left and right at same time???

how can we have both left and right different inner menus just like SlidingMenu so the user can swipe left and write to open different panels.

I want to hide the back arrow in app bar

This is the code

 Widget build(BuildContext context) {
    return InnerDrawer(
        colorTransitionChild: Colors.transparent,
        onTapClose: true,
        // tapScaffoldEnabled: true,
        boxShadow: [BoxShadow(color: Colors.grey)],
        //proportionalChildArea: false,
        //borderRadius: 12,
        innerDrawerCallback: (isOpened) {
          _isOpen = isOpened;
          print(_isOpen);
        },
        swipe: true,
        scale: IDOffset.horizontal(1),
        colorTransitionScaffold: Colors.transparent,
        offset: IDOffset.horizontal(0.15),
        key: key,
        rightChild: Container(
          color: Colors.white,
        ),
        scaffold: Scaffold(
          appBar: AppBar(
            leading: null,
            elevation: 1,
            title: Text('flutter.dart.lang'),
            actions: [
              IconButton(
                  icon: Icon(Icons.menu),
                  onPressed: () {
                    key.currentState.toggle();
                  })
            ],
          ),
        ));
  }```