Skip to content

[SingleChildScrollView] Jitter when updating text during overscroll #145078

@teunklijn

Description

@teunklijn

Steps to reproduce

In my prodution app I have a visible stopwatch on a SingleChildScrollView. I've included sample code which has the same issue. I think it's related to #136239, but that one is already closed.

  1. run the example app
  2. try to scroll up

Expected results

The scroll position stays the same and there's no visible jitter.

Actual results

The scroll position is reset everytime the text gets updated.

Code sample

Code sample
import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const _Counter(),
            for (var i = 0; i < 15; i++)
              Container(
                height: 100,
                color: Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1),
              ),
          ],
        ),
      ),
    );
  }
}

class _Counter extends StatefulWidget {
  const _Counter();

  @override
  State<_Counter> createState() => __CounterState();
}

class __CounterState extends State<_Counter> {
  int _count = 0;

  @override
  void initState() {
    Timer.periodic(const Duration(milliseconds: 500), (timer) {
      setState(() {
        _count++;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

Screenshots or Video

Screenshots / Video demonstration

Expected behaviour

flutter_3_16.mov

Actual behaviour

flutter_3_19.mov

Logs

No response

Flutter Doctor output

Doctor output
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale nl-NL)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.2)
[✓] VS Code (version 1.87.0)
[✓] Connected device (2 available)
    ! Error: Browsing on the local area network for iPhone van Govert. Ensure the device is unlocked and attached with a cable or associated with the same
      local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listf: scrollingViewports, list views, slivers, etc.found in release: 3.19Found to occur in 3.19found in release: 3.21Found to occur in 3.21frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework teamworkaround availableThere is a workaround available to overcome the issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions