flutter_shaders_ui is a collection of ready-to-use Flutter widgets powered by GLSL fragment shaders. Every effect - aurora, fire, glass, glow, ripple, shimmer, snow, water and waves - runs on the GPU and drops into your tree as an ordinary widget. There are zero external dependencies: the package uses only the Flutter SDK.

Each widget wraps a compiled fragment shader that renders behind or over its child. Shaders are compiled once and cached, animation is driven by a Flutter Ticker, and every effect can be switched off with a single enabled flag that renders only the child at zero GPU cost.

Ten drop-in widgets, grouped as backgrounds, overlays and interactive effects. Each one is documented in full on the effects reference.

• AuroraEffect- animated aurora/northern-lights background.
• FireEffect- flickering flame effect.
• GlassEffect- frosted-glass blur overlay.
• GlowOrb- positionable glowing orb (static or bouncing).
• PulseEffect- breathing pulse highlight.
• RippleEffect- expanding ripple distortion.
• ShimmerEffect- sweeping shimmer for placeholders.
• SnowEffect- falling snow particles.
• WaterEffect- animated water surface distortion.
• WaveBackground- animated wave gradient background.

Effects are built to be cheap by default. The GPU does the work, the shader is compiled a single time, and a disabled effect costs nothing.

• GPU-accelerated - all effects run as GLSL fragment shaders on the GPU.
• Compiled once and cached - ShaderCache prevents recompilation.
• Zero cost when disabled - enabled: false renders only child, no GPU work.
• Ticker-based animation - respects Flutter's frame scheduling.
• RepaintBoundary - isolates shader repaints from the widget tree.

Requires Flutter 3.10.0 or newer and Dart 3.0.0 or newer.

Add the package to your pubspec.yaml and run flutter pub get. The shaders ship with the package - no native code or extra setup.

dependencies:
  flutter_shaders_ui: ^1.0.4

Import the library and wrap any widget. A WaveBackground fills the screen behind its child; a GlassEffect lays a frosted overlay on top.

import 'package:flutter_shaders_ui/flutter_shaders_ui.dart';

// Wave background
Scaffold(
  body: WaveBackground(
    color1: const Color(0xFF0D1B2A),
    color2: const Color(0xFF1B263B),
    child: Center(child: Text('Hello Shaders')),
  ),
)

// Glass card
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: GlassEffect(
    frost: 0.4,
    opacity: 0.3,
    child: Padding(
      padding: EdgeInsets.all(16),
      child: CardContent(),
    ),
  ),
)

A minimal, complete app that layers a glass card over falling snow:

import 'package:flutter/material.dart';
import 'package:flutter_shaders_ui/flutter_shaders_ui.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SnowEffect(
          density: 0.5,
          speed: 1.0,
          child: Center(
            child: GlassEffect(
              frost: 0.4,
              opacity: 0.3,
              child: Padding(
                padding: const EdgeInsets.all(24),
                child: Text(
                  'flutter_shaders_ui',
                  style: Theme.of(context).textTheme.headlineMedium,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Effects compose naturally in a Stack. Layer a background, an ambient glow and your content, bottom to top.

Stack(
  children: [
    // Layer 1: Wave background
    Positioned.fill(
      child: WaveBackground(
        color1: const Color(0xFF0B0E1A),
        color2: const Color(0xFF131B2E),
        amplitude: 0.15,
        speed: 0.4,
      ),
    ),
    // Layer 2: Ambient glow
    Positioned.fill(
      child: GlowOrb.bouncing(
        color: const Color(0xFF6366F1),
        radius: 0.18,
        glowIntensity: 0.3,
        speed: 0.08,
      ),
    ),
    // Layer 3: Content
    SafeArea(child: YourContent()),
  ],
)