[android] ListView items get transformed/shrinked during fast scrolling

[delfme]

I have found out an issue with scrolling flutter ListView on android.
cc: @darshankawar

Tested on latest stable and master 3.8.0-5.0.pre.1, android 12SKQ1.211006.001, xiaomi 11 Mi Lite 5g with 90Hz refresh rate (issue occurs also if I set refresh rate to 60Hz).

Steps to Reproduce

Please run this simple Main.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<String>.generate(100, (i) => 'Item $i'),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({super.key, required this.items});
  final _textController = TextEditingController();

  final _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Android Janky Scrolling'),
        ),
        body: Center(

          child: Padding(
            padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children:  <Widget>[
                Expanded(
                  child:
                  ListView.builder(
                    itemCount: items.length,
                    prototypeItem: ListTile(
                      title:Text(items.first),
                    ),
                    itemBuilder: (context, index) {
                      return ListTile(
                        title:
                        ColoredBox(
                          color: Colors.greenAccent,
                          child:
                          Container(
                             child:Text(items[index]),
                             height: 45,
                          )
                        )
                      );
                    },
                  ),
                ),
                //Textfield Widget
                const Text('Flutter Texfield:'),
                SizedBox(height: 8),
                TextFormField(
                  controller: _textController,
                  minLines: 1,
                  maxLines: 12,
                  keyboardType: TextInputType.multiline,
                  textCapitalization:
                  TextCapitalization.sentences,
                  focusNode: _focusNode,
                  onTap: () {},
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    isDense: true,
                    hintText: "Message",
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

On fast scrolling, the list's elements get shrinked/transformed (don't maintain their fixed height).

Expected results:
List's items should keep their height fixed during scrolling. To see expected result in action, please scroll a listView on android system apps or native apps such as whatsapp/telegram and the likes.

Actual results:
On fast scrolling, the list's elements get shrinked/transformed (don't maintain their fixed height).

bad.MP4

Flutter doctor:

[✓] Flutter (Channel master, 3.8.0-5.0.pre.1, on macOS 12.2 21D49 darwin-arm64, locale en-IT)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

[exaby73]

Hello @delfme. This might be a trick of the eyes during fast scrolling. I can see the shrinking but I don't think this is Flutter doing it, but rather an optical illusion, kind of how you see the rims of a fast rotating tire slow down.

What I did is I took a screen recording of the scrolling, then slowed it down. Here's the original video, where you might notice shrinking:

Screen.Recording.2023-02-08.at.3.38.34.PM.mov

And here's one after slowing the same video down

Screen.Recording.2023-02-08.at.3.41.25.PM.mov

Since this is just a trick of the eyes, this is not an issue :) Therefore, I am closing it. Thank you

[delfme]

@exaby73 good to know it 👍

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.