Skip to content

Fling-scrolling is slow unless you swipe precisely vertically #120345

@gnprice

Description

@gnprice

When trying to scroll rapidly through a list, the fastest you can go is much slower if you swipe at an angle and not straight up or down: about 15%-30% less initial speed, and 20%-50% less total distance on a single fling, for a range of likely angles.

Swiping at an angle is the most natural motion for many ways of using a phone, especially when using the thumb to scroll. And Android native scrolling (*) does not share this behavior: swiping at an angle can reach the same top speeds as swiping precisely vertically. As a result, many users are accustomed to scrolling this way, and the way an app responds when they do is their primary experience of trying to scroll in the app.

((*) I mention Android because that's where I've tested. It's possible that iOS or other platforms share Flutter's behavior here, or Android's, or do something else.)

This is one of several issues that combine to produce user feedback that scrolling feels sluggish and unresponsive in the default scrolling behavior used on Android. The symptoms naturally blend together until you investigate closely, so here's the others I know of for cross-reference:

Steps to Reproduce

  1. Run the platform_tests/scroll_overlay app on an Android device. (This may be the same on iOS and other platforms too, but I haven't yet tested that.)

  2. In lib/main.dart, delete the line itemCount: 1000,, in order to avoid Scroll protocol assumes ballistic scroll physics, and ClampingScrollPhysics isn't ballistic #120338. Reload.

  3. Scroll with a fling gesture: swipe rapidly upward and release. Wait a couple of seconds for the scroll to come to a stop.

  4. Observe how far the scroll went, as shown by the numbered items in the Android- and Flutter-driven scrolling lists.

  5. Scroll back to the top.

  6. Repeat step 2, but this time swipe up at an angle. For example, swipe rapidly from about the lower-left corner of the screen to the upper-right corner.

    • You may find this a much more natural gesture than swiping straight upward, especially if you use your thumb. (At least it is for me, and others I've observed with this repro.)
  7. Repeat step 3.

Expected results:

Swiping at top speed should cause the list to scroll equally far whether you do it straight vertically up (which can be natural when using the index finger) or up at an angle (which is natural when using the thumb, and in many postures with the index finger.)

Actual results:

The Flutter list scrolls much less far when swiping at an angle than it does when swiping straight up.

The Android list, on the other hand, scrolls the same distance in both cases, or nearly so. (If it doesn't, try again but swiping faster. There's a certain maximum fling distance no matter how hard you swipe, and it's the same whether straight up or at an angle. The total numbers may get slightly smaller at an angle, because they include the initial portion when your finger was still on the screen performing a drag, and that part is shorter when at an angle.)

Specifically:

  • Swiping straight up, I see "Android 94" and "Flutter 90" at the top of the screen. (The remaining discrepancy in this case is ClampingScrollSimulation decays sooner and goes less far than native Android scrolling #119875.)
  • Swiping diagonally up at roughly a 30-degree angle from vertical (from about one corner to the opposite corner, on my phone in portrait mode), I see "Android 93" next to "Flutter 78".
  • Swiping diagonally up at roughly a 45-degree angle, I see "Android 90" next to "Flutter 51".

This represents about a 19% reduction in the 30-degree case and a 56% reduction in the 45-degree case, compared to straight up. (By my calculations, using the fact that item N is 40+N logical pixels high.)

Logs
$ flutter analyze
Analyzing scroll_overlay...                                             
No issues found! (ran in 0.8s)
$ flutter doctor -v
[✓] Flutter (Channel main, 3.8.0-8.0.pre.13, on Debian GNU/Linux 10 (buster) 4.19.0-23-amd64, locale en_US.UTF-8)
    • Flutter version 3.8.0-8.0.pre.13 on channel main at /home/greg/n/flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2303f42250 (3 hours ago), 2023-02-08 14:24:12 -0500
    • Engine revision cc4ca6a06a
    • Dart version 3.0.0 (build 3.0.0-215.0.dev)
    • DevTools version 2.21.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /home/greg/Android/Sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /home/greg/lib/android-studio-2020.3.1.24/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 7.0.1-8+deb10u2 (tags/RELEASE_701/final)
    • cmake version 3.13.4
    • ninja version 1.8.2
    • pkg-config version 0.29

[✓] Android Studio (version 2022.1)
    • Android Studio at /home/greg/lib/android-studio-2020.3.1.24
    • Flutter plugin version 71.2.4
    • Dart plugin version 221.6096
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] Android Studio (version 2021.2)
    • Android Studio at /opt/android-studio
    • Flutter plugin version 71.1.2
    • Dart plugin version 212.5744
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] VS Code (version 1.75.0)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • Pixel 5 (mobile) • 08171FDD40025F • android-arm64  • Android 13 (API 33)
    • Linux (desktop)  • linux          • linux-x64      • Debian GNU/Linux 10 (buster) 4.19.0-23-amd64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: scrollingViewports, list views, slivers, etc.found in release: 3.7Found to occur in 3.7found in release: 3.8Found to occur in 3.8frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions