What is shader compilation jank and how do you fix it?
TL;DR: Shader compilation jank is a dropped frame that occurs the first time Flutter renders a new visual effect (shadow, gradient, blur) because the GPU shader must be compiled on-the-fly. Impeller (Flutter's new renderer) eliminates this by pre-compiling shaders at build time.
Full Answer
Traditional Skia-based Flutter compiles Metal/Vulkan shaders lazily at runtime. The first render of a complex effect causes a 50-300ms spike — visible as jank.
Solutions
- ▸Enable Impeller: flutter run --enable-impeller (default on iOS, opt-in on Android)
- ▸Shader warm-up: ShaderWarmUp class — render off-screen before user sees the transition
- ▸WidgetsBinding.instance.deferFirstFrame() until shaders are compiled
- ▸Profile: flutter run --profile --cache-sksl --purge-persistent-cache to identify problematic shaders
Impeller is the long-term fix. For existing Skia-based apps, capturing and bundling an SkSL shader cache (--bundle-sksl-path) pre-loads shaders at startup.
Code Examples
// First run: no shader compilation jank // Shaders pre-loaded from bundled cache
Common Mistakes
- ✗Shipping Skia-based apps without shader warm-up for complex transitions
- ✗Not testing on a physical device — simulators don't exhibit shader jank
Interview Tip
Knowing that Impeller solves this problem at the architecture level (pre-compiled offline) vs Skia (lazy JIT compilation) shows senior-level Flutter knowledge.