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