material_palette

A collection of material effects implemented with shaders for Flutter.

Live Demo

Gen1 Materials

Gradient Fills (linear + radial variants)

• Gritty Gradient - Risograph-style stippled gradient
• Perlin Gradient - Classic Perlin noise with bump lighting
• Simplex Gradient - Simplex noise with fewer artifacts
• FBM Gradient - Fractional Brownian Motion layered noise
• Turbulence Gradient - Turbulent ridge-like patterns
• Voronoi Gradient - Cellular Voronoi noise
• Voronoise Gradient - Blend of Voronoi and noise

Special Effects

• Marble Smear - Animated marble with drag-to-smudge
• Ripple - Animated wave distortion (wrap)
• Clickable Ripple - Tap-triggered ripple effects (wrap)

Burn Effects

• Burn - Directional burn dissolve with animated fire edge (wrap)
• Burn Radial - Radial burn dissolve expanding from a center point (wrap)
• Burn Tap - Tap to create a burn dissolve effects (wrap)

Smoke Effects

• Smoke - Directional smoke dissolve (wrap)
• Smoke Radial - Radial smoke dissolve expanding from a center point (wrap)
• Smoke Tap - Tap to create a smoke dissolve effects (wrap)

Pixel Dissolve Effects

• Pixel Dissolve - Directional pixel disintegration dissolve (wrap)
• Pixel Dissolve Radial - Radial pixel dissolve expanding from a center point (wrap)
• Pixel Dissolve Tap - Tap to create a pixel dissolve effects (wrap)

Slurp Effects

• Slurp Tap - Tap to create a 'slurp' effect (wrap)

Gen2 Materials

Material Fills

• Liquid Patina - Animated liquid-patina heat-map with warped FBM noise
• Metal Smoke - Animated metal-smoke pattern of noise-warped iterative swirls
• Iridescent Liquid Fill - Iridescent chrome-over-fbm material filling the widget
• Fur - Interactive volumetric fur surface with tap ripples

Masked Materials

• Fur Mask - Fur grows on masked child regions, leaning and spilling over mask edges (wrap)
• Iridescent Liquid - Iridescent chrome-over-fbm material masked onto the child, with contour-bent stripes (wrap)

Filters & Transitions

• Turbulence Wrap - Animated turbulence displacement across the child (wrap)
• Dither Wrap - 4x4 Bayer ordered dither pixelation (wrap)
• Peel Wrap - 3D page curl/peel transition (wrap)
• Crepuscular Rays - Volumetric god rays from a soft sun source (wrap)
• Kuwahara Wrap - Anisotropic Kuwahara painterly smoothing filter (wrap)

Installation

Add to your pubspec.yaml:

dependencies:
  material_palette: ^1.5.0

Important: Fragment shaders from packages must be declared in your app's pubspec.yaml. You can list only the ones you need, or include all of them:

flutter:
  shaders:
    # Gradient fills (linear)
    - packages/material_palette/shaders/gritty_gradient.frag
    - packages/material_palette/shaders/perlin_gradient.frag
    - packages/material_palette/shaders/simplex_gradient.frag
    - packages/material_palette/shaders/fbm_gradient.frag
    - packages/material_palette/shaders/turbulence_gradient.frag
    - packages/material_palette/shaders/voronoi_gradient.frag
    - packages/material_palette/shaders/voronoise_gradient.frag
    # Gradient fills (radial)
    - packages/material_palette/shaders/radial_gritty_gradient.frag
    - packages/material_palette/shaders/radial_perlin_gradient.frag
    - packages/material_palette/shaders/radial_simplex_gradient.frag
    - packages/material_palette/shaders/radial_fbm_gradient.frag
    - packages/material_palette/shaders/radial_turbulence_gradient.frag
    - packages/material_palette/shaders/radial_voronoi_gradient.frag
    - packages/material_palette/shaders/radial_voronoise_gradient.frag
    # Special effects
    - packages/material_palette/shaders/marble_smear.frag
    - packages/material_palette/shaders/ripple.frag
    - packages/material_palette/shaders/click_ripple.frag
    # Burn effects
    - packages/material_palette/shaders/burn.frag
    - packages/material_palette/shaders/radial_burn.frag
    - packages/material_palette/shaders/tappable_burn.frag
    # Smoke effects
    - packages/material_palette/shaders/smoke.frag
    - packages/material_palette/shaders/radial_smoke.frag
    - packages/material_palette/shaders/tappable_smoke.frag
    # Pixel dissolve effects
    - packages/material_palette/shaders/pixel_dissolve.frag
    - packages/material_palette/shaders/radial_pixel_dissolve.frag
    - packages/material_palette/shaders/tappable_pixel_dissolve.frag
    # Slurp effects
    - packages/material_palette/shaders/tappable_slurp.frag
    # Fur
    - packages/material_palette/shaders/fur_planar.frag
    - packages/material_palette/shaders/fur_planar_mask.frag
    # Iridescent liquid
    - packages/material_palette/shaders/iridescent_liquid.frag
    - packages/material_palette/shaders/iridescent_liquid_wrap.frag
    # Metal fills
    - packages/material_palette/shaders/liquid_patina.frag
    - packages/material_palette/shaders/metal_smoke.frag
    # Filters & transitions
    - packages/material_palette/shaders/turbulence_wrap.frag
    - packages/material_palette/shaders/dither_wrap.frag
    - packages/material_palette/shaders/peel_wrap.frag
    - packages/material_palette/shaders/crepuscular_rays.frag
    - packages/material_palette/shaders/kuwahara.frag

Quick Start

Include the package, then add one of the following widgets to your flutter project.

ShaderFill

Fills the widget area with the shader effect.

import 'package:material_palette/material_palette.dart';

GrittyGradientShaderFill(
  width: 300,
  height: 200,
  params: grittyGradientDef.defaults
      .withColor('color0', Colors.blue)
      .withColor('color1', Colors.purple),
)

ShaderWrap

Wraps an existing flutter widget and applies the shader effect to it.

import 'package:material_palette/material_palette.dart';

RippleShaderWrap(
  child: Image.asset('assets/photo.jpg'),
)

ShaderParams

All shaders are configured via ShaderParams, an immutable parameter bag:

// Start from defaults
final params = perlinGradientDef.defaults;

// Modify individual values
final custom = params
  .withValue('noiseDensity', 60.0)
  .withColor('color0', Colors.teal);

Animation Modes

Every shader widget supports three animation modes:

• ShaderAnimationMode.implicit - Animation state follows the time value passed to the widget; no internal ticker runs.
• ShaderAnimationMode.continuous - An internal ticker animates the shader continuously without rebuilding the widget. Interactive (pointer-driven) shaders require this mode.
• ShaderAnimationMode.explicit - Runs the exact animation described by a ShaderAnimationConfig without rebuilding the widget.

GrittyGradientShaderFill(
  width: 300,
  height: 200,
  animationMode: ShaderAnimationMode.continuous,
)

All Shaders

Shader	Type	Description
GrittyGradientShaderFill	Fill	Risograph-style stippled gradient
RadialGrittyGradientShaderFill	Fill	Radial stippled gradient
PerlinGradientShaderFill	Fill	Classic Perlin noise gradient
RadialPerlinGradientShaderFill	Fill	Radial Perlin noise gradient
SimplexGradientShaderFill	Fill	Simplex noise gradient
RadialSimplexGradientShaderFill	Fill	Radial Simplex noise gradient
FbmGradientShaderFill	Fill	Fractional Brownian Motion gradient
RadialFbmGradientShaderFill	Fill	Radial FBM gradient
TurbulenceGradientShaderFill	Fill	Turbulent ridge-like gradient
RadialTurbulenceGradientShaderFill	Fill	Radial turbulence gradient
VoronoiGradientShaderFill	Fill	Cellular Voronoi noise gradient
RadialVoronoiGradientShaderFill	Fill	Radial Voronoi gradient
VoronoiseGradientShaderFill	Fill	Voronoi + noise blend gradient
RadialVoronoiseGradientShaderFill	Fill	Radial Voronoise gradient
MarbleSmearShaderFill	Fill	Marble with drag smudge
RippleShaderWrap	Wrap	Animated wave distortion
ClickableRippleShaderWrap	Wrap	Tap-triggered ripples
BurnShaderWrap	Wrap	Directional burn dissolve
RadialBurnShaderWrap	Wrap	Radial burn dissolve from center
TappableBurnShaderWrap	Wrap	Tap-triggered burn dissolves
SmokeShaderWrap	Wrap	Directional smoke dissolve
RadialSmokeShaderWrap	Wrap	Radial smoke dissolve from center
TappableSmokeShaderWrap	Wrap	Tap-triggered smoke dissolves
PixelDissolveShaderWrap	Wrap	Directional pixel disintegration dissolve
RadialPixelDissolveShaderWrap	Wrap	Radial pixel dissolve from center
TappablePixelDissolveShaderWrap	Wrap	Tap-triggered pixel dissolves
TappableSlurpShaderWrap	Wrap	Tap-triggered slurp dissolves
FurPlanarShaderFill	Fill	Interactive volumetric fur surface
FurPlanarMaskShaderWrap	Wrap	Fur grows on masked child regions
IridescentLiquidShaderFill	Fill	Iridescent chrome-over-fbm material, no mask
IridescentLiquidShaderWrap	Wrap	Iridescent material masked onto the child
LiquidPatinaShaderFill	Fill	Liquid-patina heat-map with warped FBM noise
MetalSmokeShaderFill	Fill	Metal-smoke pattern of noise-warped swirls
TurbulenceShaderWrap	Wrap	Animated turbulence displacement
DitherShaderWrap	Wrap	4x4 Bayer ordered dither pixelation
PeelShaderWrap	Wrap	3D page curl/peel transition
CrepuscularRaysShaderWrap	Wrap	Volumetric god rays from a soft sun source
KuwaharaShaderWrap	Wrap	Anisotropic Kuwahara painterly smoothing

Running the Demo

cd example
flutter pub get
flutter run -d chrome    # or macos, etc.

License

MIT