flutter_shaders_ui

Collection of beautiful, ready-to-use Flutter widgets powered by GLSL fragment shaders. GPU-accelerated effects for Flutter UI — aurora, fire, glass, glow, ripple, shimmer, snow, water, waves and more.

Zero external dependencies — uses only the Flutter SDK.

Documentation

Full documentation is hosted at Codigee:

• Overview — what the package is and how to get started
• Effects reference — every widget, its parameters and live examples
• Custom shaders — build your own shader widgets on the base infrastructure

Demo

Effects & live controls

Snow · Fire · Glow	Water · Gallery · Aurora	Ripple · Glow orb

Example app

Home dashboard	Explore & gallery

All clips are real-time recordings. The full example app lives in example/ — run flutter run inside it to try every effect with live controls.

Installation

dependencies:
  flutter_shaders_ui: ^1.0.4

Quick Start

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(),
    ),
  ),
)

Available Effects

Backgrounds

Widget	Description
WaveBackground	Animated flowing wave gradient — splash screens, card headers
AuroraEffect	Northern lights curtain bands — hero sections, cosmic UI
FireEffect	Rising flames with ember sparks — game UI, dramatic accents
WaterEffect	Underwater caustics with foam — aquatic themes, depth effects

Overlays

Widget	Description
GlassEffect	Frosted glass / glassmorphism — cards, modals, premium UI
ShimmerEffect	Sweeping shine highlight — loading skeletons, badges
SnowEffect	Falling parallax snowflakes — seasonal UI, ambient decoration
PulseEffect	Breathing radial glow rings — notifications, live indicators

Interactive

Widget	Description
RippleEffect	Tap-triggered concentric waves — buttons, tappable cards
GlowOrb	Positionable glowing sphere (static, bouncing, draggable)

Combining Effects

Stack(
  children: [
    Positioned.fill(
      child: WaveBackground(
        color1: const Color(0xFF0B0E1A),
        color2: const Color(0xFF131B2E),
      ),
    ),
    Positioned.fill(
      child: GlowOrb.bouncing(
        color: const Color(0xFF6366F1),
        radius: 0.18,
        glowIntensity: 0.3,
      ),
    ),
    SafeArea(child: YourContent()),
  ],
)

Performance

• 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

Core API

For building custom shader widgets:

Class	Purpose
ShaderEffectWidget	Base widget: shader loading, time animation, uniform setup
ShaderCache	Global cache for compiled FragmentProgram instances
ShaderPainter	Reusable CustomPainter for rendering shaders to canvas

Controlling the animation clock

ShaderEffectWidget.timeScale multiplies the elapsed time fed into the uTime uniform, giving you control over the global animation clock that the per-widget speed uniforms cannot: 1.0 runs at real time, 0.5 at half speed, 0.0 freezes on the current frame, and negative values run in reverse.

ShaderEffectWidget(
  assetPath: 'packages/flutter_shaders_ui/shaders/aurora.frag',
  timeScale: 0.5, // half-speed animation
  child: const Text('Slow aurora'),
)

See the Effects reference for detailed widget docs and common patterns — also available as markdown source.

Requirements

• Flutter >= 3.10.0
• Dart >= 3.0.0

License

MIT — see LICENSE for details.