How to create Wave Animation easily using Package in Flutter App

If you want to make wave curves animation without knowledge of animation, quadratic Bezier, and custom clipper path then this example is for you. In this example, we have used a flutter package that helps to make wave curves easily with very little code. You just need to pass amplitude, colors, durations heights, number of curves.

First, you need to add wave Flutter package in your dependency by adding the following line in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  wave: ^0.0.8

import 'package:flutter/material.dart';
import 'package:wave/config.dart';
import 'package:wave/wave.dart';
//import wave package

//set this class to home: attribute of MaterialApp() at main.dart
class MyWave extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title:Text("Easy Wave Animation"),
          backgroundColor: Colors.redAccent
        ),
        body: Container(
            color: Colors.white,
            child: WaveWidget( //user Stack() widget to overlap content and waves
              config: CustomConfig(
                  colors: [ 
                      Colors.redAccent.withOpacity(0.3),
                      Colors.redAccent.withOpacity(0.3),
                      Colors.redAccent.withOpacity(0.3),
                      //the more colors here, the more wave will be
                  ],
                  durations: [4000, 5000, 7000], 
                  //durations of animations for each colors,
                  // make numbers equal to numbers of colors
                  heightPercentages: [0.01, 0.05, 0.03],
                  //height percentage for each colors.
                  blur: MaskFilter.blur(BlurStyle.solid, 5),
                  //blur intensity for waves
              ),
              waveAmplitude: 35.00, //depth of curves
              waveFrequency: 3, //number of curves in waves
              backgroundColor: Colors.white, //background colors
              size: Size(
                  double.infinity,
                  double.infinity,
              ),
          ),
        ),
      );
  }
}