I ported Chrome's rather complex smooth scrolling algorithm (see https://bit.ly/smoothscrolling)

I can clean it up a bit (make the code a bit more Dart-y) and make a PR, if using Chrome's smooth scrolling is acceptable.

/cc @gspencergoog

It seems like this is going to need a design proposal, or at least discussion, for how it would be controlled, since it should almost certainly be optional. Smooth scrolling with scroll wheels is definitely not universal behavior on desktop platforms.

Notably, Windows (UWP apps) and Mac OS have their own smooth scrolling behaviors. Linux doesn't really have a default, so I feel that using Chrome's implementation (at least on Linux) would be good enough.

For UWP, a lot of the logic can be found here (Scroller.cpp), and some keyboard scrolling logic can be found here (ScrollViewer.cpp)

Marking this as a framework issue, since I don't think it's specific to any one platform, and the solution is probably in the framework and not in the engine.

Is anyone working on this? I see this problem in the Android emulator. Using the scrollwheel leads to very erratic behavior. Sometimes it scrolls the list down, them pops back. (is not limited to webviews - also happens with listviews)

@ds84182 Your smooth scroll algorithm looks pretty good from what I can see in the GIF. Could you share your code on how you implemented it? I have flutter web project and a smooth scroll algorithm would greatly increase the user experience. As far as I can tell, every browser supports smooth scrolling and so a flutter website feels a bit odd in comparison to other native websites when being scrolled.

@ds84182 Your smooth scroll algorithm looks pretty good from what I can see in the GIF. Could you share your code on how you implemented it? I have flutter web project and a smooth scroll algorithm would greatly increase the user experience. As far as I can tell, every browser supports smooth scrolling and so a flutter website feels a bit odd in comparison to other native websites when being scrolled.

Do u have the smooth scroll algorithm can u share it ?

Reproducible on the latest master 1.21.0-6.0.pre.160.

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(
     MaterialApp(
       home: Scaffold(
         appBar: AppBar(
           title: Text("Sample"),
         ),
         body: ListView(
           children: [
             ...List.generate(200, (index) => RandomBox()),
           ],
         ),
       ),
     ),
   );

class RandomBox extends StatelessWidget {
 static const List colors = [
   Colors.red,
   Colors.green,
   Colors.yellow,
   Colors.blue,
   Colors.purple,
   Colors.black,
   Colors.orange
 ];
 static Random random = new Random();

 @override
 Widget build(BuildContext context) {
   int index = random.nextInt(7);
   return Container(
     height: 50,
     color: colors[index],
   );
 }
}

[✓] Flutter (Channel master, 1.21.0-6.0.pre.160, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.160 at /Users/markus/development/flutter_master
    • Framework revision 31ee51a302 (11 hours ago), 2020-08-03 17:27:21 -0700
    • Engine revision fa16c3d0ba
    • Dart version 2.10.0 (build 2.10.0-2.0.dev 0f0e04ec3a)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/markus/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (5 available)
    • sdk gphone x86 arm (mobile) • emulator-5554                            • android-x86    • Android 11 (API 30) (emulator)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

you can override void pointerScroll() on ScrollPosition to use animateTo() instead of forcePixels()
and track the interval between animations the same as clragons solution above

pointerScroll appears to only be called to handle PointerScrollEvent's which are scroll wheel events

you can create a customScrollPosition and CustomScrollController to use your custom scroll position.

This allows you to use any scroll physics and also touch scroll and drag

working great for me not sure of the consequences of my actions but thats usual

you can override void pointerScroll() on ScrollPosition to use animateTo() instead of forcePixels() and track the interval between animations the same as clragons solution above

pointerScroll appears to only be called to handle PointerScrollEvent's which are scroll wheel events
[...]
you can create a customScrollPosition and CustomScrollController to use your custom scroll position.

This allows you to use any scroll physics and also touch scroll and drag

working great for me not sure of the consequences of my actions but thats usual

@Mikephii
sounds interesting, mind to share a code sample of your workaround? I'd like to test it

heres a minimal example of my solution. I think this can be used by the flutter team and can easily be a boolean flag in the scroll controller. Unsure of any side effects but it works fine for me and doesnt break
touch scroll or drag or any of that.

import 'package:flutter/rendering.dart';
import 'dart:math' as math;

class ExampleSmoothScroll extends StatefulWidget {
  const ExampleSmoothScroll({
    super.key,
  });

  @override
  State<ExampleSmoothScroll> createState() => _ExampleSmoothScrollState();
}

class _ExampleSmoothScrollState extends State<ExampleSmoothScroll> {
  final ScrollController _scrollController = MyCustomSmoothScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        physics: BouncingScrollPhysics(),
        controller: _scrollController,
        itemCount: 1000,
        itemBuilder: (context, index) {
          return ListTile(
            tileColor: index % 2 == 0 ? Colors.blue : Colors.lightBlue,
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

class MyCustomSmoothScrollController extends ScrollController {
  MyCustomSmoothScrollController({
    double initialScrollOffset = 0.0,
    bool keepScrollOffset = true,
    String? debugLabel,
  }) : super(
          initialScrollOffset: initialScrollOffset,
          keepScrollOffset: keepScrollOffset,
          debugLabel: debugLabel,
        );

  @override
  ScrollPosition createScrollPosition(
    ScrollPhysics physics,
    ScrollContext context,
    ScrollPosition? oldPosition,
  ) {
    //use the customscroll position with smooth scrolling
    return CustomSmoothScrollPosition(
      physics: physics,
      context: context,
      initialPixels: initialScrollOffset,
      keepScrollOffset: keepScrollOffset,
      oldPosition: oldPosition,
      debugLabel: debugLabel,
    );
  }
}

class CustomSmoothScrollPosition extends ScrollPositionWithSingleContext {
  int previousScrollTime = DateTime.now()
      .millisecondsSinceEpoch; //used to track time between scrolls same as clragons code

  CustomSmoothScrollPosition({
    required ScrollPhysics physics,
    required ScrollContext context,
    double initialPixels = 0.0,
    bool keepScrollOffset = true,
    ScrollPosition? oldPosition,
    String? debugLabel,
  }) : super(
          physics: physics,
          context: context,
          initialPixels: initialPixels,
          keepScrollOffset: keepScrollOffset,
          oldPosition: oldPosition,
          debugLabel: debugLabel,
        );

  @override
  void pointerScroll(double delta) {
    // If an update is made to pointer scrolling here, consider if the same
    // (or similar) change should be made in
    // _NestedScrollCoordinator.pointerScroll.
    if (delta == 0.0) {
      goBallistic(0.0);
      return;
    }

    final double targetPixels =
        math.min(math.max(pixels + delta, minScrollExtent), maxScrollExtent);
    if (targetPixels != pixels) {
      goIdle();
      updateUserScrollDirection(
        -delta > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse,
      );
      final double oldPixels = pixels;
      // Set the notifier before calling force pixels.
      // This is set to false again after going ballistic below.
      isScrollingNotifier.value = true;

      //--------------------  NEW CODE STARTS HERE  --------------------
      int deltaScrollTime =
          DateTime.now().millisecondsSinceEpoch - previousScrollTime;
      int animationDuration = deltaScrollTime < 500 ? deltaScrollTime : 500;

      if (animationDuration < 32) {
        //60fps is 16ms per frame so less than 32ms is pointless as its less than 2 frames
        //also avoids calling animateTo too many times in quick succession which seems to be buggy and throws exceptions for elapsed<0  that might be related to github.com/flutter/flutter/issues/106277
        super.pointerScroll(delta);
        return;
      }
      animateTo(targetPixels,
          duration: Duration(milliseconds: animationDuration),
          curve: Curves.linear);
      previousScrollTime = DateTime.now().millisecondsSinceEpoch;
      //--------------------  NEW CODE ENDS HERE  --------------------

      //-------------------- THIS IS THE ORIGINAL FORCE PIXELS IMPLEMENTATION OF super.pointerScroll(delta) --------------------
      // forcePixels(targetPixels);
      // didStartScroll();
      // didUpdateScrollPositionBy(pixels - oldPixels);
      // didEndScroll();
      // goBallistic(0.0);
    }
  }
}

A bit salty here but why should we bother with a workaround on a thing that should just work? This issue has been live since 2019. Any official update from the flutter team regarding this?

I agree. Mouse scrolling on lists are confusing. Items simply disappear off the screen. If not numbered, it's hard to keep track on what I am looking at.

I've just published the scroll_animator package, which aims to be a direct port of Chromium's smooth scrolling algorithm (ported along with related unit tests, just to make sure it works as expected). There are some edge cases which I know about and plan to resolve in the coming days, but there's probably a bunch more of them I don't know about yet, so I wouldn't use it in production just yet, but I would be grateful for testing and bug reports. When the package is stable enough, I'll probably try to refactor the code and try to upstream it.

In regards to the previous attempts at resolving this problem, it turns out we don't have to know if the user is scrolling using a mouse wheel or a trackpad. Chromium developers solved that problem by adjusting the algorithm so it works well with small, frequent scroll deltas as well as large, infrequent scroll deltas. See this bug report for more details.

I've just published the scroll_animator package, which aims to be a direct port of Chromium's smooth scrolling algorithm (ported along with related unit tests, just to make sure it works as expected). There are some edge cases which I know about and plan to resolve in the coming days, but there's probably a bunch more of them I don't know about yet, so I wouldn't use it in production just yet, but I would be grateful for testing and bug reports. When the package is stable enough, I'll probably try to refactor the code and try to upstream it.

In regards to the previous attempts at resolving this problem, it turns out we don't have to know if the user is scrolling using a mouse wheel or a trackpad. Chromium developers solved that problem by adjusting the algorithm so it works well with small, frequent scroll deltas as well as large, infrequent scroll deltas. See this bug report for more details.

I just gave it a try but when scrolling up/down quickly, the scroll seems to stop completely every now and again. Once fixed, this packages seems like a great fix to the problem.

I just gave it a try but when scrolling up/down quickly

Yeah, I'll probably have to get a new mouse, my current one has a broken wheel, when scrolling in one direction it sporadically decides to go the other way, so I wasn't able to verify quick scrolls, I'll look into that.

Also, regarding upstreaming into Flutter, I think it would be best if Flutter provided an abstract animation factory (like the one in my package), so that third-party packages could provide alternative scroll animation implementations. Flutter could include a single default implementation, but then there would be pub packages for Mac-like or Edge-like scrolling. The recently proposed solution with just a boolean would lack that customizability.

@BennyKirschner unfortunately I wasn't able to reproduce your issue, but I've just published a new version with an additional diagnostic example, available here: https://pub.dev/packages/scroll_animator/example. If you could try to reproduce your issue while capturing this diagnostic data, I might be able to synthetically reproduce your scroll inputs and hopefully the issue itself. Also, I suggest opening an issue over at the scroll_animator repository, so we don't spam this issue.

I wanted to share a little progress update, since I've published the initial version of scroll_animator last week, quite a bit changed:

• Introduced support for programmatic scrolling with automatic animation parameters.

  Using Flutter's ScrollController.animateTo method requires explicitly providing an animation curve and duration, which can lead to inconsistencies in your app if you use programmatic scroll animations in multiple places.

  Starting with version 0.2.0, using scroll_animator's AnimatedScrollController.animateTo method, you can omit the curve and duration, and they will be determined automagically based on the scroll distance.
  This makes the API similar to the scrollTo method you might know from JavaScript. Actually, the scroll animation should feel exactly the same as in a Chromium-based browser, pixel-by-pixel.

• Introduced support for scrolling with arrows and page up/down keys (or any other custom keys)

  Although Flutter has support for scrolling with the keyboard out-of-the box, it's not really customizable, and is partly broken (try holding down an arrow key to scroll faster). With version 0.3.0, scroll_animator introduces a subclass of Flutter's default scroll action, the AnimatedScrollAction. This action respects the ScrollAnimationFactory specified by the user, and also fixes the aforementioned hold-down scroll issue.

• Improved developer experience

  Version 0.3.0 of scroll_animator introduces the AnimatedPrimaryScrollController. This widget creates and manages the AnimatedScrollController instance for you, so you don't have to worry about creating stateful widgets to store the scroll controllers. This also makes the keyboard scrolling work out-of-the box, by wrapping your subtree with a PrimaryScrollController.

  The example application in the package's README was revamped to exhaustively demonstrate all features of the package.

@kszczek, First I have to say, wonderful work with the package. It works flawlessly, and honestly it's better than some of the previous solutions. I have to ask, if it's possible for you to add support for the package scrollable_positioned_list? As it uses its own scroll controller class. Cheers!

@water-mizuu thanks for the feedback, I appreciate it!

Regarding the package you've mentioned, I've glanced over its source and it seems like it has the base ScrollController type hardcoded, so there is nothing I can do in my package to make this work. To integrate scroll_animator with this package, we'd have to be able to provide a custom ScrollController instance to the list widget or make it source the scroll controller from a PrimaryScrollController ancestor.

I'd submit a PR as it's a quite simple thing to do, but it seems like the google/flutter.widgets repository where this package lives is not very active, with the last commit dating December 2023 and multiple stale PRs. If I were you I'd just clone this package to my machine, edit this line to instantiate an AnimatedScrollController and use the path dependency syntax.

A long-term solution for this issue is to integrate the smooth scrolling logic into the base ScrollController. I've shared a design document on this topic today, but it will likely take some time before we finalize the design and land it.

I just tried @kszczek's scroll_animator package and holy crap it works perfectly. It feels like proper native scrolling instead of feeling like some bad mobile port.
Desktop flutter apps never really felt great to me and now I realize that scrolling was playing a big part in that. But this just works perfectly and I'm so amazed. Thank you so much for the hard work @kszczek!

Just cross-linking to a related issue over on the W3C side: w3c/uievents#337

I get why this is currently blocked for web, but is there anything preventing this from being implemented for desktop platforms?

I get why this is currently blocked for web

I don't think differentiating between trackpad and mouse wheel events should be considered a blocker for web/desktop implementation. In fact, I believe the reason stated for this blockage is a misunderstanding.

I've mentioned this previously, but it's worth reiterating: some years ago, Chromium developers also implemented a heuristic for differentiating between trackpad and mouse wheel inputs. However, this approach caused more issues than it resolved. So, instead of disabling scroll smoothing specifically for trackpads, Chromium developers improved the scroll smoothing algorithm to handle high-frequency, low-delta inputs better (see https://issues.chromium.org/issues/41210665#comment16).

All of the above is highlighted in the scroll_animator's readme:

Trackpads typically provide precise and frequent scroll deltas, which often leads to the assumption that scroll smoothing isn't necessary. However, some trackpads can produce larger, less frequent deltas, similar to mouse wheels. Therefore, this package handles all scroll inputs without making assumptions based on the pointer type.

See this Chromium bug for discussion on this topic.

As described above, scroll_animator handles trackpad and mouse wheel inputs identically, and yet scrolling behaves as expected (at least on Linux and Windows - I haven't tested this on a MacBook's trackpad yet, so feedback on its behavior would be greatly appreciated!).

I was in the process of upstreaming my work into Flutter last year, but got overwhelmed with other work. I plan to get back to this soon though, here's a rough roadmap:

1. Design an API for implementing smooth scrolling algorithms (done - https://flutter.dev/go/smoothing-discrete-scroll-inputs)
2. Refactor some existing Flutter components to make them compatible with the new API, as outlined in the doc.
3. Implement and expose the bare API, without any actual implementations.
4. Convert scroll_animator package into a "catalogue" of scroll smoothing algorithms - initially including Chrome and MS Edge algorithms (IIRC Windows UWP scroll smoothing algo is open source, so should be easy to port also).
5. Implement a platform-agnostic scroll smoothing algorithm and include it in the framework(?)

(although knowing that a trackpad is used for scrolling is still useful info. It would allow us to implement fling gestures. But its still not a blocker - only a cherry on top)

It's really bad right now, and I don't get why this was downgraded from P1 to P2. It definitely deserves highest priority and should be considered a severe bug.
There's no real fix available that does not make the UX significantly worse in other spots. All proposed seem to break something or are a pain to implement consistently.
An issue this bad really stops devs from using Flutter in any serious project that's supposed to run on any of the Desktop platforms. Really needs a fix

iapicca Now it looks like it's better not to target for web and Windows. Every app has scrollable components but it's very unconfortable to scroll with mouse and this issue still remains open. After 6 years