Flutter 自定义控件-仿照安卓和抖音图标绘制(1)，含小米、腾讯、阿里

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyTrillPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 1.0

…color = Colors.black; //背景为纸红色

// 设置矩形的半径和圆角的半径相等，效果如下面右图

Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);

RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

canvas.drawRRect(rRect, paint);

paint

…style = PaintingStyle.stroke //

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);

canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

class MyTrillPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 1.0

…color = Colors.black; //背景为纸红色

// 设置矩形的半径和圆角的半径相等，效果如下面右图

Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);

RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

canvas.drawRRect(rRect, paint);

paint

…style = PaintingStyle.stroke //

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);

canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);

}

@override

bool shouldRepaint(CustomPainter oldDelegate) => true;

}

3、绘制青色区域

class MyTrillPainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint()

…isAntiAlias = true

…style = PaintingStyle.fill //

…strokeWidth = 1.0

…color = Colors.black; //背景为纸红色

// 设置矩形的半径和圆角的半径相等，效果如下面右图

Rect rect = Rect.fromLTRB(55.0, 30.0, 255.0, 220.0);

RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));

canvas.drawRRect(rRect, paint);

paint

…style = PaintingStyle.stroke //

…strokeWidth = 60.0 / 3

…color = Colors.redAccent; //背景为纸红色

rect = Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2, false, paint);

canvas.drawLine(Offset(size.width / 2 + 30.0, size.height / 2), Offset(size.width / 2 + 30.0, size.height / 2 - 84.0), paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0, size.height / 2 - 80.0), radius: 30.0);

canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);

rect = Rect.fromCircle(center: Offset(size.width / 2 - 7.0, size.height / 2 - 9.0), radius: 30.0);

canvas.drawArc(rect, 0, math.pi * 3 / 2 + 0.1, false, paint…color = Colors.cyanAccent);

canvas.drawLine(Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 9.0), Off