Flutter Shader Examples

I collected a few examples for shaders in Flutter. Most code is written by others and rewritten / updated by me. Original sources are referenced below. Some examples below show the same shader in Flutter and in Flame engine. The goal is to demonstrate a number different techniques to integrate custom shaders in your Flutter/Flame app.

To run the demo app, you need Flutter installed. Unzip and add a platform, e.g. flutter create --platforms=macos . , then flutter run.

1. solid: solid color
2. gradient: color gradient, FlutterFragCoord().xy
3. animated_gradient: ShaderMask / RadialGradient, derived from https://api.flutter.dev/flutter/widgets/ShaderMask-class.html and https://stackoverflow.com/questions/76496575/animate-linear-gradient-background-of-container-in-flutter
4. laser: converted from https://www.shadertoy.com/view/4f2GRR
5. water: https://www.shadertoy.com/view/Ms2SD1, adapted from https://github.com/wolfenrain/flutter_shaders_example/ (Performance problems)
6. jam: https://www.shadertoy.com/view/ldfSW2, adapted from https://github.com/wolfenrain/flutter_shaders_example/
7. stars: interactive, https://www.shadertoy.com/view/XlfGRj, adapted from https://github.com/wolfenrain/flutter_shaders_example/ (Performance problems, wrong direction)
8. stars_flame: flame engine, interactive, https://www.shadertoy.com/view/XlfGRj (Performance problems)
9. mario_flame: flame engine https://www.shadertoy.com/view/XtlSD7
10. snow: timer, flutter_shaders, texture sampler, https://www.shadertoy.com/view/XlSBz1, adapted from https://github.com/wolfenrain/flutter_shaders_example/ (Performance problems)
11. glitch: flutter_shaders, texture sampler (the whole interactive app window is glitched), adapted from https://github.com/wolfenrain/flutter_shaders_example/
12. pixelate: flutter_shaders, texture sampler from https://github.com/jonahwilliams/flutter_shaders/
13. lava_flame: flame engine, Hexler KodeLife start example
14. barrel_blur: flutter_shaders, interactive, adapted from: https://github.com/renancaraujo/shaders_playground
15. overscroll: flutter_shaders, interactive, adapted from: https://github.com/renancaraujo/shaders_playground

open issues

• Rewrite snow, which does not need an Animated Sampler
• tested on macOs only, needs tests on windows / mobile / web

resources

https://docs.flutter.dev/ui/design/graphics/fragment-shaders
https://github.com/flutter/engine/blob/main/impeller/docs/shader_optimization.md

https://pub.dev/packages/flutter_shaders helpers and texture samplers

https://blog.codemagic.io/shady-flutter/
https://github.com/wolfenrain/flutter_shaders_example