Skip to content

NestedScrollView's body is not scrollable using keyboard shortcuts with the ScrollAction #159195

@kszczek

Description

@kszczek

Steps to reproduce

  1. Place a MaterialApp widget at the root of your widget tree.
  2. Place a NestedScrollView below the MaterialApp widget.
  3. Try scrolling down by pressing ctrl+down for desktop or just the down arrow for web.

Expected results

I would expect the header and then the body of the nested scroll view to be scrolled down.

Actual results

The header is scrolled down as expected, but when reaching its extent, the body is not scrolled.

Code sample

Code sample
import 'package:flutter/material.dart';

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

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (
              BuildContext context,
              bool innerBoxIsScrolled,
            ) =>
                <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                  context,
                ),
                sliver: SliverAppBar(
                  pinned: true,
                  expandedHeight: 150.0,
                  forceElevated: innerBoxIsScrolled,
                  flexibleSpace: FlexibleSpaceBar(
                    title: const Text('SliverAppBar'),
                    background: Container(color: Colors.red),
                    centerTitle: true,
                  ),
                ),
              ),
            ],
            body: CustomScrollView(
              slivers: <Widget>[
                Builder(
                  builder: (context) => SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                      context,
                    ),
                  ),
                ),
                SliverFixedExtentList(
                  itemExtent: 48.0,
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) => ListTile(
                      title: Text('Item $index'),
                    ),
                    childCount: 30,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

Screenshots or Video

Screenshots / Video demonstration

The following video shows the scrolling behavior when using a trackpad.

Scrolling a NestedScrollView using a trackpad

We'd expect similar scrolling behavior when using the arrow keys, but instead the scrolling stops when the scroll extent of the header is reached.

Scrolling a NestedScrollView using keyboard shortcuts

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.24.5, on Fedora Linux 41 (Workstation Edition) 6.11.7-300.fc41.x86_64, locale
    en_US.UTF-8)
    • Flutter version 3.24.5 on channel stable at /home/kamil/.local/apps/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision dec2ee5c1f (7 days ago), 2024-11-13 11:13:06 -0800
    • Engine revision a18df97ca5
    • Dart version 3.5.4
    • DevTools version 2.37.3

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/linux-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /usr/bin/brave-browser-stable

[✓] Linux toolchain - develop for Linux desktop
    • clang version 19.1.0 (Fedora 19.1.0-1.fc41)
    • cmake version 3.30.5
    • ninja version 1.12.1
    • pkg-config version 2.3.0

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

[✓] VS Code (version 1.95.3)
    • VS Code at /usr/share/code
    • Flutter extension version 3.100.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Fedora Linux 41 (Workstation Edition) 6.11.7-300.fc41.x86_64
    • Chrome (web)    • chrome • web-javascript • Brave Browser 131.1.73.89

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: desktopRunning on desktopf: focusFocus traversal, gaining or losing focusf: scrollingViewports, list views, slivers, etc.found in release: 3.24Found to occur in 3.24found in release: 3.27Found to occur in 3.27frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions