Flutter: Ability to disable Drawer edge-swipe

[dougsatch]

I've been looking for a way to disable edge-swipe open of a Drawer, but can't find a way to do it.

It would be great to be able to open the Drawer only programmatically. Users often find that the Drawer edge-swipe gets in the way, e.g. when using horizontal lists, it's easy to accidentally open the Drawer instead of scrolling the list across.

[woody-worakorn]

Same problem and can't find some answer from google.

[StoneN]

Is there any answer now ?

[misterfourtytwo]

Have somebody found a way?

[ledarh]

Bumping this issue. Would love to see a solution!

[right7ctrl]

still waitin for it

[kelvin1hui]

Bumping this issue.
Still cannot find the solution from google

[ch-muhammad-adil]

any work around ?

[serhii-k]

You can try drawerEdgeDragWidth: 0.0 in your Scaffold.

[nelsonalexandrino]

can you try to put drawerEdgeDragWidth: 0 on you Scaffold

Scaffold(
drawerEdgeDragWidth: 0,
drawer: Container(width: 100),
body: Container(),
);

please let me know if this will work for you.

[HansMuller]

CC @shihaohong

[shihaohong]

I believe that this effect is already achievable by combining the use of Scaffold.drawerEdgeDragWidth and ScaffoldState.openDrawer. I created a PR to add sample docs to the Scaffold.drawer property.

[rickmrobin]

drawerEdgeDragWidth: 0 works.

But in my app i have both drawer and endDrawer. It disables both drawers to swipe. Is there any way to only disable the endDrawer edge swipe?

[shihaohong]

@rickmrobin I took a quick look and it seems like drawerEdgeDragWidth unfortunately affects both the drawer and endDrawer. I created a new issue to track a feature request for enabling a drawer while keeping the other disabled: https://github.com/flutter/flutter/issues/49804

[shihaohong]

This issue has already been closed, but I would like to ask for some opinions on disabling drags to open/close the drawers on each end. There is currently a PR in progress (https://github.com/flutter/flutter/pull/50925) that allows developers to disable individual drawer drag gestures in the event that one would like to disable just one drawer but not the other (drawer vs endDrawer).

Given that the drawer can only be opened programmatically and not via a drag gesture, would it be more common that developers/users expect the drawer to also be required to be closed programmatically, or that the drawer can also be closed with a drag gestures?

Edit: Turns out that you can still tap outside the area of the drawer to close the drawer as well.

cc/ @perclasson

[rickmrobin]

@shihaohong this seems like the solution to the problem to prevent user to drag and open the endDrawer. But disabling drag gestures will also prevent closing the drawer or endDrawer by dragging. As you said it will be more common for users or developers to expect to close the drawer by dragging even if not opened by drag gesture. Closing outside the drawer will close the drawer but still if we can figure out some other way to disable only to open drawer by dragging instead disabling both closing and opening by dragging.

[perclasson]

I modified the PR https://github.com/flutter/flutter/pull/50925 to only disable the open drawer gesture, which should cover the use case now.

[j0nscalet]

@rickmrobin @shihaohong We have a use case where we'd like to disable the close drag gesture on the drawer. That doesn't seem to be the direction #50925 is going though - that's ok.

We're working on around this by wrapping the Drawer in a GestureDetector using a null onHorizontalDragUpdate function.

Note: We haven't had to handle the tap to close issue because our Scaffold does not show its scrim since the drawer's container is set to the width of the screen.

HTH

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: GestureDetector(
        onHorizontalDragUpdate: (_) => null,
        child: Drawer(
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
                onTap: () => print("Hello World"),
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () => print("Hello World"),
              ),
              ListTile(
                title: Text('Item 3'),
                onTap: () => print("Hello World"),
              )
            ],
          ),
        ),
      ),
    );
  }