Flutter | Stunning Animations with Custom Fragment Shaders

In this article, we will try to create an animation using GLSL within Flutter. Along with the Flutter/Dart side of the program, I will also cover the GLSL asset creation process in detail. The animation we expect to see at the end will look like the one below. Let’s get started!

First, let’s start with the shader side. Let’s create this file under the main directory of our project.

assets/shaders/burn.frag

Let’s add the following block to the pubspec.yaml file so that the project can see the shader asset.

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/

  shaders:
    - assets/shaders/burn.frag

Burning Fade Out Shader Animation

You can access the entire shader code from the relevant repo at the end of the article. Let’s start examining each function in the code.

1. isTextureEmpty

bool isTextureEmpty(sampler2D tex, vec2 uv) {
    vec4 txt = texture(tex, uv);
    return txt.a == 0.0 && txt.rgb == vec3(0.0);
}

It samples the texture at the given UV coordinates and returns true if:

— — — — → The alpha (txt.a) is 0.0 (completely transparent).

— —— — → The RGB values are (0.0, 0.0, 0.0) (black).

This helps determine whether the target image contains valid content or is just a blank texture.

2. textureSource

vec4 textureSource(sampler2D textureSampler, vec2 uv) {
    return texture(textureSampler, uv);
}

Provides a consistent way to sample textures, making it easier to modify texture sampling behavior in the future. Simply calls texture(textureSampler,uv) and returns the sampled color.

3. hash

float hash(vec2 p) {
    vec3 p2 = vec3(p.xy, 1.0);
    return fract(sin(dot(p2, vec3(37.1, 61.7, 12.4))) * 3758.5453123);
}

Generates a pseudo-random number based on input coordinates.

• Converts p to a vec3 with a fixed z component.
• Uses a dot product with arbitrary constants to create variation.
• Passes the result through sin() and scales it by a large number.
• Uses fract() to keep only the decimal portion, ensuring a value between [0,1].

4. noise

float noise(vec2 p) {
    vec2 i = floor(p);
    vec2 f = fract(p);
    f = f * (3.0 - 2.0 * f);
    return mix(
        mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), f.x),
        mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x),
        f.y
    );
}

Used for creating procedural textures and organic effects.

• Splits p into integer (i) and fractional (f) parts.
• Modifies f using a cubic smoothing function (f = f * (3.0 - 2.0 * f)).
• Uses bilinear interpolation (mix) between four hashed values.

5. fbm (Fractal Brownian Motion)

float fbm(vec2 p) {
    float v = 0.0;
    v += noise(p * 1.0) * 0.5;
    v += noise(p * 2.0) * 0.25;
    v += noise(p * 4.0) * 0.125;
    return v;
}

Used to create natural-looking effects like clouds, fire, or water ripples.

• Calls noise at increasing frequencies (1.0, 2.0, 4.0).
• Each layer contributes with decreasing amplitude (0.5, 0.25, 0.125).
• Produces more complex noise with finer details.

6. main

void main(void) {
    iResolution = uSize;
    vec2 fragCoord = FlutterFragCoord();
    vec2 uv = fragCoord / iResolution.xy;
}

The main function that computes the final pixel color.

• Assigns iResolution from uSize.
• Gets fragCoord using FlutterFragCoord().
• Normalizes coordinates (uv) to a [0,1] range.

6.1 main

 vec4 src = textureSource(sourceImage, uv);
 vec4 tgt = vec4(0.0); // Default to transparent if the target texture is empty

 if (!isTextureEmpty(targetImage, uv)) {
    tgt = texture(targetImage, uv);
 }

• Loads the source image at uv.
• Checks if the target image is empty. If not, it samples it.

6.2 main

  vec3 col = src.rgb; // Start with source RGB

  uv.x -= 1.5;

  float ctime = mod(iTime * 0.5, ANIM_DURATION);

• Sets col to the source texture color.
• Shifts the uv.x coordinate left by 1.5 (likely for effect positioning).
• Computes ctime, a looping animation time.

6.3 main

 float d = uv.x + uv.y * 0.5 + 0.5 * fbm(uv * 15.1) + ctime * 1.3;

Computes d, which determines how the effect evolves over time:

• Uses uv.x and uv.y with a weight of 0.5.
• Adds fbm(uv * 15.1) * 0.5 to introduce procedural noise.
• Incorporates ctime * 1.3 to animate the effect.

6.4 main

if (d > 0.35) col = clamp(col - (d - 0.35) * 10.0, 0.0, 1.0);

• Darkens pixels based on d to simulate burning.
• Clamp ensures values stay between [0,1].

6.5 main

if (d > 0.47) {
   if (d < 0.5) {
     col += (d - 0.4) * 33.0 * 0.5 * (0.0 + noise(100.0 * uv + vec2(-ctime * 2.0, 0.0))) * vec3(1.5, 0.5, 0.0);
  } else {
     col += tgt.rgb; // Use RGB from the target texture
   }   
 }

If d > 0.47, a glowing transition effect is applied:

• Between 0.47 and 0.5, an orange glow appears (vec3(1.5, 0.5, 0.0)).
• After 0.5, the pixel is replaced with the target texture (tgt.rgb).

6.6 main

fragColor = vec4(col, 1.0); // Output as vec4 with full alpha

Writes the final color to fragColor with full opacity.

Flutter Side

This class simplifies working with shaders in Flutter by handling initialization, texture updates, and uniform management for the burn effect.

enum BurningShaderUniforms {
  sourceTexture(0),
  targetTexture(1),
  iTime(2),
  iResolutionWidth(0),
  iResoultionHeight(1);

  const BurningShaderUniforms(this.uniformIndex);

  final int uniformIndex;
}

final class FragmentShaderHelper {
  late final ui.FragmentShader _fragmentShader;
  bool isShaderReady = false;

  static const String assetPath = 'assets/shaders/burn.frag';

  static final FragmentShaderHelper _instance = FragmentShaderHelper._init();

  factory FragmentShaderHelper.instance() => _instance;

  FragmentShaderHelper._init();

  Future<void> initShader() async {
    _fragmentShader = await _loadShaderFromAsset();
    isShaderReady = true;
  }

  void _notInitializedException() {
    if (!isShaderReady) {
      throw Exception('fragmentShader does not initialized, call initShader before.');
    }
  }

  ui.FragmentShader getShader() {
    _notInitializedException();
    return _fragmentShader;
  }

  void setTextureSampler(ui.Image textureImage, BurningShaderUniforms uniform) {
    _notInitializedException();
    _fragmentShader.setImageSampler(uniform.uniformIndex, textureImage);
  }

  void setCanvasSize({required int width, required int height}) {
    _notInitializedException();

    _fragmentShader.setFloat(BurningShaderUniforms.iResolutionWidth.uniformIndex, width.toDouble());
    _fragmentShader.setFloat(BurningShaderUniforms.iResoultionHeight.uniformIndex, height.toDouble());
  }

  void setTimer(double elapsedTime) {
    _notInitializedException();
    _fragmentShader.setFloat(BurningShaderUniforms.iTime.uniformIndex, elapsedTime);
  }

  Future<ui.FragmentShader> _loadShaderFromAsset() async {
    final program = await ui.FragmentProgram.fromAsset(assetPath);
    return program.fragmentShader();
  }

  void dispose() {
    _fragmentShader.dispose();
  }
}

1. BurningShaderUniforms

Defines shader uniforms (inputs like textures and time):

• Textures (sourceTexture, targetTexture)
• Time (iTime)
• Resolution (iResolutionWidth, iResolutionHeight)

Each uniform has an associated index for setting values in the shader.

2. FragmentShaderHelper

Handles loading, initializing, and setting parameters for the shader.

• initShader() loads the shader asynchronously from assets/shaders/burn.frag.
• setTextureSampler() assigns textures to the shader.
• setCanvasSize() updates the shader with the screen resolution.
• setTimer() passes time updates for animation.
• getShader() retrieves the shader after initialization.
• dispose() releases resources when done.

This mixin (ShaderBurnEffectController) manages the burn effect animation using a fragment shader in a Flutter widget.

mixin ShaderBurnEffectController on State<ShaderBurnEffect> {
  late final FragmentShaderHelper fragmentShaderHelper;
  final imageAssetPath = "assets/images/test.png";
  ui.Image? image;
  late Timer timer;
  double elapsedTime = 0;
  bool isPlaying = false;
  bool isCompleted = false;
  bool isRestored = false;

  @override
  void initState() {
    super.initState();

    fragmentShaderHelper = FragmentShaderHelper.instance();

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      if (!context.mounted) return;

      await fragmentShaderHelper.initShader();
      image = await AssetImageHelper.decodeAssetImageAsUiImage(context, imageAssetPath);

      if (image == null) return;

      final placeholderTexture = await AssetImageHelper.takeCanvasPicture(
        image!.width,
        image!.height,
        Theme.of(context).scaffoldBackgroundColor,
      );

      fragmentShaderHelper.setTextureSampler(image!, BurningShaderUniforms.sourceTexture);
      fragmentShaderHelper.setTextureSampler(placeholderTexture, BurningShaderUniforms.targetTexture);
      fragmentShaderHelper.setTimer(elapsedTime);

      setState(() {});
    });
  }

  @override
  void dispose() {
    fragmentShaderHelper.dispose();
    timer.cancel();
    super.dispose();
  }

  void startAnimation() {
    if (isPlaying) return;

    setState(() {
      isCompleted = false;
      isPlaying = true;
      elapsedTime = 0;
      isRestored = false;
    });

    timer = Timer.periodic(const Duration(milliseconds: 16), (timer) {
      setState(() {
        elapsedTime += 0.016;
        fragmentShaderHelper.setTimer(elapsedTime);
      });

      if (elapsedTime >= 3) {
        stopAnimation();
      }
    });
  }

  void stopAnimation() {
    timer.cancel();
    setState(() {
      isPlaying = false;
      isCompleted = true;
    });
  }

  void restoreShader() {
    setState(() {
      isRestored = true;
    });

    fragmentShaderHelper.setTimer(0);
  }
}

• fragmentShaderHelper → Manages the shader.
• imageAssetPath → Path to the image used for the effect.
• image → Stores the loaded image.
• timer → Updates animation frame by frame.
• elapsedTime → Tracks animation progress.
• Flags (isPlaying, isCompleted, isRestored) → Control animation state.

2. initState() → Initializes the Shader

• Loads the shader asynchronously after the widget is built.
• Loads the image and a placeholder texture (a blank canvas matching the image size).
• Assigns textures to the shader (sourceTexture, targetTexture).
• Sets the initial timer value (0).

3. dispose() → Cleans up resources

• Disposes the shader and stops the timer when the widget is removed.

4. startAnimation() → Starts the burn effect

• Resets animation state.
• Runs a 16ms timer (≈ 60 FPS) to update elapsedTime.
• Updates the shader with the new time.
• Stops the animation after 3 seconds.

5. stopAnimation() → Stops the burn effect

• Cancels the timer and marks the animation as complete.

6. restoreShader() → Resets the effect

• Marks the effect as restored.
• Resets the shader time (elapsedTime = 0).

This class renders the burn effect using the shader, ensuring real-time updates on the Flutter canvas.

class ShaderPainter extends CustomPainter {
  final ui.Image image;
  final ui.FragmentShader shader;

  ShaderPainter({
    super.repaint,
    required this.image,
    required this.shader,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();

    paint.shader = shader;
    shader.setFloat(0, size.width);
    shader.setFloat(1, size.height);
    canvas.drawRect(Offset.zero & size, paint);
  }

  @override
  bool shouldRepaint(ShaderPainter oldDelegate) => true;
}

paint(Canvas canvas, Size size) → Draws the shader effect

• Creates a Paint object and assigns the shader.
• Passes width & height to the shader (setFloat(0, size.width), setFloat(1, size.height)).
• Draws a rectangle covering the full canvas, applying the shader effect.

Here’s an animation of an image that burns and fade out when you run it with the UI code.

Thanks for reading. See you next week with a new article and new projects. Have a nice day 🎈.

Source:

flutter-playgrounds/fragment_shader_sample at master · SamedHrmn/flutter-playgrounds

Follow me on Instagram:

https://www.instagram.com/mobile.enginar/

Follow me on LinkedIn:

https://www.linkedin.com/in/samedharman/

Follow me on X:

https://x.com/samedharman06