Flutter: prevent drawer closing

user_6641322 0
Viewed 861

Is is possible to prevent closing drawer in Flutter?

I am using endDrawer as a form in web app. I have disable swipe to open and I would also like to only allow closing it by a button so users won't accidentaly close it by clicking outside. However I cannot see any boolean like prevent dismiss or any way to implement WillPopScope.

So - is it possible without creating my own Drawer implementation?

flutter
2 Answers

One workaround I use is having a Row for Scaffold.body, and then making the first widget a Drawer, and the second the actual body. By not including it in the Scaffold, the AppBar doesn't take control of the Drawer.

So something like this:

class FullScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: Text("Big screen web app")),
    body: Row(
      children: [
        Drawer(/* Menu items here */),
        Placeholder(/* Normal body here */),
      ]
    )
  );
}
user_116031220

I have the same problem that I do not want my users to accidently dismiss the drawer, wich contains a form, on swipe or click outside.

My work around solution is to wrap the content of the drawer in a GestureDetector and then add:

onHorizontalDragEnd: (v) {
  // do nothing
},

Closing by tapping outside however is still posible, so I fixed that like this: make the drawer 100% width with transparant background and give a desired endDrawerWidth to the child of the Drawer.

complete example:

return Scaffold(
  endDrawerEnableOpenDragGesture: false,
  endDrawer: Container(
    width: MediaQuery.of(context).size.width,
    child: Drawer(
      backgroundColor: Colors.transparent,
      child: GestureDetector(
        onHorizontalDragEnd: (v) {
          // do nothing
        },
        child: Row(
          children: [
            Expanded(child: Container(color: Colors.transparent,)),
            Container(
              /// replace by your desired width
              width: MediaQuery.of(context).size.width/2,
              color: Colors.white,
              child: Center(child: Text("your content")),
            ),
          ],
        ),
      ),
    ),
  ),
  body: Center(child: Text("your boby")),
);
user_29209390
Related