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!

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!

• android
• flutter
• bottom-sheet

Share Improve this question Follow edited Mar 25 at 8:40 tyg 16.6k44 gold badges3737 silver badges4949 bronze badges asked Mar 25 at 8:36 Dasaya_DeveloperDasaya_Developer 6711 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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