How to remove Flutter Animation Jank/Lagging (iOS and Android)?
Flutter is an awesome framework and many of you will agree with me on that. It has helped me get my Startup up and running and save tremendous pain and hassle, but the biggest problem that I had was the animation jank/lag that occurred when I opened my for the first time.
Now in this article I will explain how to remove it and get that buttery smooth performance in your app!
In this Github repo, you can see some examples of that jank: https://github.com/flutter/flutter/issues/61450
Step 1 (The most crucial one!):
Change your flutter channel to ‘beta’ or ‘dev’ (I recommend beta since they are more reliable and the best version from that branch will be pushed to ‘stable’) by typing these two command in the command line:flutter channel beta and after thatflutter upgrade . Now let it run its update and make sure that the flutter version is greater than 2.3 by running flutter --version .
Step 2:
Connect a real device to your computer and run the app with --cache-sksl turned on to capture shaders in SkSL: flutter run --profile --cache-sksl . If the same app has been previously run without --cache-sksl, then the --purge-persistent-cache flag may be needed: flutter run --profile --cache-sksl --purge-persistent-cache .
Step3:
Now when your application starts running, try to trigger as many animations as you can especially those with the compilation jank. After you have done that, press Shift+m in your command line to write the captured SkSL shaders into a file named something likeflutter_01.sksl.json.
Step4:
Now after you have written that file, you can build your app with that SkSL warm-up.
For Android: flutter build app --bundle-sksl-path flutter_01.sksl.json or flutter build appbundle --bundle-sksl-path flutter_01.sksl.json .
For iOS: flutter build ios --bundle-sksl-path flutter_01.sksl.json or my prefered way to Archive it immediately flutter build ipa --bundle-sksl-path flutter_01.sksl.json .
Optional:
For best results, capture SkSL shaders on ACTUAL Android and iOS devices separately and build them with separate flutter_(number).sksl.json files.
The Final Result:
Now, when you open your app, the animations will be buttery smooth and there won’t be any jank.
Full documentation can be found here: https://flutter.dev/docs/perf/rendering/shader.
