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?

Answer 1

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