Dismiss bottom sheet when scrolling inner scrollable down

Question

I'm having Flutter's full screen modal bottom sheet which has SingleChildScrollView inside it.

Normal outcome is that whether I scroll up or down, it scrolls inner scrollable. I can close modal bottom sheet by dragging down anything that is outside the scrollable (it's a small container with a drag handle in it for me).

The issue is that I want to pull down bottom sheet if I am pulling down inner scrollable. After doing some research, I've found that I should operate with AlwaysScrollableScrollPhysics and NeverScrollableScrollPhysics but I really can't find the best solution here.

My idea is that inner scrollable is allowed to scroll until it's scroll offset is negative. That doesn't work since I need some way to make it scrollable when I stop scrolling without closing bottom sheet.

I could wrap inner scrollable into GestureDetector and checking against the scrolling delta but no success yet.

Maybe anyone have had a similar issue and got some example or algorithm?

Any updated about it ? – Zeffry Reynando Jul 25 '20 at 02:53 — Zeffry Reynando, Jul 25 '20 at 02:53

score 1 · Answer 1 · answered Nov 19 '21 at 09:03

Add modal_bottom_sheet and use showMaterialModalBottomSheet

showMaterialModalBottomSheet(
                          context: context,
                          builder: (context) {
                            return SingleChildScrollView(
                              child: Column(
                                children: [
                                  Container(
                                    width: MediaQuery.of(context).size.width,
                                    height: MediaQuery.of(context).size.height * 0.8,
                                    color: Colors.green,
                                  ),
                                  Container(
                                    width: MediaQuery.of(context).size.width,
                                    height: MediaQuery.of(context).size.height * 0.8,
                                    color: Colors.red,
                                  ),
                                ],
                              ),
                            );
                          });

score 0 · Answer 2 · answered Mar 23 '22 at 11:42

You can use modal_bottom_sheet package, which was also suggested here by Miftakhul Arzak.

modal_bottom_sheet supports the desired behavior out-of-the-box, I'm quoting the readme:

Support for inside scrollview + dragging down to close (showModalBottomSheet won't work correctly with scrollviews.

Beware though: you might still have issues for long lists that exceed the screen size if you don't use the package correctly.

This is how you ensure that overscrolling the top of the scroll view to the bottom will close the modal:

import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

...

showMaterialModalBottomSheet(
  context: context,
  builder: (context) => SingleChildScrollView(
    controller: ModalScrollController.of(context),
    child: Container(),
  ),
);

You basically ask the inner scroll view to be controlled by the modal's logic with controller: ModalScrollController.of(context).

If you don't want to use this package, this other answer might solve your question with the default Flutter showModalBottomSheet: when using SingleChildScrollView can't drag down botttom sheet.

Dismiss bottom sheet when scrolling inner scrollable down

2 Answers2