How to disable vertical scroll when horizontal scrolling on SlidingUpPanel

Question

I am trying to reproduce the behaviour that Google Maps do on the row of buttons below the title of the panel. See this video. If you see I can scroll vertically, but at the moment I start scrolling these buttons horizontally, the vertical scroll, is like, disabled.

I am using SlidingUpPanel (https://pub.dev/packages/sliding_up_panel), but if there is other widget that works with this request, I can change it.

Right now I have like this, and is a bit weird, because while I am horizontally scrolling I can also scroll vertically.

I have tried with NotificationListener<ScrollNotification> and checking if it is horizontal scroll to disable drag on SlidingUpPanel, but it just disables scrolling after I stop scrolling horizontally.

Also, I have tried with GestureDetector with onHorizontalDragDown, onHorizontalDragUpdate, onHorizontalDragStart, onHorizontalDragEnd. But nothing really works.

Thanks in advance 😀.

Answer 1

I have switched the package from sliding_up_panel to sliding_up_panel2, that provides a widget called HorizontalScrollableWidget that prevents the drag on the panel when I horizontally scroll when surrounding the Scrolable widget with it.

Hope this helps for someone else.

There is a code example:

// ...More widgets here on a Column or ListView
HorizontalScrollableWidget(
    child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
            children: [
                // ...The rest of the widgets here
            ],
        ),
    ),                    
),
// ...More widgets here on a Column or ListView