Flutter animation is not smooth at first time render

Question

Why buildTransition on screen navigation even Hero animation is never smooth at first run?

How to make a prefect smooth animation always?

Kind Regards

Answer 1

You need to build with --release or --profile. If you run from IDE you'll get a --debug build by default, which is unsuitable to measure any performance metrics or animations or build output size.

flutter run --profile

More details in https://flutter.io/docs/testing/ui-performance

Answer 2

This is a known issue in flutter where you have to "warm-up" the graphic api (SkSL) first. After a third run, usually it will become smooth.

The problem happens in both iOS an Android.

For iSO, the lag usually occurs in metal api as Apple has recently dropped support for OpenGL which is usually where the Skia graphic engine is implemented.

Work around and temporary solution are found on this page.

Extreme jank on iOS/Android the first time any kind of animation or transition runs (release build) - skia shader compilation #61450

Update

Flutter has updated their official docs on this issue

Reduce shader compilation jank on mobile