Material TabBars should scroll horizontally with the mouse wheel by default

[hacker1024]

trafficstars

Use case

I have a TabBar with many tabs in my desktop application. At the moment, the only way to properly scroll across the tab list is to hold shift while moving the scroll wheel (if #75180 isn't an issue).

Proposal

TabBars should scroll horizontally by default in response to the mouse wheel, as it makes no sense to scroll them vertically since they cannot move on that axis.

[maheshj01]

Hi @hacker1024, Thanks for filing the issue. This seems like a valid feature request. But I believe this should be fixed once the issue you have linked(https://github.com/flutter/flutter/issues/75180) gets fixed.

cc: @Piinks for confirmation.

[HansMuller]

This sounds like a reasonable proposal. Presumably it would apply to any scrollable that only supports horizontal scrolling.

[Piinks]

@hacker1024 this should already work, since a mouse scroll is handled in such a way that it applies to the scrolling widget's main axis. The linked issue is specific to applying the shift modifier key, but it sounds like you are talking about this working without the modifier key. Can you confirm ? If so, that issue will not solve this.

Can you also provide a minimal runnable sample of code that illustrates your issue? Thanks!

[hacker1024]

@Piinks https://dartpad.dev/?id=d3d3e89425655cdd835eb6fa3be20b68

I am indeed talking about using just the mouse wheel without the modifier key. As you can see in this example, the tabs do not scroll with the wheel unless the modifier key is pressed.

While my example puts the TabBar in an AppBar, the same problem occurs if it is used by itself, as I am doing in my own project.

[Piinks]

Thanks for the dartpad, can you also share what platform you are running it on? Mac, windows, linux? Even though dartpad is running on web, some behaviors defer to the actual platform it is running on.

[hacker1024]

I've tested on the desktop, Chrome and Safari on macOS 10.15, with both a regular mouse and a trackpad.

[noob8boi]

any updates yet? I am trying to create this same behavior for my sliver app bar but it doesn't allow scroll wheel to scroll through horizontal list view which is inside SliverPersistentHeaderDelegate.

[hasnentai]

Any update on this?

[Skquark]

I'm also wondering why this still isn't default feature for desktop with mouse pointer. My tabbars have gotten too long, and the only way to see tabs at the end is to select towards the end to scroll it over. Also works when enabling DragScrolling with dragDevice mouse in scrollBehavior, but it's intuitive to scroll horizontal with wheel.

[Piinks]

So after looking into this a bit, I am not sure we can support this by default, but may be able to make it configurable.

When scrolling with a vertical mouse wheel, the input from the platform is vertical. Just because the mouse may be hovering over a horizontal scroll view does not necessarily mean the input can automatically assume it should be altered. It is not atypical for a horizontal scrolling TabBar to be contained within a vertical scroll view, for example.

https://github.com/flutter/flutter/pull/115610 added support for shift->horizontal scroll, or whichever keys you'd like to configure, which is a more common convention across platforms. Perhaps we can introduce something similar that allows users to indicate this assumption can be made.