wave 0.2.3

Widget for displaying waves with custom color, duration, floating and blur effects.

WAVE

---

A Flutter package for displaying waves.

Demo

Platform	URL
Web	wave.glorylab.xyz

Deployment

The web demo is built from example/ and deployed with Cloudflare Workers Static Assets. See docs/cloudflare-workers.md for the GitHub Actions and migration setup.

Getting Started

static const _backgroundColor = Color(0xFFF15BB5);

static const _colors = [
    Color(0xFFFEE440),
    Color(0xFF00BBF9),
];

static const _durations = [
    5000,
    4000,
];

static const _heightPercentages = [
    0.65,
    0.66,
];

WaveWidget(
    config: CustomConfig(
        colors: _colors,
        durations: _durations,
        heightPercentages: _heightPercentages,
    ),
    backgroundColor: _backgroundColor,
    size: Size(double.infinity, double.infinity),
    waveAmplitude: 0,
),

Config modes

CustomConfig is the most explicit mode. Use it when you want full control over each wave layer's colors or gradients, duration, and height.

WaveWidget(
    config: CustomConfig(
        gradients: [
            [Color(0xFF00BBF9), Color(0xFF9B5DE5)],
            [Color(0xFFFEE440), Color(0xFFF15BB5)],
        ],
        durations: [5000, 4000],
        heightPercentages: [0.65, 0.66],
    ),
    size: Size(double.infinity, double.infinity),
)

SingleConfig creates layered waves from one color. RandomConfig creates layer colors for you, with an optional seed when deterministic output is useful for tests or demos.

WaveWidget(
    config: SingleConfig(
        color: Color(0xFF00BBF9),
        layers: 3,
    ),
    size: Size(double.infinity, double.infinity),
)

WaveWidget(
    config: RandomConfig(
        seed: 7,
        layers: 4,
    ),
    size: Size(double.infinity, double.infinity),
)