Janky frames when opening/closing keyboard

[Mayb3Nots]

General

What bug do you experience? 🐞

When a user taps on a textfield to open the keyboard the UI and raster thread will be utilize heavily. This is because each individual messages widget is being rebuilt. I have tried to wrap each message in a RepaintBoundary and KeepAliveMixin and it didn't improve performance, it keeps getting rebuilt.

On the example app (Ran in profile mode) if you override the bubbleBuilder and print('build') you will see that it rebuilds the entire ChatList widget for each frame of the keyboard animation. Over 60 times!

https://user-images.githubusercontent.com/68549184/193770023-3d273191-4d2a-4813-96bc-c9c89c2e26ee.mp4

The jank is not that obvious in the example app as it is basic, in my app where we have custom widget surrounding each message the jank is very bad (Maxed out UI and raster thread). But even if simple message and less of it the raster thread is still going over 16ms when keyboard opens/closes.

How can it be reproduced? 🤔

Run example app on profile and tap on textfield to open keyboard

What behavior is expected? 💡

It shouldn't rebuild the individual messages. It should only rebuild the list size but should not effect the messages inside.

Environment info

Please specify the flutter, flutter-chat-ui versions.

flutter: 3.3.3 flutter-chat-ui: 1.6.5

flutter doctor -v output 👇

[√] Flutter (Channel fix-issue-110645, 3.4.0-29.0.pre.44, on Microsoft Windows [Version 10.0.22000.978], locale en-MY)
    • Flutter version 3.4.0-29.0.pre.44 on channel fix-issue-110645 at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2aceb8d454 (13 days ago), 2022-09-21 17:22:56 +0800
    • Engine revision 48f9f1fe2d
    • Dart version 2.19.0 (build 2.19.0-222.0.dev)
    • DevTools version 2.17.0

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

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\samue\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

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

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.3.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.3.32825.248
    • Windows 10 SDK version 10.0.22621.0

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

[√] VS Code (version 1.71.2)
    • VS Code at C:\Users\samue\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.48.0

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 12 (API 31) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22000.978]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 105.0.5195.127
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 105.0.1343.53

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Platform

Andriod Emulator Pixel 3a

OS version API 31

Additional context

Might be related to https://github.com/flutter/flutter/pull/97928 Not sure if https://github.com/flutter/engine/pull/29281#issuecomment-1213624203 might fix this.

[demchenkoalex]

Hello! Thanks for the very detailed ticket! I will need help here, cause I am professionally iOS/React Native dev, and not sure where and when things did go so wrong it happens. Will need a help of a Flutter guru :)

[parker-sherrill]

Hoping to have this issue resolved as well, using in package in production app and the janky frames from keyboard are very noticeable.

[Luvain9]

Hello same issue here :/