Prevent to hide showModalBottomSheet from outside touch

Question

Is it possible to prevent ModalBottomSheet to hide from outside touch? Like in showDialog() we can use barrierDismissible property to prevent dialog from closing on outside touch

score 6 · Answer 1 · answered Jun 03 '20 at 04:39

6

you can use isDismissible: false and enableDrag: false like this

showModalBottomSheet(
      isDismissible: false,
      enableDrag: false,

      builder: (context) {
        return Container(
         height: 100.0
       )
      }
  );

answered Jun 03 '20 at 04:39

Martin Alvarado Diaz

61
1
4

score 3 · Answer 2 · answered Aug 22 '19 at 09:55

3

You need to use showBottomSheet() which doesn't include barrier instead of using showModalBottomSheet().

More info here

answered Aug 22 '19 at 09:55

CopsOnRoad

237,138
77
654
440

Sorry guys, I know for ``showBottomSheet but I'm looking for showModalBottomSheet(). – Govaadiyo Aug 22 '19 at 13:35
2

The only difference between `showModalBottomSheet` and `showBottomSheet` is the latter can't be dismissed by touching outside of its context. And isn't the same thing you asked for? – CopsOnRoad Aug 22 '19 at 16:06
Yes but I think we can access/touch outer widget after opening the `showBottomSheet ` ? Correct me if I'm wrong ? – Govaadiyo Aug 23 '19 at 13:37
1

You are right, you can access outer widgets, may I know what exact model you are looking for? You simply want to prevent those outer widgets from getting clicked when sheet is opened? You can use `AbsorbPointer` widget for that case. – CopsOnRoad Aug 23 '19 at 13:59

Amit Prajapati · Answer 3 · 2019-08-22T13:15:34.917

    class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    final _scaffoldKey = new GlobalKey<ScaffoldState>();
    VoidCallback _showPersBottomSheetCallback;

    @override
    void initState() {
        super.initState();
        _showPersBottomSheetCallback = _showBottomSheet;
    }

    void _showBottomSheet() {
        setState(() {
        _showPersBottomSheetCallback = null;
        });

        _scaffoldKey.currentState
            .showBottomSheet((context) {
            return new Container(
                color: Colors.greenAccent,
                height: 300.0,
                child: new Center(
                child: new Text("Hi BottomSheet"),
                ),
            );
            })
            .closed
            .whenComplete(() {
            if (mounted) {
                setState(() {
                _showPersBottomSheetCallback = _showBottomSheet;
                });
            }
            });
    }

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
        key: _scaffoldKey,
        appBar: new AppBar(
            title: new Text("Flutter BottomSheet"),
        ),
        body: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {},
            child: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: new Center(
                child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    new RaisedButton(
                    onPressed: _showPersBottomSheetCallback,
                    child: new Text("Persistent"),
                    ),
                ],
                ),
            ),
            ),
        ),
        );
    }
    }

I consider it to be a workaround instead of a solution when you already have dedicated `showBottomSheet()` callback. — CopsOnRoad, Aug 22 '19 at 09:59

score 0 · Answer 4 · answered Apr 19 '20 at 06:35

Try setting isDismissible to false inside showModalBottomSheet

        showModalBottomSheet(
                    isDismissible: false,
                    context: context,
                    builder: (BuildContext bc) {
                      return SheetWidget();
                    },
                  );

where SheetWidget is the widget you are trying to call as BottomSheet

Prevent to hide showModalBottomSheet from outside touch

4 Answers4