Search code examples
flutterflutter-listview

Flutter ListView items move up and down after scrolling finishes following Flutter update

I recently updated my Flutter SDK to the latest version and noticed an unusual behavior with my ListView. After the list finishes scrolling, the list items move up and down slightly, which wasn't happening before the update. How can I fix this?

flutter doctor -v

`[√] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.19045.4412], locale en-US)
    • Flutter version 3.19.3 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (3 months ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at C:\Users\User\AppData\Local\Android\Sdk
    • Platform android-34, build-tools 33.0.2
    • Java binary at: E:\android studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2021.1)
    • Android Studio at E:\android studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[√] VS Code (version 1.89.1)
    • VS Code at C:\Users\User\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.90.0`

I've tried Updated all dependencies using flutter pub get. Reviewed Flutter's release notes for breaking changes related to scrolling behavior.

there is a Sample video for this issue:

enter image description here

Solution

  • It's not unusual behavior at all, it's intended

    What we are seeing is an over scroll indication, android OS was using a Glowing over scroll indication behavior:

    When you are scrolling and there's no more items a rounded area will appear above the presented list indicating that No More Items

    it's moved to be Stretching over scroll indication:

    When you are scrolling and there's no more items The presented list will stretches up or down depending on your scroll direction indicating No More Items

    If you prefer to use the glowing effect, just wrap your scroll view widget by a scroll Configuration widget.

    ScrollConfiguration(
  behavior: ScrollBehavior(),
  child: GlowingOverscrollIndicator(
    axisDirection: AxisDirection.up,
    color: Colors.green,
    child: ListView.builder(
      itemCount: 5,
      itemBuilder: (context,index)
      {
        return ListTile(
          title: Text('Tile $index')
        );
      },
    ),
  ),
)