Detecting Modal Sheet On Drag Down Event - flutter

Question

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?

Answer 1

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.

Answer 2

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),
),
);
}
}

Answer 3

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.