Want to animate a path in flutter? o animate a CustomPainter pass the AnimationController into its constructor and also to the super constructor. In paint use the value of the animation to decide how much of the path the draw.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | class AnimatedPainter extends CustomPainter { final Animation<double> _animation; AnimatedPainter(this._animation) : super(repaint: _animation); @override void paint(Canvas canvas, Size size) { // _animation.value has a value between 0.0 and 1.0 // use this to draw the first X% of the path } @override bool shouldRepaint(AnimatedPainter oldDelegate) { return true; } } class PainterDemo extends StatefulWidget { @override PainterDemoState createState() => new PainterDemoState(); } class PainterDemoState extends State<PainterDemo> with SingleTickerProviderStateMixin { AnimationController _controller; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, ); } @override void dispose() { _controller.dispose(); super.dispose(); } void _startAnimation() { _controller.stop(); _controller.reset(); _controller.repeat( period: Duration(seconds: 5), ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: const Text('Animated Paint')), body: new CustomPaint( foregroundPainter: new AnimatedPainter(_controller), child: new SizedBox( // doesn't have to be a SizedBox - could be the Map image width: 200.0, height: 200.0, ), ), floatingActionButton: new FloatingActionButton( onPressed: _startAnimation, child: new Icon(Icons.play_arrow), ), ); } } void main() { runApp( new MaterialApp( home: new PainterDemo(), ), ); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
