Skip to content

Unexpected behaviour of SliverAppBar in NestedScrollView on Mouse Scroll #55362

@royarg02

Description

@royarg02

I'm attempting to build a webpage using NestedScrollView. But I'm encountering various issues when scrolling by mouse wheel:

  • SliverAppBar instantly collapses (pinned: true) or disappears (floating: true) on single mouse scroll tick.
  • floating: true does not "float" the SliverAppBar, even after setting snap: true, unlike NestedScrollView does not support a floating app bar #17518.
  • Keeping SliverOverlapAbsorber/SliverOverlapInjector never collapses SliverAppBar when pinned and floating are both set to true (Removing it fixes this issue).

Except for the last issue and #17518, the above-mentioned issues are not exhibited when mouse hold-and-drag is used to scroll the NestedScrollView.

Steps to Reproduce

  1. Run flutter create bug.
  2. Update main.dart as follows: ...
import 'dart:math' as math;

import 'package:flutter/material.dart';

var rnd = math.Random(602);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, isInnerBoxScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                pinned: true,
                // floating: true,
                // snap: true,
                expandedHeight: 500.0,
                flexibleSpace: FlexibleSpaceBar(
                  title: Text(widget.title),
                ),
              ),
            ),
          ];
        },
        body: Builder(
          builder: (context) {
            return CustomScrollView(
              slivers: [
                SliverOverlapInjector(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                ),
                SliverFixedExtentList(
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return Container(
                        color: Colors
                            .primaries[rnd.nextInt(Colors.primaries.length)],
                        alignment: Alignment.center,
                        child: Text('Element $index'),
                      );
                    },
                    childCount: 40,
                  ),
                  itemExtent: 200.0,
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
Logs
[  +25 ms] executing: [/home/anurag/flutter_master/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +80 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] f35b673f2b7ea7800c97d9ec096153fcca6091f2
[   +1 ms] executing: [/home/anurag/flutter_master/] git describe --match *.*.* --first-parent --long --tags
[  +35 ms] Exit code 0 from: git describe --match *.*.* --first-parent --long --tags
[        ] 1.18.0-dev.5.0-82-gf35b673f2
[  +33 ms] executing: [/home/anurag/flutter_master/] git rev-parse --abbrev-ref --symbolic @{u}
[  +12 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/master
[        ] executing: [/home/anurag/flutter_master/] git ls-remote --get-url origin
[  +13 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[ +122 ms] executing: [/home/anurag/flutter_master/] git rev-parse --abbrev-ref HEAD
[  +17 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] master
[ +156 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +8 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +44 ms] executing: /home/anurag/Android/Sdk/platform-tools/adb devices -l
[ +154 ms] List of devices attached
                    192.168.31.70:5555     device product:aosp_tissot model:Mi_A1 device:tissot transport_id:1
[  +19 ms] Artifact Instance of 'AndroidMavenArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +6 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +504 ms] Generating
/media/D/AndroidStudioProjects/snap_on_scroll/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistran
t.java
[ +328 ms] Launching lib/main.dart on Chrome in debug mode...
[ +201 ms] Updating assets
[ +210 ms] Syncing files to device Chrome...
[ +141 ms] Generating
/media/D/AndroidStudioProjects/snap_on_scroll/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistran
t.java
[ +105 ms] <- reset
[  +20 ms] /home/anurag/flutter_master/bin/cache/dart-sdk/bin/dart
/home/anurag/flutter_master/bin/cache/artifacts/engine/linux-x64/frontend_server.dart.snapshot --sdk-root
/home/anurag/flutter_master/bin/cache/flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names
-Ddart.developer.causal_async_stacks=true --output-dill /tmp/flutter_tool.RSGRGE/app.dill --libraries-spec
file:///home/anurag/flutter_master/bin/cache/flutter_web_sdk/libraries.json --packages
/media/D/AndroidStudioProjects/snap_on_scroll/.packages -Ddart.vm.profile=false -Ddart.vm.product=false
--bytecode-options=source-positions,local-var-info,debugger-stops,instance-field-initializers,keep-unreachable-code
,avoid-closure-call-instructions --enable-asserts --track-widget-creation --filesystem-root
/tmp/flutter_tools.REABWD --filesystem-scheme org-dartlang-app --initialize-from-dill build/cache.dill --platform
file:///home/anurag/flutter_master/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
[  +19 ms] <- compile org-dartlang-app:///web_entrypoint.dart
[+27336 ms] Syncing files to device Chrome... (completed in 27,602ms, longer than expected)
[   +2 ms] Synced 21.6MB.
[   +1 ms] <- accept
[ +508 ms] [CHROME]:
[   +1 ms] [CHROME]:DevTools listening on
ws://127.0.0.1:38443/devtools/browser/80ca58d1-ecf2-4800-ab22-6679a6d28d3d
[+5565 ms] Debug service listening on ws://127.0.0.1:42357/YvfFBa7bUgE=

[+1537 ms] Debug service listening on ws://127.0.0.1:42357/YvfFBa7bUgE=
[   +3 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[        ] been thoroughly tested in production environments.
[        ] For more information see https://flutter.dev/web
[   +3 ms] 🔥  To hot restart changes while running, press "r". To hot restart (and refresh the browser), press
"R".
[   +3 ms] For a more detailed help message, press "h". To quit, press "q".

[✓] Flutter (Channel master, v1.18.0-6.0.pre.82, on Linux, locale en_US.UTF-8)
    • Flutter version 1.18.0-6.0.pre.82 at /home/anurag/flutter_master
    • Framework revision f35b673f2b (3 days ago), 2020-04-19 02:45:01 +0530
    • Engine revision a5e0b2f2f2
    • Dart version 2.9.0 (build 2.9.0-1.0.dev 5b19445d9c)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /home/anurag/Android/Sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /home/anurag/Android/Sdk
    • Java binary at: /snap/android-studio/88/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /opt/brave.com/brave/brave

[✓] Linux toolchain - develop for Linux desktop
    • clang++ 6.0.0
    • GNU Make 4.1

[✓] Android Studio (version 3.6)
    • Android Studio at /snap/android-studio/88/android-studio
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

 
[✓] Connected device (4 available)            
    • Mi A1      • 192.168.31.70:5555 • android-arm64  • Android 10 (API 29)
    • Linux      • Linux              • linux-x64      • Linux
    • Chrome     • chrome             • web-javascript • Brave Browser 81.1.7.98 unknown
    • Web Server • web-server         • web-javascript • Flutter Tools

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1High-priority issues at the top of the work lista: desktopRunning on desktopa: mouseIssues related to using a mouse or mouse supportcustomer: web10f: scrollingViewports, list views, slivers, etc.found in release: 1.17Found to occur in 1.17found in release: 1.18Occurs in 1.18frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions