Search code examples
flutterdartmodal-dialogflutter-showmodalbottomsheet

Flutter : How to disable drag down to close showModalBottomSheet


I want to disable drag down to close the showModalBottomSheet

I have already tried using enableDrag:false,

When i'm using enableDrag:false, is showing me below error

enter image description here

Below is my code

 modal(BuildContext context) {
    showModalBottomSheet(
        context: context,
        enableDrag:false,
        isDismissible: false,
        backgroundColor: Colors.transparent,
        builder: (context) {
          return Container(
            width: MediaQuery.of(context).size.width,
            child: Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.only(top: 30),
                  child: Stack(
                    alignment: Alignment.topCenter,
                    children: <Widget>[
                      ClipPath(
                        clipper: OvalTopBorderClipper(),
                        child: Container(
                          width: MediaQuery.of(context).size.width,
                          padding: EdgeInsets.only(top: 80),
                          color: Colors.white,
                          height: 440,
                          child: Text("This is a modal bottom sheet !"),
                        ),
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: 5,
                  child: Container(
                    width: 50.0,
                    height: 53.0,
                    child: Center(
                      child: Text(
                        "K",
                        style: TextStyle(
                            color: AppColors.textColor, fontSize: 20.0),
                      ),
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    decoration: BoxDecoration(
                        border:
                            Border.all(color: AppColors.textColor, width: 2)),
                  ),
                ),
              ],
            ),
          );
        });
  }

I have already check this post

If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.


Solution

  • enableDrag is not available in showModalBottomSheet. I don't think it was ever available in stable channel. According to comments from the link at that time it was available in Master channel. But second answer from that link works well

    builder: (context) => GestureDetector(
                        onVerticalDragDown: (_) {},
                        child: ...,
    

    here is documentation to showModalBottomSheet . You can always tap into the showModalBottomSheet and customise it.. According to doc

    BottomSheet, which becomes the parent of the widget returned by the function passed as the builder argument to showModalBottomSheet.

    and BottomSheet has enableDrag parameter.