Skip to content

[Docs] Adding children outside of the cache extent to ListView does not update maxScrollExtent #94925

@takassh

Description

@takassh

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. Tap the FAB.
  3. You can see the viewport scrolls to right before the last item.

Expected results:

  • scrolls to the last item when the FAB is tapped.

Actual results:

  • scrolls to right before the last item when the FAB is tapped.
2021-12-09.18.45.56.mov
Code sample
import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _scrollController = ScrollController();
  int _childCount = 50;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('app bar'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _childCount++;
          });

          WidgetsBinding.instance?.scheduleFrameCallback(
            (_) => WidgetsBinding.instance?.addPostFrameCallback(
              (_) => _scrollController.animateTo(
                _scrollController.position.maxScrollExtent,
                duration: const Duration(milliseconds: 200),
                curve: Curves.easeIn,
              ),
            ),
          );
        },
        child: const Icon(Icons.arrow_downward),
      ),
      body: SafeArea(
        child: RefreshIndicator(
          onRefresh: () {
            return Future.delayed(const Duration(seconds: 1));
          },
          child: ListView.builder(
            controller: _scrollController,
            padding: EdgeInsets.zero,
            itemCount: _childCount,
            itemBuilder: (context, index) {
              return ListTile(
                title: Center(
                  child: Text('ListTile $index'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}
Logs

Analyzing flutter_pr...                                         
No issues found! (ran in 2.4s)
[✓] Flutter (Channel stable, 2.8.0, on macOS 12.0.1 21A559 darwin-x64, locale ja-JP)
    • Flutter version 2.8.0 at /Users/takashi/fvm/versions/2.8.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (12 hours ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/takashi/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/takashi/Library/Android
    • ANDROID_SDK_ROOT = /Users/takashi/Library/Android/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 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • 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.62.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.29.0

[✓] Connected device (2 available)
    • iPhone 11 Pro (mobile) • 1D9077E4-D995-48E1-B080-F02C395F94EC • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 96.0.4664.93

notice

  • if I tap the FAB during scrolling, it works.
2021-12-09.19.03.46.mov
  • if the screen is in almost bottom area, it works.
2021-12-09.19.03.12.mov

workaround

  • add jumpTo before animateTo and wrap animateTo in addPostFrameCallback
          WidgetsBinding.instance?.scheduleFrameCallback(
            (_) => WidgetsBinding.instance?.addPostFrameCallback(
              (_) {
                _scrollController.jumpTo(
                  _scrollController.offset + Tolerance.defaultTolerance.distance,
                );
                WidgetsBinding.instance?.addPostFrameCallback(
                  (_) => _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    duration: const Duration(milliseconds: 200),
                    curve: Curves.easeIn,
                  ),
                );
              },
            ),
          );
  • or wrap it in while
 WidgetsBinding.instance?.scheduleFrameCallback(
                    (_) => WidgetsBinding.instance?.addPostFrameCallback(
                      (_) async {
                        while (!nearEqual(
                          _scrollController.position.maxScrollExtent,
                          _scrollController.offset,
                          Tolerance.defaultTolerance.distance,
                        )) {
                          await _scrollController.animateTo(
                            _scrollController.position.maxScrollExtent,
                            duration: const Duration(milliseconds: 200),
                            curve: Curves.linear,
                          );
                        }
                      },
                    ),
                  );

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listd: api docsIssues with https://api.flutter.dev/d: stackoverflowGood question for Stack Overflowf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.team-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions