erykkruk/flutter_shaders_ui

flutter_shaders_ui

pub package CI

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
Snow, fire and glow shader effects with live sliders	Water, gallery grid and aurora shader effects	Ripple and glow orb shader effects

Example app

Home dashboard	Explore & gallery
Example app home dashboard and overview	Example app explore screen and effect 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
• One shader per widget — uniforms are rewritten between draws, not a new FragmentShader per frame
• Frame-rate cap — maxFramesPerSecond trades refresh rate for battery without slowing the motion
• Reduced motion — animation freezes when the platform asks for it, the effect still renders

Capping the frame rate

Shader effects repaint every frame, which on a 120 Hz display is twice the work a 60 Hz one does for visuals that rarely need it. Cap a whole subtree at once:

ShaderPerformance(
  settings: const ShaderPerformanceSettings(maxFramesPerSecond: 30),
  child: MyPage(),
)

Or a single effect:

ShaderEffectWidget(
  assetPath: 'packages/flutter_shaders_ui/shaders/aurora.frag',
  maxFramesPerSecond: 24,
  child: const Text('Calm aurora'),
)

A cap only skips repaints: the clock still advances in real time, so the animation keeps its speed and just updates less often. A per-widget value wins over the inherited one.

Reduced motion

When the platform asks for reduced motion, shader animation freezes on its first frame and the effect renders as a still image. Opt out for a specific effect with respectReducedMotion: false, or for a subtree through ShaderPerformanceSettings(respectReducedMotion: false).

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
ShaderPerformance / ShaderPerformanceSettings	Frame-rate cap and reduced-motion policy for a subtree

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.