Add Wave Animation in Flutter

Wave animation has grown into a popular way to express things visually on the internet. It is an excellent way for people to tweet, post videos, or share gifs with friends. This type of animation can be done in many different ways and it’s fun because you get so much variety!

Wave animation is kind of cool to use in a Flutter app. It is the base to make a liquid animation.

I posted a wave animation example here.

Here is our wave container:

class WaveContainer extends StatefulWidget {
  final Duration duration;
  final double height;
  final double width;
  final Color waveColor;

  const WaveContainer({
    Key key,
    @required this.height,
    @required this.width,
  }) : super(key: key);

  _WaveContainerState createState() => _WaveContainerState();

class _WaveContainerState extends State<WaveContainer>
    with TickerProviderStateMixin {
  AnimationController _animationController;
  Duration _duration;
  Color _waveColor;

  void initState() {

    _duration = widget.duration ?? const Duration(milliseconds: 1000);
    _animationController = AnimationController(vsync: this, duration: _duration);
    _waveColor = widget.waveColor ?? Colors.lightBlueAccent;


  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (BuildContext context, Widget child) {
          return CustomPaint(
            painter: WavePainter(
                waveAnimation: _animationController, waveColor: _waveColor),

  void dispose() {

class WavePainter extends CustomPainter {
  Animation<double> waveAnimation;
  Color waveColor;

  WavePainter({this.waveAnimation, this.waveColor});

  void paint(Canvas canvas, Size size) {
    Path path = Path();
    for (double i = 0.0; i < size.width; i++) {
          sin((i / size.width * 2 * pi) + (waveAnimation.value * 2 * pi)) * 4);
    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);

    Paint wavePaint = Paint()..color = waveColor;
    canvas.drawPath(path, wavePaint);

  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;

Add the widget to a Scaffold

width: double.infinity,
height: 40,
waveColor: Colors.orangeAccent)

Leave a Comment

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

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.