multi_color_ripple

A beautiful, lightweight, animated ripple widget for Flutter: a soft glowing centre blooms outward through a second colour into a backdrop, overlaid with crisp ring outlines that flow continuously outward. Pure Dart, no native code — works on Android, iOS, web, Windows, macOS and Linux.

· Changelog

▶️ Watch the demo video

Features

• ✅ Infinite (or one-shot) outward ripple animation
• ✅ Configurable inner/outer glow colors and backdrop
• ✅ Crisp ring outlines overlaid on the glow, with adjustable color and width
• ✅ Configurable ring count and glow spread
• ✅ Circle or square ring shape, adjustable blur intensity, and organic ring-width variance
• ✅ Fixed size or flexible sizing that fills the available space
• ✅ Place any widget in the center
• ✅ Zero external dependencies

Installation

dependencies:
  multi_color_ripple: ^1.0.0

Then run:

flutter pub get

Usage

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

Center(
  child: MultiColorRipple(
    size: 280,
    ringCount: 16,
    duration: const Duration(seconds: 2),
    innerColor: const Color(0xFF7CB36A),
    outerColor: const Color(0xFF8B6FC9),
    backgroundColor: const Color(0xFF0E0E12),
    child: const Icon(Icons.favorite, color: Colors.white, size: 40),
  ),
)

See the example app for a complete runnable sample.

Parameters

Parameter	Type	Default	Description
child	Widget	required	Widget rendered at the center, on top of the ripples.
ringCount	int	16	Number of rings flowing outward at once.
innerColor	Color	green	Color at the luminous centre.
outerColor	Color	purple	Color of the surrounding glow.
backgroundColor	Color	white	Backdrop the glow fades into at the edges/corners.
rimColor	Color	translucent white	Color of the crisp ring outlines overlaid on the glow.
strokeWidth	double	2.0	Width of the crisp ring outlines. Set to 0 to hide them.
glowFraction	double	0.8	How far the bloom spreads, as a fraction of the shortest side.
ringShape	RippleRingShape	RippleRingShape.circle	Shape of the glow bands and ring outlines: circle or square.
blurIntensity	double	1.0	Multiplier on the glow band's blur. 0 is crisp, higher is hazier.
ringWidthVariance	double	0.0	Randomizes each ring's stroke width by up to this fraction (e.g. 0.5 = ±50%) for a less uniform look.
size	double?	null	Diameter of the ripple area. When null, fills the available space.
duration	Duration	Duration(seconds: 2)	Duration of one full outward cycle.
repeat	bool	true	Loop the animation forever.

Additional examples

Fill the available space

MultiColorRipple(
  // size omitted → flexibly fills the parent
  child: const Icon(Icons.favorite),
)

Slower animation, custom colors

MultiColorRipple(
  duration: const Duration(seconds: 5),
  innerColor: Colors.amber,
  outerColor: Colors.deepOrange,
  child: const Icon(Icons.favorite),
)

Square rings, softer glow, organic ring widths

MultiColorRipple(
  ringShape: RippleRingShape.square,
  blurIntensity: 1.6,
  ringWidthVariance: 0.4,
  child: const Icon(Icons.favorite),
)

License

MIT — see LICENSE.