图片
使用此组件：
import 'dart:math';import 'package:flutter/material.dart';class CircularBorder extends StatelessWidget { final Color color; final double size; final double width; final Widget icon; const CircularBorder({Key key, this.color = Colors.blue, this.size = 70, this.width = 7.0, this.icon}) : super(key: key); @override Widget build(BuildContext context) { return Container( height: size, width: size, alignment: Alignment.center, child: Stack( alignment: Alignment.center, children: <Widget>[ icon == null ? Container() : icon, CustomPaint( size: Size(size, size), foregroundPainter: new MyPainter( completeColor: color, width: width), ), ], ), ); }}class MyPainter extends CustomPainter { Color lineColor = Colors.transparent; Color completeColor; double width; MyPainter( { this.completeColor, this.width}); @override void paint(Canvas canvas, Size size) { Paint complete = new Paint() ..color = completeColor ..strokeCap = StrokeCap.round ..style = PaintingStyle.stroke ..strokeWidth = width; Offset center = new Offset(size.width / 2, size.height / 2); double radius = min(size.width / 2, size.height / 2); var percent = (size.width *0.001) / 2; double arcAngle = 2 * pi * percent; print("$radius - radius"); print("$arcAngle - arcAngle"); print("${radius / arcAngle} - divider"); for (var i = 0; i < 8; i++) { var init = (-pi / 2)*(i/2); canvas.drawArc(new Rect.fromCircle(center: center, radius: radius), init, arcAngle, false, complete); } } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; }}使用：
CircularBorder( width: 6, size: 55, color: Colors.grey, icon: Icon(Icons.access_alarm, color: Colors.grey), ),
