CODEWITHSUNDEEP
iosflutterdartflutter-3.0jank
aurangzaibsiddiqui
aurangzaibsiddiqui

Reputation: 21

Flutter: Soft keyboard animation is causing tremendous jank on iOS after updating from Flutter 2.2.3 to Flutter 3.0.0

Since I updated my application code from Flutter 2.2.3 to Flutter 3.0.0, I am facing tremendous jank on my application whenever the soft keyboard is opened and close.

While this jank is more visible on iOS, it is not nonexistent on Android.

Link to demo of the issue (note that this a high-end iOS device hence the jank is probably the least on it): https://user-images.githubusercontent.com/53447798/173196265-f2de6864-2e6c-4bab-9253-faac7735ece1.MP4

My research showed that this has to do with a new feature that was introduced after 2.2.3, which is "Smooth keyboard animation on iOS". You can learn more about it here: https://github.com/flutter/engine/pull/29281

As it turns out, due to the new feature, during the keyboard opening or closing animation, the MediaQuery changes several times, causing all widgets using MediaQuery to rebuild causing the jank. The issue, however, is that the widgets that I have used do not use the height parameter of MediaQuery which is changing due to the keyboard. In fact, my widgets only use the width parameter (i.e. MediaQuery.of(context).size.width) which does not change with the keyboard opening. However, MediaQuery resets completely and does not just update one aspect (i.e. height).

To fix this, moffatman suggested the following solution which allows MediaQuery to use InheritedModel and update just one aspect: https://github.com/flutter/flutter/pull/97928

However, this solution has not yet been merged to Flutter beta or stable channels so I do not know how to use it.

So my questions are as follows:

  1. Is there any other workaround for this? (Note that downgrading back to 2.2.3 is not an option as I need a lot of the new features from 3.0.0)
  2. If not, how can I use the solution suggested by moffatman? Do I have to wait or is there a reasonably easy way to use his solution in my code. (Note that my app is in production and has live users)
  3. Lastly, if all else fails, is it possible to not use this specific feature (i.e. smooth keyboard animation) from Flutter 3.0.0?

Upvotes: 1

Views: 617

Answers (0)

Related Questions