Flutter中自定义组件一般有两种方式：
- 通过已有widget进行组合
- 通过CustomPaint进行绘制
下面主要介绍下CustomPaint绘制方式。
1. 认识CustomPaint
CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：
const CustomPaint({
Key key,
this.painter,
this.foregroundPainter,
this.size = Size.zero,
this.isComplex = false,
this.willChange = false,
Widget child,
}) : assert(size != null),
assert(isComplex != null),
assert(willChange != null),
super(key: key, child: child);
painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。
size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。
isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。
2. CustomPainter
可实现CustomPainter子类进行UI绘制
void paint(Canvas canvas, Size size);
实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。
2.1 Paint
Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。
Paint _paint = Paint()
..color = Colors.pink //画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..blendMode = BlendMode.exclusion //颜色混合模式
..style = PaintingStyle.fill //绘画风格，默认为填充
..colorFilter = ColorFilter.mode(Colors.blueAccent,
BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个
..filterQuality = FilterQuality.high //颜色渲染模式的质量
..strokeWidth = 15.0; //画笔的宽度
根据需求选择合适的画笔属性，完成你的绘制。
2.2 Canvas
Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。
下面介绍下Canvas的绘制方法：
2.2.1 绘制点
void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
PointMode是个枚举
enum PointMode {
/// Draw each point separately.仅绘制单独的点
points,
/// Draw each sequence of two points as a line segment.绘制连线，两两连线
lines,
/// Draw the entire sequence of point as one line.绘制封闭连线，上个点连接下个点
polygon,
}
Offset是相对于绘制区域的偏移坐标，可以定义点坐标
2.2.2 绘制线
void drawLine(Offset p1, Offset p2, Paint paint)
p1、p2为线段两个端点
2.2.3 绘制矩形
void drawRect(Rect rect, Paint paint)
Rect定义矩形的大小位置，有多种构造方式:
//使用左上和右下角坐标来确定矩形的大小和位置
fromPoints(Offset a, Offset b)
//使用圆的圆心点坐标和半径和确定外切矩形的大小和位置
fromCircle({ Offset center, double radius })
//使用矩形左边的X坐标、矩形顶部的Y坐标、矩形右边的X坐标、矩形底部的Y坐标来确定矩形的大小和位置
fromLTRB(double left, double top, double right, double bottom)
//使用矩形左边的X坐标、矩形顶部的Y坐标矩形的宽高来确定矩形的大小和位置
fromLTWH(double left, double top, double width, double height)
2.2.4 绘制圆角矩形
void drawRRect(RRect rrect, Paint paint)
RRect描述圆角矩形，他通过Rect和Radius来构造
RRect.fromRectAndRadius(rect, radius)
//举例说明
Rect rect = Rect.fromCircle(center: Offset(100.0, 200.0), radius: 30.0);
RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
2.2.5 绘制圆
void drawCircle(Offset c, double radius, Paint paint)
画圆比较简单，c表示圆心位置，radius是半径。
2.2.6 绘制椭圆
void drawOval(Rect rect, Paint paint)
椭圆使用外接矩形确定大小位置，rect就是外接矩形。
2.2.7 绘制弧形
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)
绘制弧形，先确定弧形对应的椭圆，同样地用外接矩形rect确定椭圆，然后根据起始点和结束点角度来确定那一段弧度，startAngle，sweepAngle分别代表起始和结束点角度，角度用弧度表示法。
useCenter表示是否连接闭合形状，userCenter = false表示不闭合，即画一段弧线，userCenter = true表示闭合，即绘制一个扇形。
2.2.8 绘制路径
void drawPath(Path path, Paint paint)
绘制路径，关键在于构建路径Path，可以直接new Path对象，然后通过path方法可以连接出图形，path关键方法如下：
moveTo //移动到路径起始位置
lineTo //用直线连接指定点
arcTo //用曲线连接到指定点
conicTo //用二阶贝塞尔曲线连接到指定点
cubicTo //用三阶贝塞尔曲线连接到指定点
contains //判断当前路径上是否包含某点
close //路径闭合，用直线连接到起始点
reset //重置路径，恢复到默认状态
还有其他方法，有兴趣可以查看API。
