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.

    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{
  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: [ 
                      //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(

In this way, you can make wave animation with very little code and without knowledge of animations.

No any Comments on this Article

Please Wait...