Flutter Painter animation Demo

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Animation Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
        duration: const Duration(milliseconds: 400), vsync: this);
    animation = Tween<double>(begin: 0, end: 1).animate(controller)
      ..addListener(() {
        setState(() {});
      });
    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(100)),
            border: Border.all(color: Colors.black, width: 2),
          ),
          child: Wave(
            progress: animation.value,
            color: Colors.black,
            active: true,
            innerRadius: 0,
          ),
        ),
      ),
    );
  }
}

class Wave extends StatelessWidget {
  final Widget child;
  final bool active;
  final double innerRadius;
  final Color color;
  final double progress;

  Wave(
      {this.child,
      this.active,
      this.innerRadius,
      this.color = Colors.black,
      this.progress});

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: CustomPaint(
        painter: WavePainter(
          progress: progress,
          innerRadius: innerRadius,
          active: active,
          color: color,
        ),
        child: child,
      ),
    );
  }
}

class WavePainter extends CustomPainter {
  final int count;
  final bool active;
  final double innerRadius;
  final int baseOpacity = 120;
  final Color color;
  final double progress;

  WavePainter({
    this.progress = 0,
    this.count = 10,
    this.color,
    this.active = true,
    this.innerRadius = 0,
  });

  void circle(canvas, rect, wave) {
    double size = ((rect.width / 2) - innerRadius);
    double space = size / count;

    double bPoint = count / 1.25;

    double opacity = wave <= bPoint
        ? lerpDouble(
            0, 0.8, max((wave - lerpDouble(2, 0, progress)) / (bPoint), 0))
        : 1;

    final Paint paint = Paint()
      ..color = wave > bPoint ? color : color.withOpacity(opacity)
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    canvas.drawCircle(rect.center,
        (innerRadius + (wave * space)) + ((size / 1.25) * progress), paint);
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = new Rect.fromLTRB(0.0, 0.0, size.width, size.height);

    if (!active) {
      return;
    }

    for (int wave = count; wave >= 0; wave--) {
      circle(canvas, rect, wave);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}