How to Use Custom Shaders in FlutterFlow for Visual Effects

1// Custom Widget: GradientText
2import 'package:flutter/material.dart';
3
4class GradientText extends StatelessWidget {
5  const GradientText({
6    super.key,
7    required this.text,
8    required this.style,
9    required this.startColor,
10    required this.endColor,
11  });
12
13  final String text;
14  final TextStyle style;
15  final Color startColor;
16  final Color endColor;
17
18  @override
19  Widget build(BuildContext context) {
20    return ShaderMask(
21      blendMode: BlendMode.srcIn,
22      shaderCallback: (Rect bounds) => LinearGradient(
23        colors: [startColor, endColor],
24        begin: Alignment.topLeft,
25        end: Alignment.bottomRight,
26      ).createShader(bounds),
27      child: Text(text, style: style),
28    );
29  }
30}

1// assets/shaders/ripple.frag
2#include <flutter/runtime_effect.glsl>
3
4uniform float uTime;
5uniform vec2 uCenter;
6uniform sampler2D uTexture;
7
8out vec4 fragColor;
9
10void main() {
11  vec2 fragCoord = FlutterFragCoord().xy;
12  vec2 uv = fragCoord / vec2(400.0, 800.0);
13
14  float dist = distance(fragCoord, uCenter);
15  float wave = sin(dist * 0.05 - uTime * 3.0) * 10.0;
16  float strength = max(0.0, 1.0 - dist / 200.0);
17
18  vec2 offset = normalize(fragCoord - uCenter) * wave * strength * 0.005;
19  fragColor = texture(uTexture, uv + offset);
20}

1// Custom Widget: RippleShaderWidget
2import 'dart:ui' as ui;
3import 'package:flutter/material.dart';
4import 'package:flutter/scheduler.dart';
5
6class RippleShaderWidget extends StatefulWidget {
7  const RippleShaderWidget({super.key, required this.child});
8  final Widget child;
9
10  @override
11  State<RippleShaderWidget> createState() => _RippleShaderWidgetState();
12}
13
14class _RippleShaderWidgetState extends State<RippleShaderWidget>
15    with SingleTickerProviderStateMixin {
16  ui.FragmentProgram? _program;
17  double _time = 0;
18  late final Ticker _ticker;
19
20  @override
21  void initState() {
22    super.initState();
23    _loadShader();
24    _ticker = createTicker((elapsed) {
25      setState(() => _time = elapsed.inMilliseconds / 1000.0);
26    });
27    _ticker.start();
28  }
29
30  Future<void> _loadShader() async {
31    final program = await ui.FragmentProgram.fromAsset('shaders/ripple.frag');
32    if (mounted) setState(() => _program = program);
33  }
34
35  @override
36  void dispose() {
37    _ticker.dispose();
38    super.dispose();
39  }
40
41  @override
42  Widget build(BuildContext context) {
43    if (_program == null) return widget.child;
44    final shader = _program!.fragmentShader()
45      ..setFloat(0, _time)
46      ..setFloat(1, 200)
47      ..setFloat(2, 400);
48    return CustomPaint(
49      painter: _ShaderPainter(shader),
50      child: widget.child,
51    );
52  }
53}
54
55class _ShaderPainter extends CustomPainter {
56  _ShaderPainter(this.shader);
57  final ui.FragmentShader shader;
58
59  @override
60  void paint(Canvas canvas, Size size) {
61    canvas.drawRect(Offset.zero & size, Paint()..shader = shader);
62  }
63
64  @override
65  bool shouldRepaint(_ShaderPainter old) => true;
66}