Flutter 自定义控件-仿照安卓和抖音图标绘制

抖音图标：

1、绘制黑色圆角矩形

class MyTrillPainter extends CustomPainter {@overridevoid 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);}
@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

2、绘制红色区域

class MyTrillPainter extends CustomPainter {@overridevoid 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);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyTrillPainter extends CustomPainter {@overridevoid 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);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyTrillPainter extends CustomPainter {@overridevoid 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);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

class MyTrillPainter extends CustomPainter {@overridevoid 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);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

3、绘制青色区域

class MyTrillPainter extends CustomPainter {@overridevoid 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), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.526, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

4、绘制白色区域

class _MyHomePageState extends State<MyHomePage> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overrideWidget build(BuildContext context) {print("main_build");return Scaffold(backgroundColor: Colors.white,appBar: AppBar(title: Text(widget.title),),body: Center(child: CustomPaint(size: Size(300, 300), //指定// 画布大小painter: MyTrillPainter(),),),);}
}//抖音
class MyTrillPainter extends CustomPainter {@overridevoid 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), Offset(size.width / 2 + 30.0 - 7.0, size.height / 2 - 80.0 - 9.0), paint);rect = Rect.fromCircle(center: Offset(size.width / 2 + 60.0 - 7.0, size.height / 2 - 80.0 - 9.0), radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.526, false, paint);rect = Rect.fromCircle(center: Offset(size.width / 2 - 4.0, size.height / 2 - 4.0),radius: 30.0);canvas.drawArc(rect, 0,math.pi * 3 / 2,false,paint..color = Colors.white..strokeWidth = 16.0);canvas.drawLine(Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 4.0),Offset(size.width / 2 + 30.0 - 4.0, size.height / 2 - 80.0 - 4.0),paint);rect = Rect.fromCircle(center:Offset(size.width / 2 + 60.0 - 4.0, size.height / 2 - 80.0 - 4.0),radius: 30.0);canvas.drawArc(rect, math.pi * 1, -math.pi * 0.5, false, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

安卓图标

1、绘制灰色矩形背景

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;_drawRect(size, canvas, paint);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

2、绘制绿色圆角背景

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}//绘制圆角矩形背景void _drawRRect(Size size, Canvas canvas, paint, rCircular) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.lightGreen);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

3、绘制半圆角白色背景

 @overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3); }//绘制半圆角背景void _drawMHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _halfRRectStartX = size.width / 3,_halfRRectStartY = size.height / 3,_halfRRectEndX = size.width * 2 / 3,_halfRRectEndY = size.height * 2 / 3;Rect rect = Rect.fromLTRB(_halfRRectStartX, _halfRRectStartY, _halfRRectEndX, _halfRRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}

4、绘制中间半圆角-左、右边圆角矩形

  @overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3);_drawMLRRect(size, canvas, paint, _rCircular / 4);_drawMRRRect(size, canvas, paint, _rCircular / 4);}//绘制中间半圆角-左边圆角矩形void _drawMLRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 - 30.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 - 6.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-右边圆角矩形void _drawMRRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 + 6.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 * 2 + 30.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}

5、绘制底部2个半圆角矩形

@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);_drawBLHalfRRect(size, canvas, paint, _rCircular / 4);_drawBRHalfRRect(size, canvas, paint, _rCircular / 4);
}//绘制底部左边半圆角void _drawBLHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 20.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 + 44.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部右边半圆角void _drawBRHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 56.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 * 2 - 20.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}

6、绘制顶部弧形区域

//绘制顶部半圆void _drawTopArc(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(size.width / 3, size.height / 6,size.width * 2 / 3, size.height / 6 + 90.0);canvas.drawArc(rect, 3.14, 3.14, true, paint..color = Colors.white);}

7、绘制顶部弧形内部2个小圆点

//绘制顶部半圆-眼睛void _drawTopLeftEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width / 3 + 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部半圆-眼睛void _drawTopRightEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width * 2 / 3 - 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}

8、绘制顶部类似天线的圆角矩形

 //绘制顶部左边天线void _drawTopLeftMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 + 8.0,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(-0.3);canvas.translate(0.0, 18.0);canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部左边天线void _drawTopRightMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 - 8.0,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 * 2,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(0.3);canvas.translate(0.0, -90.0);canvas.rotate(0.3);canvas.drawRRect(rRect, paint..color = Colors.white);}

安卓图标

class MyAndroidPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {var paint = Paint()..isAntiAlias = true..style = PaintingStyle.fill //..strokeWidth = 0.0;//矩形圆角double _rCircular = size.width * 7 / 30;_drawRect(size, canvas, paint);_drawRRect(size, canvas, paint, _rCircular);//绘制中间半圆角_drawMHalfRRect(size, canvas, paint, _rCircular / 3);_drawMLRRect(size, canvas, paint, _rCircular / 4);_drawMRRRect(size, canvas, paint, _rCircular / 4);_drawBLHalfRRect(size, canvas, paint, _rCircular / 4);_drawBRHalfRRect(size, canvas, paint, _rCircular / 4);_drawTopArc(size, canvas, paint);_drawTopLeftEyes(size, canvas, paint);_drawTopRightEyes(size, canvas, paint);_drawTopLeftMast(size, canvas, paint, _rCircular / 8);_drawTopRightMast(size, canvas, paint, _rCircular / 8);}//绘制灰色矩形背景void _drawRect(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);canvas.drawRect(rect, paint..color = Colors.black12);}//绘制圆角矩形背景void _drawRRect(Size size, Canvas canvas, paint, rCircular) {Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.lightGreen);}//绘制半圆角背景void _drawMHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _halfRRectStartX = size.width / 3,_halfRRectStartY = size.height / 3,_halfRRectEndX = size.width * 2 / 3,_halfRRectEndY = size.height * 2 / 3;Rect rect = Rect.fromLTRB(_halfRRectStartX, _halfRRectStartY, _halfRRectEndX, _halfRRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-左边圆角矩形void _drawMLRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 - 30.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 - 6.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制中间半圆角-右边圆角矩形void _drawMRRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 + 6.0,_rRectStartY = size.height / 3,_rRectEndX = size.width / 3 * 2 + 30.0,_rRectEndY = size.height / 3 * 2 - 20.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部左边半圆角void _drawBLHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 20.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 + 44.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制底部右边半圆角void _drawBRHalfRRect(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 + 56.0,_rRectStartY = size.height / 3 * 2,_rRectEndX = size.width / 3 * 2 - 20.0,_rRectEndY = size.height / 3 * 2 + 40.0;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndCorners(rect,bottomLeft: Radius.circular(rCircular),bottomRight: Radius.circular(rCircular),topLeft: Radius.circular(0.0),topRight: Radius.circular(0.0));canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部半圆void _drawTopArc(Size size, Canvas canvas, paint) {Rect rect = Rect.fromLTRB(size.width / 3, size.height / 6,size.width * 2 / 3, size.height / 6 + 90.0);canvas.drawArc(rect, 3.14, 3.14, true, paint..color = Colors.white);}//绘制顶部半圆-眼睛void _drawTopLeftEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width / 3 + 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部半圆-眼睛void _drawTopRightEyes(Size size, Canvas canvas, paint) {Offset offset = Offset(size.width * 2 / 3 - 30.0, size.height / 6 + 20.0);canvas.drawCircle(offset, 6.0, paint..color = Colors.lightGreen);}//绘制顶部左边天线void _drawTopLeftMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 + 8.0,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(-0.3);canvas.translate(0.0, 18.0);canvas.drawRRect(rRect, paint..color = Colors.white);}//绘制顶部左边天线void _drawTopRightMast(Size size, Canvas canvas, paint, rCircular) {double _rRectStartX = size.width / 3 * 2 - 8.0,_rRectStartY = size.height / 7,_rRectEndX = size.width / 3 * 2,_rRectEndY = size.height / 4;Rect rect =Rect.fromLTRB(_rRectStartX, _rRectStartY, _rRectEndX, _rRectEndY);RRect rRect = RRect.fromRectAndRadius(rect, Radius.circular(rCircular));canvas.rotate(0.3);canvas.translate(0.0, -90.0);canvas.rotate(0.3);canvas.drawRRect(rRect, paint..color = Colors.white);}@overridebool shouldRepaint(CustomPainter oldDelegate) => true;
}

Flutter 自定义控件-仿照安卓和抖音图标绘制相关推荐

Unity之ASE实现故障干扰效果(抖音图标)
前言今天我们来实现一个类似抖音图标的故障干扰效果,如下图所示: 原理我们看到效果图里面有看到红色和蓝色的颜色左右扰动偏移,其实它的实现原理很简单.就是一个图片的R通道和B通道左右偏移,加上一个扰 ...
动态壁纸安卓_抖音火爆的时间罗盘壁纸，苹果安卓都支持！
点击[抖音壁纸表情]- 右上角找到[-] 立刻设我为星标/置顶 - 谢谢你. 求图请加V:moonkiss0505 长按保存点击放大图片很大,请在 W i f i 下浏览大家好,这两天大 ...
安卓版抖音权重查询工具直播必备礼物收割机【软件+详细教程】
抖音查权重工具,说起抖音查权重,反正近期市面上非常热门的一个风口项目,做自媒体的都懂,可以一键查询抖音账号的权重. 设备需求:安卓手机下单后自动发货软件+操作教程
创作工具抖音Android,抖音灵魂出窍特效制作bgm安卓版-抖音灵魂出窍特效制作软件v1.5.0 最新版-腾牛安卓网...
抖音灵魂出窍特效制作软件是一款特效制作软件,不要你背负包袱去拍一个令人称奇的作品,亦或是模仿一个世俗的视角,而是让音乐的情绪带你飞,展现你的自信和个性,随意展现,这里每一个时刻都是你,而且就是你! 灵 ...
uniapp 打包安卓 Android 抖音app 前端篇~01
文章目录一.配置 1. 修改后端服务地址 2. 基础配置 3. App图标配置 4. App启动页面配置 5. App模块配置二.发行 2.1. 云打包 2.2. 云打包配置 2.3. 下载app ...
uniapp 打包安卓 Android 抖音app 前后端调试篇~03
文章目录 1. 未登录首页浏览短视频 2. 发布视频-云短信登录 3. 发布选择视频 4. 上传短视频到云存储 5. 测试发布视频 6. 个人中心查看发布视频 7. 首页查看刚发布视频 8. 个人中心 ...
uniapp 打包安卓 Android 抖音app 后端篇~02
文章目录 1. 中间件配置 2. 云短信配置 1. 中间件配置 2. 云短信配置
动态壁纸安卓_抖音上超火的时间轮盘动态壁纸，安卓苹果都可以设置！个性好看...
今天给大家分享一个最近很火的时间轮盘带姓氏的壁纸效果呢就像我们现在看到的这样看起来呢有点像古墓的感觉同时我们常见的带姓氏的壁纸我也已经给大家准备好了制作呢也非常的简单我们只需要在微信的搜索页 ...
【有利可图网】PS实战系列：制作抖音UI图标
今天给大家更新一个有趣的制作抖音图标的教程. 1.首先新建一个1024X768分辨率为72像素/英寸的温度,为了看得清楚一点,给背景填充一个浅蓝色#8d8dff,然后现在椭圆选框工具,属性栏上将样式改 ...

Flutter 自定义控件-仿照安卓和抖音图标绘制

抖音图标：

1、绘制黑色圆角矩形

2、绘制红色区域

3、绘制青色区域

4、绘制白色区域

安卓图标

1、绘制灰色矩形背景

2、绘制绿色圆角背景

3、绘制半圆角白色背景

4、绘制中间半圆角-左、右边圆角矩形

5、绘制底部2个半圆角矩形

6、绘制顶部弧形区域

7、绘制顶部弧形内部2个小圆点

8、绘制顶部类似天线的圆角矩形

安卓图标

Flutter 自定义控件-仿照安卓和抖音图标绘制相关推荐

最新文章

热门文章