Fragment shaders in Flutter: uniforms by name and sync textures

Custom shaders stop being a niche once Impeller owns the stack. The recent API work removes the worst papercuts.

Bind uniforms by name

void setUp(ui.FragmentShader shader) {
  shader.getUniformFloat('intensity').set(0.85);
}

No more counting float slots by hand — fewer off-by-one GPU bugs.

Sync textures in the same frame

final image = picture.toImageSync(
  128,
  128,
  targetFormat: ui.TargetPixelFormat.rFloat32,
);
shader.setImageSampler(0, image);

decodeImageFromPixelsSync / toImageSync remove a frame of lag when creating sampler textures. High-bit formats (up to 128-bit float) unlock serious LUTs and SDFs.

Workflow

1. Author .frag under shaders/.
2. Load via ShaderLib / asset API in docs.
3. Preview in isolation; then integrate behind a feature flag.

Pitfalls

• Skia vs Impeller coordinate differences still bite ported shaders.
• Big LUTs need memory budgets — measure, do not assume.

---

Originally published on FlutterCook. Read the latest version there — that copy is the one kept up to date.