Flutter BottomSheet Not Dismissing on Swipe Down in Android

Question

I'm using showModalBottomSheet in my Flutter app to show a bottom sheet for adding a bank account. However, the bottom sheet does not dismiss when swiping down on Android.(Working in IOS)

void addBankAccountBottomSheet(String? navigateBackRoute) {
 showModalBottomSheet(
 context: StackedService.navigatorKey!.currentContext!,
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.vertical(
 top: Radius.circular(16.0),
 ),
 ),
 isScrollControlled: true,
 isDismissible: true,
 enableDrag: true,
 builder: (BuildContext context) {
 return FractionallySizedBox(
 heightFactor: 0.5, 
 child: Scaffold(
 body: Padding(
 padding: EdgeInsets.all(25.0),
 child: Column(
 children: [
 Expanded(
 child: SingleChildScrollView(
 child: Column(
 children: [
 Text("Add Bank Account"),
 TextField(decoration: InputDecoration(labelText: "Account Number")),
 TextField(decoration: InputDecoration(labelText: "Nickname")),
 ],
 ),
 ),
 ),
 SizedBox(height: 16.0),
 Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: [
 TextButton(
 onPressed: () => Navigator.of(context).pop(),
 child: Text("Cancel"),
 ),
 TextButton(
 onPressed: () {
 // Submit action
 },
 child: Text("Next"),
 ),
 ],
 ),
 ],
 ),
 ),
 ),
 );
 },
 );
}

Expected Behavior: The bottom sheet should dismiss when swiping down on Android.

Actual Behavior: Swiping down does not close the bottom sheet. It only dismisses when tapping outside .

How can I fix this issue? Any help would be appreciated!

Answer 1

Since you’ve wrapped the content inside a Scaffold, that might be interfering with the default behavior of enableDrag: true.

Try Using DraggableScrollableSheet

Below is an example:

void addBankAccountBottomSheet(String? navigateBackRoute) {
 showModalBottomSheet(
 context: context,
 shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.vertical(
 top: Radius.circular(16.0),
 ),
 ),
 isScrollControlled: true,
 isDismissible: true,
 enableDrag: true,
 builder: (BuildContext context) {
 return DraggableScrollableSheet(
 initialChildSize: 0.5, // Half screen height
 minChildSize: 0.3, // Allow it to be swiped down
 maxChildSize: 0.9, // Expandable
 expand: false,
 builder: (context, scrollController) {
 return Container(
 padding: EdgeInsets.all(25.0),
 child: Column(
 children: [
 Text("Add Bank Account", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
 Expanded(
 child: SingleChildScrollView(
 controller: scrollController, // Important for scrolling inside the sheet
 child: Column(
 children: [
 TextField(decoration: InputDecoration(labelText: "Account Number")),
 TextField(decoration: InputDecoration(labelText: "Nickname")),
 ],
 ),
 ),
 ),
 SizedBox(height: 16.0),
 Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: [
 TextButton(
 onPressed: () => Navigator.of(context).pop(),
 child: Text("Cancel"),
 ),
 TextButton(
 onPressed: () {
 // Submit action
 },
 child: Text("Next"),
 ),
 ],
 ),
 ],
 ),
 );
 },
 );
 },
 );
}

• Dasaya_Developer: I already added it.
• Rishabh Sharma: You can try DraggableScrollableSheet. I have updated the code above.