Photo by Omar Al-Ghossen via Unsplash

Flutter & its ‘poor’ iOS performance

Flutter’s not all fun and games, the current drama on ‘iOS jank’ is causing lots of developers to either stay away from Flutter or convert their existing Flutter apps to something else. Should you do too, or are people blowing this issue out of proportion?

My feed has been blowing up these last few weeks or so. Whether it’s Twitter, Reddit, or Youtube, everyone’s talking about this so-called ‘iOS jank’ Flutter issue. For those of you that didn’t see it yet, click here to check out the issue (which is one of many).
In short: Flutter apps on iOS are having a lot of issues playing animations for the first time. Even something as simple as a default page transition can be stuttery at first, causing a lot of developers to question whether they should put their Flutter apps in production in the first place. Performance on iOS just seems off, so developers are turning to other cross-platform solutions, going (back) to native development, or are considering something like Kotlin Multiplatform.

How does the issue look? Just check out the video below, notice how the animation is stuttery at first but is smooth later on:

Thanks to Dan Reynolds

What is ‘jank’?

A lot of developers are currently talking about ‘iOS jank’, ‘animation jank’, etc., but what is jank in the first place?

Think of an animation when it’s not running smooth. It can be stuttery or even freeze for a longer period of time: jank! When Flutter’s running at 60 frames per second, each frame has a specific time in which the framework needs to render the UI. All is good and buttery smooth when the work can be done within the specified amount of time, but if the rendering time exceeds the time available per frame, the framework will start skipping frames. That’s basically what’s causing jank! Flutter posted a nice video on this right here:

‘Jank’ starts at 1:52

The issue on iOS

So, did we always have this issue on iOS? Definitely not! The issues started when Flutter released version 1.17 in May of 2020. This version introduced the usage of Metal on iOS, which became the recommended API for low-level rendering over the previously used OpenGL. It looked promising: improving performance on iOS by a staggering 50%, less usage of the CPU & GPU, it was good stuff! With a lesser-known caveat that became clear later on: the iOS jank.

When an animation is triggered, its resulting shader is cached. In short: this means the animation might not be as smooth the first time but will be smooth every other time after that. On Android, the caching is done after the animation is triggered for the first time ever. This means when you install a Flutter app and then trigger an animation, it’ll stay in cache after that (clearing memory and app updates aside). This was also how it was done on iOS when Flutter made use of OpenGL.
Now that Flutter makes use of Metal on iOS, the caching of shaders is a little different. Instead of compiling and caching the shaders when an animation is triggered for the first time ever, it is now compiled and then cached after each app launch. This results in more jank on iOS devices, even on Apple’s latest and greatest iPhones. Damn!

What about the drama?

These last weeks looked more like your typical soap opera than actually developing some cool stuff using Flutter, but why? If you read the above, you noticed the issue has been there since May 2020, close to a year now. Why is this becoming an issue now? Maybe precisely because of that: it’s been there since May 2020, almost a year now. People are finding this a major issue in the Flutter framework, blocking them from pushing updates, putting Flutter apps in production in the first place, or even consider whether to make an app using Flutter at all. They’re getting impatient and having mixed feelings about responses from the Flutter team. Locking a Github issue because all the responses were distracting, or a response on Reddit causing people to either rant over one side of that story, or the other. People want answers and estimations, and I can’t blame them…

Should you stay away from Flutter?

It’s bad, there’s no denying that, but I do have to state that we have a couple of Flutter apps in production and are still continuing to work on these projects, hiring new people, and even considering new projects. Flutter has issues, yes, but our apps don’t heavily rely on animations. Apart from some page transitions and modal sheet animations, there’s not a lot going on in our apps, so we seem to be managing the current issue pretty well. Flutter has potential, and even though I understand where the drama’s coming from, I’m still convinced Flutter has a bright future and we’ll keep investing in it.

Keep it going guys, we know you’re listening! 🐦

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store