最近在做需求的时候设计师做了一个背景不规则的icon，如下图：
企业微信20240708-174145.png
由于之后背景的渐变，描边的颜色和内部的字体可能都会变化，所以不采用直接切图的方式来做。
如果直接使用flutter的decoration来做的话没有办法直接实现，所以就决定用自定义painter和clipper的方法实现了
第一步，很简单的画Container的渐变背景，用decoration直接实现
Container(
width: 200,
height: 100,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Color(0xFFFFD5D5),
Color(0xFFFFECE6),
],
),
),
)
很简单，如图所示：
11.jpg
第二步，通过ClipPath来裁剪背景，因为左侧是一个半圆，所以半圆的半径就是Container高度的一半
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, 0);
final center = Offset(size.height / 2, size.height / 2);
final radius = math.min(size.width, size.height) / 2;
path.arcTo(
Rect.fromCircle(center: center, radius: radius),
math.pi / 2, //注意要旋转90度才可以是左侧的半圆
math.pi,
true,
);
path.close();
path.moveTo(size.height / 2, size.height);
path.lineTo(size.width - 15, size.height);
path.lineTo(size.width, 0);
path.lineTo(size.height / 2, 0);
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return true;
}
}
背景完成后如图：
11.png
这里需要注意一下，这里如果直接使用decoration的border属性，border也会被Cliper裁减掉，如下图：
11.png
所以内部采用了自定义CustomPaint的Painter的方式来实现子widget和border，代码如下：
class MyPainter extends CustomPainter {
final myPaint = Paint()
..color = Colors.black
..isAntiAlias = true
..strokeWidth = 5
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
Path path = Path();
path.moveTo(0, 0);
final center = Offset(size.height / 2, size.height / 2);
final radius = math.min(size.width, size.height) / 2;
path.arcTo(
Rect.fromCircle(center: center, radius: radius),
math.pi / 2,
math.pi,
true,
);
path.moveTo(size.height / 2, size.height);
path.lineTo(size.width - 15, size.height);
path.lineTo(size.width, 0);
path.lineTo(size.height / 2, 0);
canvas.drawPath(path, myPaint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
几乎和背景的Cliper的path一样，主要是在画完圆弧之后path不要close，要继续画直线。
效果如下图:
11.jpg
这样就实现了不规则图形和描边的绘制~~
