Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NestedScrollView instantaneous jump when body starts to scroll #84128

Open
MinseokKang003 opened this issue Jun 7, 2021 · 6 comments
Open

NestedScrollView instantaneous jump when body starts to scroll #84128

MinseokKang003 opened this issue Jun 7, 2021 · 6 comments
Labels
f: scrolling Viewports, list views, slivers, etc. found in release: 2.2 Found to occur in 2.2 found in release: 2.3 Found to occur in 2.3 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team

Comments

@MinseokKang003
Copy link 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = <String>['Tab 1', 'Tab 2'];
    return DefaultTabController(
      length: _tabs.length, // This is the number of tabs.
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverToBoxAdapter(
                child: SizedBox(
                  height: 250,
                ),
              ),
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('Books'),
                  pinned: true,
                  expandedHeight: 150.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: _tabs.map((String name) {
              return SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context) {
                    return CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: 48.0,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

NestedScrollView shows weird behaviour when some sliver(SliverToBoxAdapter in this case) is above SliverOverlapAbsorber .
When body starts to scroll slightly, its scroll speed gets faster and scrolls further than expected.
I was able to reproduce this behaviour in several devices.
Above is a reproducible code.

Hope I didn't violate any community rules, since this is my first issuing. Thanks!
@MinseokKang003 MinseokKang003 changed the title NestedScrollView Instantaneous jump when start dragging body NestedScrollView instantaneous jump when body starts to scroll Jun 7, 2021
@TahaTesser TahaTesser added the in triage Presently being triaged by the triage team label Jun 8, 2021
@TahaTesser
Copy link
Member

TahaTesser commented Jun 8, 2021 •
edited

Hi @MinseokKang003
Can you please provide your flutter doctor -V and screen recording of the behavior

SliverToBoxAdapter pops if I scroll the body, since it has fixed size, it is expected
Thank you

@TahaTesser TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 8, 2021
@MinseokKang003
Copy link
Author

flutter doctor -v

[√] Flutter (Channel stable, 2.2.1, on Microsoft Windows [Version 10.0.18363.1500], locale ko-KR)
    • Flutter version 2.2.1 at D:\app\flutter
    • Framework revision 02c026b03c (12 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at D:\app\android-sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_SDK_ROOT = D:\app\android-sdk
    • Java binary at: D:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

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

[√] Android Studio (version 4.1.0)
    • Android Studio at D:\Program Files\Android\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 1.8.0_242-release-1644-b01)

[√] Connected device (3 available)
    • SM G965N (mobile) • 211171a60b057ece • android-arm64  • Android 10 (API 29)
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 91.0.4472.77
    • Edge (web)        • edge             • web-javascript • Microsoft Edge 91.0.864.41

• No issues
github_nestedscrollview_issue.mp4

NestedScrollView's body starts to scroll a little bit more than I expected. I'm not sure if this is an expected behavior.
Also found out this is irrelevant to SliverOverlapObsorber and SliverOverlapInjector.
Thanks!
@TahaTesser

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 8, 2021
@TahaTesser
Copy link
Member

TahaTesser commented Jun 9, 2021 •
edited

Hi @MinseokKang003
Thanks for the video, the issue is more clear now.

Yes, I can see the same behavior, in fact, my testing body scrolls too much even I scroll slightly to snap top, Tested on Samsung device

2021_06_09_12_46_09.mp4

On Oneplus 8, the body scrolls even faster and unexpectedly

21-06-09-13-04-58.mp4
stable master
❌ ❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v 
[✓] Flutter (Channel stable, 2.2.1, on Microsoft Windows [Version 10.0.19043.1052], locale en-US)
    • Flutter version 2.2.1 at C:\Users\Taha\Code\flutter_stable
    • Framework revision 02c026b03c (13 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\openjdk\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 1.8.0-262-b10)
    • All Android licenses accepted.

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

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.0)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31321.278
    • Windows 10 SDK version 10.0.19041.0

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64    • Microsoft Windows [Version 10.0.19043.1052]
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 91.0.4472.77
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 91.0.864.41

! Doctor found issues in 1 category.
[✓] Flutter (Channel master, 2.3.0-17.0.pre.275, on Microsoft Windows [Version 10.0.19043.1052], locale en-US)
    • Flutter version 2.3.0-17.0.pre.275 at C:\Users\Taha\Code\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1694188e21 (5 hours ago), 2021-06-09 02:29:02 -0400
    • Engine revision 132669b021
    • Dart version 2.14.0 (build 2.14.0-189.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_SDK_ROOT = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • All Android licenses accepted.

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

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.0)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31321.278
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.2.0)
    • Android Studio at C:\Users\Taha\Code\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.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.1
    • Flutter plugin version 57.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.23.0

[✓] Connected device (5 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86     • Android 11 (API 30) (emulator)
    • Windows (desktop)       • windows       • windows-x64     • Microsoft Windows [Version 10.0.19043.1052]
    • Windows (UWP) (desktop) • winuwp        • windows-uwp-x64 •
    • Chrome (web)            • chrome        • web-javascript  • Google Chrome 91.0.4472.77
    • Edge (web)              • edge          • web-javascript  • Microsoft Edge 91.0.864.41

• No issues found!

✅ : No Issue ❌: Issue reproduce

Can you please confirm this is the issue?

Thank you

@TahaTesser TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 9, 2021
@MinseokKang003
Copy link
Author

Yes, I confirm that is the issue. Thanks for checking out.

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 9, 2021
@TahaTesser
Copy link
Member

Hi @MinseokKang003
To confirm it's just not Android tried on iOS, same results, framework issue. Although it is worse on Oneplus 8, it could that it has a 90hz display?

minimal code sample 
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<String> _tabs = <String>['Tab 1', 'Tab 2'];
    return DefaultTabController(
      length: _tabs.length, // This is the number of tabs.
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverToBoxAdapter(
                child: SizedBox(
                  height: 250,
                ),
              ),
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('Books'),
                  pinned: true,
                  expandedHeight: 150.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: _tabs.map((String name) {
              return SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context) {
                    return CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: 48.0,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

iOS

RPReplay_Final1623309300.mov

Android

#84128 (comment)

flutter doctor -v 
[✓] Flutter (Channel stable, 2.2.1, on macOS 11.4 20F71 darwin-x64, locale
    en-GB)
    • Flutter version 2.2.1 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 02c026b03c (2 weeks ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5154h
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.8+10-b944.6916264)

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (3 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS
      15.0
    • macOS (desktop)        • macos                     • darwin-x64     •
      macOS 11.4 20F71 darwin-x64
    • Chrome (web)           • chrome                    • web-javascript •
      Google Chrome 91.0.4472.77

• No issues found!

@TahaTesser
Copy link
Member

cc: @Piinks

@TahaTesser TahaTesser added f: scrolling Viewports, list views, slivers, etc. found in release: 2.2 Found to occur in 2.2 found in release: 2.3 Found to occur in 2.3 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on and removed in triage Presently being triaged by the triage team labels Jun 10, 2021
@goderbauer goderbauer added the P2 Important issues not at the top of the work list label Apr 20, 2022
@flutter-triage-bot flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
f: scrolling Viewports, list views, slivers, etc. found in release: 2.2 Found to occur in 2.2 found in release: 2.3 Found to occur in 2.3 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@goderbauer @TahaTesser @MinseokKang003