Scroll issue in Web app

[ShahramHaftlang]

Hi,
I tried the example given here: https://pub.dev/packages/numberpicker
However, I cannot scroll the number!
It looks like it doesn't respond to mouse movement.
My project is setup in Android Studio under Windows and I get the same behavior using Chrome or Edge.
Any help would be appreciated.
This is my config info:

name: flutter_test_05_router
description: Router Example
publish_to: 'none'
version: 1.0.0+1

analyzer:
enable-experiment:
- non-nullable

environment:
sdk: ">=2.12.0 <3.0.0"

dependencies:
flutter:
sdk: flutter
http: ^0.13.3
shared_preferences: ^2.0.6
web_socket_channel: ^2.1.0
numberpicker: ^2.1.1

dev_dependencies:
flutter_test:
sdk: flutter

flutter:
uses-material-design: true

[WheelerCC]

I'm seeing the same issue, not responding to touch input when using in a web app.

[WheelerCC]

@ShahramHaftlang What flutter version are you using? The issue doesn't seem to be present in the example now that I've downgraded to the stable Flutter 2.2.3, but using the latest flutter dev release 2.4.0-4.2.pre the issue is back. I'm unsure what's changed between these releases that would affect this.

[WheelerCC]

This seems to have been introduced between 2.3.0-1.0.pre and 2.3.0-12.1.pre. I'm just looking into possible causes, flutter/flutter#81569 seems to look like the likely cause. I think this is an intentional change in default behaviour in web apps.

[WheelerCC]

My previous message seems to be correct. See https://flutter.dev/docs/release/breaking-changes/default-scroll-behavior-drag for details of the breaking change. This seems to be a preference thing, and at least for my use case of NumberPicker it makes sense to continue responding to mouse dragging on web. The migration change suggested on the linked page works well so far and restores expected behaviour.

Code before migration:

return NumberPicker(
          value: _currentIntValue,
          minValue: 0,
          maxValue: 100,
          step: 10,
          haptics: true,
          onChanged: (value) => setState(() => _currentIntValue = value),
        );

Code after migration:

return ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          }),
          child: NumberPicker(
            value: _currentIntValue,
            minValue: 0,
            maxValue: 100,
            step: 10,
            haptics: true,
            onChanged: (value) => setState(() => _currentIntValue = value),
          ),
        );

The main issue for me was that scrolling via the mouse wheel instead would skip numbers, and using the scrollbar to the side is shaky as it seems to constantly try to move towards the nearest number even when the scrollbar is being held. Either way, not a bug with NumberPicker, but perhaps an opportunity to add a flag to NumberPicker and abstract the ScrollConfiguration within it.

[ShahramHaftlang]

@WheelerCC Yes, I think I used version 2.3.x, so it makes sense.
I wonder if you're part of NumberPicker plugin team!?
I sent this about 8 days ago, and I thought NumberPicker team is not active on raised issues! :-)

[polyGeek]

@WheelerCC
Wrapping in a ScrollConfiguration() fixed it for me. You're a lifesaver. Thanks! I'm using this in the RunPee App Admin. Bladders around the world are very thankful. :-)

[houdayec]

My previous message seems to be correct. See https://flutter.dev/docs/release/breaking-changes/default-scroll-behavior-drag for details of the breaking change. This seems to be a preference thing, and at least for my use case of NumberPicker it makes sense to continue responding to mouse dragging on web. The migration change suggested on the linked page works well so far and restores expected behaviour.

Code before migration:

return NumberPicker(
          value: _currentIntValue,
          minValue: 0,
          maxValue: 100,
          step: 10,
          haptics: true,
          onChanged: (value) => setState(() => _currentIntValue = value),
        );

Code after migration:

return ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          }),
          child: NumberPicker(
            value: _currentIntValue,
            minValue: 0,
            maxValue: 100,
            step: 10,
            haptics: true,
            onChanged: (value) => setState(() => _currentIntValue = value),
          ),
        );

The main issue for me was that scrolling via the mouse wheel instead would skip numbers, and using the scrollbar to the side is shaky as it seems to constantly try to move towards the nearest number even when the scrollbar is being held. Either way, not a bug with NumberPicker, but perhaps an opportunity to add a flag to NumberPicker and abstract the ScrollConfiguration within it.

Thanks for this fix. However, package should be updated!

[obeobe]

This issue also reproduces in Linux desktop builds, and the ScrollConfiguration workaround helps!

[alexdess]

Same issue today for a website, indeed the ScrollConfiguration saves me.

[iksinskiyt]

My previous message seems to be correct. See https://flutter.dev/docs/release/breaking-changes/default-scroll-behavior-drag for details of the breaking change. This seems to be a preference thing, and at least for my use case of NumberPicker it makes sense to continue responding to mouse dragging on web. The migration change suggested on the linked page works well so far and restores expected behaviour.

Code before migration:

return NumberPicker(
          value: _currentIntValue,
          minValue: 0,
          maxValue: 100,
          step: 10,
          haptics: true,
          onChanged: (value) => setState(() => _currentIntValue = value),
        );

Code after migration:

return ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(dragDevices: {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          }),
          child: NumberPicker(
            value: _currentIntValue,
            minValue: 0,
            maxValue: 100,
            step: 10,
            haptics: true,
            onChanged: (value) => setState(() => _currentIntValue = value),
          ),
        );

The main issue for me was that scrolling via the mouse wheel instead would skip numbers, and using the scrollbar to the side is shaky as it seems to constantly try to move towards the nearest number even when the scrollbar is being held. Either way, not a bug with NumberPicker, but perhaps an opportunity to add a flag to NumberPicker and abstract the ScrollConfiguration within it.

Bro you are the goat, thanks from the future <3