multi_color_ripple 1.2.1 
multi_color_ripple: ^1.2.1 copied to clipboard
A beautiful, lightweight, animated multi-color ripple widget for Flutter. Pure Dart, no native code — works on Android, iOS, web, Windows, macOS and Linux.
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.
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.
Metadata
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
A beautiful, lightweight, animated multi-color ripple widget for Flutter. Pure Dart, no native code — works on Android, iOS, web, Windows, macOS and Linux.
Repository (GitHub)
View/report issues
Topics
#animation #ripple #ui #widget #custom-painter
License
MIT (license)