Jittery deformation of text when stretching on overscroll

[MaxYablochkin]

#91605

Screenrecorder-2023-06-25-23-52-06-523.mp4

When there's text inside a scrollable that gets stretched to show overscroll, the text suffers from visible deformations with a jittery effect.

(To see the issue, try viewing the video full-screen.)

Proposal

Is it possible to improve text behavior when stretched via Paragraph?

[dam-ease]

Hi @MaxYablochkin. Can you please provide a minimal complete reproducible code sample that reproduces this text deformation?

[MaxYablochkin]

Okay, I'll throw in my example, but this is reproducible with all lists that can stretch according to Android (Material You).

Sample Code

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return Dialog(
                  insetPadding:
                      EdgeInsets.symmetric(horizontal: 40, vertical: 60),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Padding(
                            padding: EdgeInsets.fromLTRB(25, 20, 0, 15),
                            child: Text(
                              'Title',
                              style: Theme.of(context).textTheme.headlineSmall,
                            ),
                          ),
                        ],
                      ),
                      Divider(height: 0.0),
                      Expanded(
                        child: Scrollable(
                          viewportBuilder: (context, position) {
                            return Scrollbar(
                              child: ListView.builder(
                                itemCount: 150,
                                padding: EdgeInsets.only(left: 25.0),
                                itemBuilder: (context, index) {
                                  return Text('Line $index');
                                },
                              ),
                            );
                          },
                        ),
                      ),
                      Divider(height: 0.0),
                      Padding(
                        padding: EdgeInsets.all(15.0),
                        child: OverflowBar(
                          alignment: MainAxisAlignment.end,
                          spacing: 8,
                          children: [
                            TextButton(
                              onPressed: () {},
                              child: Text('Decline'),
                            ),
                            TextButton(
                              onPressed: () {},
                              child: Text('Accept'),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: Text('Open Dialog with Scrollable'),
        ),
      ),
    );
  }
}

flutter doctor

[✓] Flutter (Channel master, 3.12.0-10.0.pre.33, on Microsoft Windows [Version 10.0.22621.1848], locale ru-UA)
    • Flutter version 3.12.0-10.0.pre.33 on channel master at C:\Flutter-SDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b2e9501317 (22 hours ago), 2023-06-25 11:39:29 -0400
    • Engine revision 593e1d9a9c
    • Dart version 3.1.0 (build 3.1.0-246.0.dev)
    • DevTools version 2.24.0

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\yablo\AppData\Local\Android\sdk
    • Platform android-TiramisuPrivacySandbox, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

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

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.5.33516.290
    • Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2022.2)
    • Android Studio at C:\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 17.0.6+0-b2043.56-9586694)

[✓] IntelliJ IDEA Community Edition (version 2023.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.2.1
    • Flutter plugin version 74.0.4
    • Dart plugin version 231.9161.14

[✓] VS Code (version 1.79.2)
    • VS Code at C:\Users\yablo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.66.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.1848]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 114.0.5735.134
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 114.0.1823.41

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

[dam-ease]

Thanks for filing this issue. I am able to reproduce this on the latest master and stable channels. Only reproducible on Android devices and using material3.

flutter doctor -v

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-arm64, locale
    en-NG)
    • Flutter version 3.10.5 on channel stable at /Users/dammya/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (12 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2021.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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile) • emulator-5554                        •
      android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro (mobile)    • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)           • macos                                •
      darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)              • chrome                               •
      web-javascript • Google Chrome 114.0.5735.133

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

• No issues found!

[✓] Flutter (Channel master, 3.12.0-10.0.pre.35, on macOS 13.4 22F66 darwin-arm64, locale en-NG)
    • Flutter version 3.12.0-10.0.pre.35 on channel master at /Users/dammya/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c7f82a1ca2 (6 hours ago), 2023-06-25 23:44:09 -0400
    • Engine revision 88ff46e1ef
    • Dart version 3.1.0 (build 3.1.0-246.0.dev)
    • DevTools version 2.24.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2021.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.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile) • emulator-5554                        • android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro (mobile)    • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)           • macos                                • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)              • chrome                               • web-javascript • Google Chrome 114.0.5735.133

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

• No issues found!

[MaxYablochkin]

@dam-ease
Example with Recycler View native scrolling, which stretches the text without jitter and text deformation. It would be very preferable to see this in Flutter.

Screenrecorder-2023-06-26-21-39-24-222.mp4