Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to disable vertical scroll when horizontal scrolling on SlidingUpPanel

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 😀.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

  2. 0

    If (using NotificationListener<ScrollNotification>):

    • it just disables scrolling after I stop scrolling horizontally.

    Then I think the problem is there, try reenabling the scrolling after stopping the horizontal scrolling.

    like this:

    NotificationListener<ScrollNotification>(
          onNotification: (notification) {
            if (notification is ScrollUpdateNotification) {
              if (notification.scrollDirection   
 == ScrollDirection.horizontal) {
                panelController.isDraggable = false;
              } else {
                panelController.isDraggable = true;
              }
            }
            return true;
          },

    If you already tried that then please add a link to your code in Git Hub so we can understand the problem more clearly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search