Flutter animation with Canvas

@overrideWidget build(BuildContext context) {return AnimatedContainer(decoration: BoxDecoration(color: startAnimation ? Colors.lightGreen : Colors.red,borderRadius: BorderRadius.circular(startAnimation ? 15.0 : 0.0),),width: startAnimation ? 100 : 200,height: startAnimation ? 100 : 200,curve: Curves.easeInOutCubic,duration: Duration(seconds: 1),);}
import ‘package:flutter/material.dart’;class FlutterAnimatedIconWidget extends StatefulWidget {FlutterAnimatedIconWidget();@override_FlutterAnimatedIconWidgetState createState() => _FlutterAnimatedIconWidgetState();}class _FlutterAnimatedIconWidgetState extends State<FlutterAnimatedIconWidget> with SingleTickerProviderStateMixin {AnimationController animationController;@overridevoid initState() {animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 400));super.initState();}@overrideWidget build(BuildContext context) {return InkWell(onTap: _onTap,child: AnimatedIcon(icon: AnimatedIcons.play_pause,progress: animationController,color: Colors.orange,size: 150.0,),);}void _onTap() {if (animationController.value == 0) {animationController.forward();return;}animationController.reverse();}}
Widget build(BuildContext context) {return AnimateIcons(startIcon: Icons.play_arrow,endIcon: Icons.pause,size: 150.0,onStartIconPress: () {return true;},onEndIconPress: () {return true;},duration: Duration(milliseconds: 500),color: Colors.orange,clockwise: false,);}
class CustomIconPaint extends CustomPainter {final double value;final double sizeIcon;final Color color;final Color strokeColor;CustomIconPaint({@required this.value,@required this.sizeIcon,@required this.color,@required this.strokeColor,});@overridevoid paint(Canvas canvas, Size size) {size = Size(sizeIcon, sizeIcon);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;}
@overridevoid paint(Canvas canvas, Size size) {size = Size(sizeIcon, sizeIcon);Paint paint = Paint()..strokeCap = StrokeCap.round..style = PaintingStyle.fill..color = color ?? Colors.black;Paint paintStroke = Paint()..strokeCap = StrokeCap.square..strokeJoin = StrokeJoin.round..strokeWidth = sizeIcon /10..style = PaintingStyle.stroke..color = strokeColor ?? Colors.black;}
@overridevoid paint(Canvas canvas, Size size) {size = Size(sizeIcon, sizeIcon);Paint paint = Paint()..strokeCap = StrokeCap.round..style = PaintingStyle.fill..color = color ?? Colors.black;Paint paintStroke = Paint()..strokeCap = StrokeCap.square..strokeJoin = StrokeJoin.round..strokeWidth = sizeIcon /10..style = PaintingStyle.stroke..color = strokeColor ?? Colors.black;_drawPath(canvas, paint, paintStroke);}void _drawPath(Canvas canvas, Paint paint, Paint paintStroke) {canvas.save();}
void _drawPath(Canvas canvas, Paint paint, Paint paintStroke) {canvas.save();Path path = Path();double space = sizeIcon / 8;path.addPolygon([Offset(sizeIcon, (sizeIcon / 2 — space)),Offset(0, (sizeIcon / 2 — space)),Offset(0, 0),Offset(sizeIcon, 0),],true,);path.addPolygon([Offset(0, sizeIcon),Offset(sizeIcon, sizeIcon),Offset(sizeIcon, (sizeIcon / 2 + space)),Offset(0, (sizeIcon / 2 + space)),],true,);canvas.drawPath(path, paintStroke);canvas.drawPath(path, paint);}
canvas.drawPath(path, paintStroke);canvas.drawPath(path, paint);
import ‘dart:math’;import ‘package:flutter/cupertino.dart’;import ‘package:flutter/material.dart’;import ‘package:animation_with_canvas_example/ui/canvas/custom_icon_paint.dart’;class CanvasAnimatedIconWidget extends StatefulWidget {final Duration duration;final void Function() onTap;final Color color;final Color strokeColor;final double size;CanvasAnimatedIconWidget({@required this.duration,@required this.onTap,this.size = 25.0,this.color,this.strokeColor,}) : assert(duration != null);@override_CanvasAnimatedIconWidgetState createState() => _CanvasAnimatedIconWidgetState();}class _CanvasAnimatedIconWidgetState extends State<CanvasAnimatedIconWidget> with TickerProviderStateMixin {AnimationController rotateController;AnimationController animationController;@overridevoid initState() {rotateController = AnimationController(duration: widget.duration, vsync: this, value: 0.0);animationController = AnimationController(duration: widget.duration, vsync: this, value: 0.0);rotateController.addListener(_rotateControllerUpdateListener);animationController.addListener(_animationControllerUpdateListener);super.initState();}@overridevoid dispose() {rotateController.removeListener(_rotateControllerUpdateListener);animationController.removeListener(_animationControllerUpdateListener);rotateController.dispose();animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Center(child: Transform.rotate(angle: -(pi / (2 / (1 — rotateController.value))),child: Container(width: widget.size,height: widget.size,child: InkWell(highlightColor: Colors.transparent,splashColor: Colors.transparent,onTap: _buttonTap,child: CustomPaint(foregroundPainter: CustomIconPaint(color: widget.color,strokeColor: widget.strokeColor,sizeIcon: widget.size,value: animationController.value,),),),),),);}void _buttonTap() {widget.onTap();if (rotateController.value == 0) {rotateController.forward();} else {rotateController.reverse();animationController.reverse();}}void _rotateControllerUpdateListener() {if (rotateController.value == 1) {if (animationController.value != 1) {animationController.forward();}} else {animationController.reverse();}setState(() {});}void _animationControllerUpdateListener() => setState(() {});}

We are a team of rock-star developers, which provides fully-flexible and powerful products 💥.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store