Flutter Shader Examples

I collected a few examples for shaders in Flutter. Most code is originaly from 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. On Flutter, shaders are hot-reloaded!

To run the demo app, you need Flutter. Clone this repository with git or download and unzip it 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 by ctrst
5. water: https://www.shadertoy.com/view/Ms2SD1 by Alexander Alekseev aka TDM, CC BY-NC-SA 3.0, adapted from https://github.com/wolfenrain/fluttershadersexample/ (performance issues) LICENSE
6. jam: https://www.shadertoy.com/view/ldfSW2 by srtuss, adapted from https://github.com/wolfenrain/fluttershadersexample/ (Android: performance issues) LICENSE
7. stars: interactive, https://www.shadertoy.com/view/XlfGRj by Pablo Roman Andrioli, MIT License, adapted from https://github.com/wolfenrain/fluttershadersexample/ (performance issues) LICENSE
8. stars_flame: flame engine, interactive, https://www.shadertoy.com/view/XlfGRj by Pablo Roman Andrioli, MIT License (performance issues)
9. mario_flame: flame engine https://www.shadertoy.com/view/XtlSD7 by Krzysztof Narkowicz @knarkowicz (Android: screen size issue)
10. snow: timer, fluttershaders, texture sampler, https://www.shadertoy.com/view/XlSBz1 by antoineMoPa, adapted from https://github.com/wolfenrain/fluttershaders_example/ LICENSE
11. glitch: fluttershaders, texture sampler (the whole interactive app window is glitched), adapted from https://github.com/wolfenrain/fluttershaders_example/ LICENSE
12. pixelate: fluttershaders, texture sampler from https://github.com/jonahwilliams/fluttershaders/ LICENSE
13. lava_flame: flame engine, Hexler KodeLife start example
14. barrelblur: fluttershaders, interactive, adapted from: https://github.com/renancaraujo/shaders_playground by Renan C. Araújo
15. overscroll: fluttershaders, interactive, adapted from: https://github.com/renancaraujo/shadersplayground bvy Renan C. Araújo

open issues

• Rewrite snow, which does not need an Animated Sampler
• tested on macOS, needs tests on other platforms
• NEW (0.3.0) compiles on Android (tested on Samsung Galaxy A26 5G and even on a Moto G8 Plus)
• Some shaders need optimisation (see notes above)

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://fluttershaders.com/
https://blog.codemagic.io/shady-flutter/
https://github.com/wolfenrain/fluttershadersexample