Skip to content
Widget for displaying waves with custom color, duration, floating and blur effects.
Branch: master
Clone or download
RockerFlower Gradient begin and end positions
Allow to change the gradient start and end position of the waves.
Latest commit ccc38a8 Dec 19, 2018

README.md

Wave

Awesome: Flutter pub package GitHub

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

Getting Started

WaveWidget(
    config: CustomConfig(
        gradients: [
            [Colors.red, Color(0xEEF44336)],
            [Colors.red[800], Color(0x77E57373)],
            [Colors.orange, Color(0x66FF9800)],
            [Colors.yellow, Color(0x55FFEB3B)]
        ],
        durations: [35000, 19440, 10800, 6000],
        heightPercentages: [0.20, 0.23, 0.25, 0.30],
        blur: MaskFilter.blur(BlurStyle.solid, 10),
        gradientBegin: Alignment.bottomLeft,
        gradientEnd: Alignment.topRight,
    ),
    colors: [
        Colors.white70,
        Colors.white54,
        Colors.white30,
        Colors.white24,
    ],
    durations: [
        32000,
        21000,
        18000,
        5000,
    ],
    waveAmplitude: 0,
    heightPercentages: [0.25, 0.26, 0.28, 0.31],
    backgroundColor: Colors.blue,
    size: Size(
        double.infinity,
        double.infinity,
    ),
),

Preview

Normal

demo

Solid Blur

demo

Inner Blur

demo

Outer Blur

demo

Normal Blur

demo

GIF

demo

TODO

  • Static mode.
  • Random mode.
You can’t perform that action at this time.