flutterflutter-layoutflutter-animationflutter-canvas

Circular wave animation in Flutter with Canvas - Charts


I'm trying to create an animation using Canvas from Flutter. The animation that I'm trying to do is something like this:

Example:

I managed to do some animations, but none are like what I need. I would be grateful if someone who has already worked with Canvas could help me in any way.

The reason I need to use canvas to achieve this result is because I'm making changes directly to a package responsible for generating charts. There are chart packages that do something similar, but for commercial reasons, I need to use what is already in use.


Solution

  • It is called Ripple Animation and the key to do it is using scaleTranstion

    you can change this below code to whatever you want

    class RipplesAnimation extends StatefulWidget {
      const RipplesAnimation({Key key, this.size = 80.0, this.color = Colors.red,
        this.onPressed, @required this.child,}) : super(key: key);
      final double size;
      final Color color;
      final Widget child;
      final VoidCallback onPressed;
      @override
      _RipplesAnimationState createState() => _RipplesAnimationState();
    }
    
    class _RipplesAnimationState extends State<RipplesAnimation> with TickerProviderStateMixin {
      AnimationController _controller;
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
          duration: const Duration(milliseconds: 2000),
          vsync: this,
        )..repeat();
      }
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
      Widget _button() {
        return Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(widget.size),
            child: DecoratedBox(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  colors: <Color>[
                    widget.color,
                    Color.lerp(widget.color, Colors.black, .05)
                  ],
                ),
              ),
              child: ScaleTransition(
                  scale: Tween(begin: 0.95, end: 1.0).animate(
                    CurvedAnimation(
                      parent: _controller,
                      curve: const CurveWave(),
                    ),
                  ),
                  child: Icon(Icons.speaker_phone, size: 44,)
              ),
            ),
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter Ripple Demo"),
          ),
          body: Center(
            child: CustomPaint(
              painter: CirclePainter(
                _controller,
                color: widget.color,
              ),
              child: SizedBox(
                width: widget.size * 4.125,
                height: widget.size * 4.125,
                child: _button(),
              ),
            ),
          ),
        );
      }
    }