Is it possible to intercept the event when the bottom sheet is being drag down, and show a message when it is about to close?


Solution 1: happy_san

This is not a definitive answer, but I'm posting here because it provides a direction and is too long for a comment (because of links).

BottomSheet class defines BottomSheetDragStartHandler which is a callback for when the user begins dragging the bottom sheet.

_ModalBottomSheet passes this as onDragStart and this as onDragEnd argument to it's BottomSheet child.

So in theory, if you really want to, you can implement custom bottom sheet following the example of _ModalBottomSheet and tailoring the stuff according to need.


Solution 2: shirsh shukla

Try this,

i added bool variable that check bottomSheet is open or closed, (also this action i printout in appBar).

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
  bool isOpen = false;

  var bottomSheetController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: isOpen?Text("Open Bottom Sheet"):Text("Closed Bottom Sheet"),
      ),
        body:
        FloatingActionButton(
          onPressed: () {
            setState(() {
              isOpen = !isOpen;
            });
            print('clicked on the bottom sheet');
            if(isOpen) {
              bottomSheetController = showBottomSheet(
                  backgroundColor: Colors.transparent,
                  context: context,
                  builder: (ctx) {
                    return ClipRRect(
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(20),
                        topLeft: Radius.circular(20),
                      ),
                      child: Container(
                          height: 150,
                          color: Colors.black,
                          child: TextField()
                      ),
                    );
                  });
              bottomSheetController.closed.then((value) {
                setState(() {
                  isOpen = !isOpen;
                });
              });
            } else {
              Navigator.of(context).pop();
              setState(() {
                isOpen = !isOpen;
              });
            }
          },
          child: isOpen?Icon(Icons.arrow_downward):Icon(Icons.arrow_upward),
        ),
      );
  }
}


Solution 3: rehman_00001

You could use this Widget: BottomSheet. It offers methods: onDragStart(), onDragEnd() and a more useful method:onClosing which exactly does what you're looking for.

    BottomSheet(
      enableDrag: true  // required
      onClosing: () {
        /* intercept close event */
        showDialog();
      }
    )

However, the only caveat here is, we can only use this BottomSheet in a Scaffold.

  Scaffold(
    appBar: AppBar(...),
    body: Container(...),
    bottomSheet: BottomSheet(
      onClosing: () {},
      builder: () => Container(...),
    )   
  )

This results in a persistent bottom sheet. To control its visibility, you will have to use a Stateful widget and have a boolean flag for the purpose.

See here for a complete example.