How to Disable Drag Open/Close on Drawer in Flutter

In this example, we are going to show you how to disable the drag or swipe gestures while opening or closing the drawer in Flutter. By default, you can configure to disable the drag gesture on drawer open, but there is no attribute to disable drag on closing. So, see the example below to see how to do it.

If you want to disable drag on the only opening of the drawer then use the simple code below:

Scaffold(
  drawerEnableOpenDragGesture: false,
  drawer: Drawer(),
)

But, this will only be disabled on the opening of the drawer. If you want to disable drag on the whole drawer while opening or closing the drawer, then use the code below:

Scaffold(
  drawerEnableOpenDragGesture: false,
  drawer: GestureDetector(
    onHorizontalDragUpdate: (_)=>null,
    child:Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(right:80), //space at right side
      color: Colors.transparent,
      child:Drawer(), //drawer
    )
  ),
)

Use the above code if you want to disable the drag gestures on Drawer.

Read this also: How to Add Navigation Drawer Below App Bar and Set Menu Icon

If you only want to disable the drag gesture while opening the endDrawer, then use the following code:

Scaffold(
  endDrawerEnableOpenDragGesture: false,
  endDrawer: Drawer()
)

If you want to disable the drag gesture completely on endDrawer, then use the code below:

Scaffold( 
  endDrawerEnableOpenDragGesture: false,
  endDrawer: GestureDetector(
    onHorizontalDragUpdate: (_)=>null,
    child:Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.only(left:80), //space at left side
      color: Colors.transparent,
      child:Drawer(), //drawer
    )
  ),
)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Disable Drag on Drawer in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          drawerEnableOpenDragGesture: false,
          endDrawerEnableOpenDragGesture: false,
          drawer: GestureDetector(
            onHorizontalDragUpdate: (_)=>null,
            child:Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(right:80), //space at right side
              color: Colors.transparent,
              child:Drawer(), //drawer
            )
          ),
          endDrawer: GestureDetector(
            onHorizontalDragUpdate: (_)=>null,
            child:Container(
              width: MediaQuery.of(context).size.width,
              padding: EdgeInsets.only(left:80), //space at left side
              color: Colors.transparent,
              child:Drawer(), //drawer
            )
          ),
          body: Container()
       );
  }
}

In this way, you can disable the drag gesture on Drawer and endDrawer in Flutter.

No any Comments on this Article


Please Wait...