Flutter 自定义view

带进度动画的圆环。没gif，效果大家自行脑补。

继承CustomPainter，paint()方法中拿到canvas，绘制API和android差不多。

import 'package:flutter/material.dart';class ProgressRingPainter extends CustomPainter {double strokeWidth = 20;Color _colorBg = Colors.white10;final double progress;ProgressRingPainter({this.progress});@overridevoid paint(Canvas canvas, Size size) {var xCenter = size.width / 2;var yCenter = size.height / 2;Rect rect = Rect.fromCenter(center: Offset(xCenter, yCenter),width: size.width,height: size.height);var paintBg = Paint()..style = PaintingStyle.stroke..isAntiAlias = true..strokeWidth = strokeWidth..color = _colorBg;List<Color> colors = List();colors.add(Colors.white70);colors.add(Colors.white);colors.add(Colors.white70);var paint = Paint()..style = PaintingStyle.stroke..isAntiAlias = true..strokeWidth = strokeWidth..shader = LinearGradient(colors: colors).createShader(rect);canvas.drawArc(rect, 0, 36, false, paintBg);canvas.drawArc(rect, 4.5, -progress, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return true;}
}

import 'package:flutter/material.dart';
import 'package:flutter_app_demo/widget/progress_ring_paint.dart';AnimationController animationController;class ProgressRing extends StatefulWidget {@overrideState<StatefulWidget> createState() {return ProgressRingState();}static void startAnimation() {animationController.forward(from: 0);}
}class ProgressRingState extends State<ProgressRing>with SingleTickerProviderStateMixin {Animation<double> animation;AnimationController controller;@overridevoid initState() {super.initState();controller = new AnimationController(duration: const Duration(seconds: 5), vsync: this);animation = CurvedAnimation(parent: controller, curve: Curves.linear);animation = new Tween(begin: 0.0, end: 36.0).animate(animation);controller.forward(from: 0);animationController = controller;}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return AnimatedProgressRing(animation: animation);}
}class AnimatedProgressRing extends AnimatedWidget {AnimatedProgressRing({Key key, Animation<double> animation}): super(key: key, listenable: animation);Widget build(BuildContext context) {final Animation<double> animation = listenable;return CustomPaint(size: Size(200, 200),painter: ProgressRingPainter(progress: animation.value),);}
}