/** * Created with Android Studio. * User: ryan * Date: 2019/1/20 * Time: 上午11:34 * email: zhu.yan@alibaba-inc.com * tartget: CircleProgressBarPainter 的示例 */ import 'dart:ui'; import 'package:flutter/material.dart'; class CustomViewPage extends StatefulWidget { @override State createState() => CustomViewPageState(); } class CustomViewPageState extends State with SingleTickerProviderStateMixin { Animation _doubleAnimation; AnimationController _controller; CurvedAnimation curvedAnimation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 2)); curvedAnimation = CurvedAnimation(parent: _controller, curve: Curves.decelerate); _doubleAnimation = Tween(begin: 0.0, end: 360.0).animate(_controller); _controller.addListener(() { if(mounted){ this.setState(() {}); } }); onAnimationStart(); } @override Widget build(BuildContext context) { return Container( width: 100.0, height: 100.0, margin: EdgeInsets.all(8.0), child: CustomPaint( child: Center( child: Text((_doubleAnimation.value / 3.6).round().toString())), painter: CircleProgressBarPainter(_doubleAnimation.value) ), ); } void onAnimationStart() { _controller.forward(from: 0.0); } @override void reassemble() { super.reassemble(); onAnimationStart(); } @override void dispose() { super.dispose(); _controller.dispose(); } } class CircleProgressBarPainter extends CustomPainter { Paint _paintBackground; Paint _paintFore; final double pi = 3.1415926; var jindu; CircleProgressBarPainter(this.jindu) { _paintBackground = Paint() ..color = Colors.grey ..strokeCap = StrokeCap.round ..style = PaintingStyle.stroke ..strokeWidth = 10.0 ..isAntiAlias = true; _paintFore = Paint() ..color = Colors.red ..strokeCap = StrokeCap.round ..style = PaintingStyle.stroke ..strokeWidth = 10.0 ..isAntiAlias = true; } @override void paint(Canvas canvas, Size size) { canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2,_paintBackground); Rect rect = Rect.fromCircle( center: Offset(size.width / 2, size.height / 2), radius: size.width / 2, ); canvas.drawArc(rect, 0.0, jindu * 3.14 / 180, false, _paintFore); } @override bool shouldRepaint(CustomPainter oldDelegate) { return false; } }