4

I use the flutter function showmodalbottomsheet to display a page with a customscroll view.

But I have a problem when the scroll of the scrollview is overscrolling I wanted to scroll the the bottomsheet instead of overscrolling the customscrollview.

How can I choose which scroll I want to use?

for example I want to do like Facebook commentary page:

here you can see the sheet is scrolling down when the scrollview is at max scroll

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Paul Raphanaud
  • 41
  • 1
  • 2

1 Answers1

5

What you probably need is DraggableScrollableSheet .

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (context) => DraggableScrollableSheet(
    builder: (context, scrollController) => SingleChildScrollView(
      controller: scrollController,
      child: Column(
        children: [
          Container(
            color: Colors.purple,
            height: 100,
          ),
          Container(
            color: Colors.orange,
            height: 300,
          ),
          Container(
            color: Colors.black,
            height: 300,
          ),
        ],
      ),
    ),
  ),
),

(I was also looking for an answer when I stumbled upon your question, decided to share the results of my research :) hope it helps you!)

kobuchi
  • 420
  • 5
  • 11
  • For this to work properly, you also need to set `minChildSize: 1,` and `initialChildSize: 1,` on the `DraggableScrollableSheet` component. – Akinjiola Toni Apr 22 '22 at 10:18
  • @AkinjiolaToni If you set the `minChildSize: 1` as soon as you start scrolling, the bottom sheet closes. `0.75` would be a good idea. I checked this on iOS, not sure about Android. – kartoon Jul 23 '22 at 18:34