Posted in Dart Flutter

Flutter – How to create Wave Animation easily using Package

Flutter – How to create Wave Animation easily using Package Posted on May 24, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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, I 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.

flutter wave animation easy

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

See this also: Flutter – How to make Bezier Curve waves using custom clip Path

dependencies:
  flutter:
    sdk: flutter
  wave: ^0.0.8

Dart Code for Flutter:

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,
              ),
          ),
        ),
      );
  }
}

See this also: Flutter – How to create Wave Curves animation using Clipper Path

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

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *