前言：
最近项目需要使用Flutter做UI界面，其中涉及绘图方面的操作，Flutter我又是刚接触一周，不太熟悉，因此我打算专门做一个小Demo体验一下，找找手感。
Demo的目标：
点到哪里，哪里就出现一个小红点跟着。
实现步骤：
1、首先这是个活动页面，因此首先页面的实现要继承StatefulWidget。另外要获取用户的触摸事件，因此需要在build方法中使用Listener这一款widget：
可以看到，通过传入onPointDown、onPointerMove、onPointerUp的回调实现，即可在widget被触摸时收到对应的触摸事件类型和触摸坐标了。接着使用setState召唤框架去把widget树更新一下，需要使用到这个坐标变量的控件就会读到新变量的值，从而做各种绘制了。
我的实现如下：
@override
Widget build(BuildContext context) {
DotPainter painter = DotPainter(_globalPosition);
return Listener(
child: CustomPaint(
size: Size.infinite,
painter: painter,
foregroundPainter: painter,
child: null,
),
onPointerMove: (PointerMoveEvent e) => {
setState(() {
_globalPosition = e.localPosition;
})
},
);
}2、Canvas的使用：
? ? ? ? 在上一步的代码中，有一个DotPainter?Widget，这个就是我自定义的CustomPainter，为什么要用这个CustomPainter呢？因为要用Canvas进行绘制，就需要使用CustomPaint这个widget依附到StatefulWidget中，由CustomPaint把Canvas下发到CustomPainter的paint方法中，这样我才能拿到Canvas，在框架被调用setState更新UI树时，把要绘制的东西画到Canvas中，并最终显示到页面上。
? ? ? ? 具体代码实现如下：
import 'dart:ui';
import 'package:flutter/material.dart';
class DotPainter extends CustomPainter {
Offset mGlobalPosition;
Paint _mPaint = Paint();
DotPainter(
this.mGlobalPosition //传入正在触摸的坐标
);
@override
void paint(Canvas canvas, Size size) {
_mPaint..color = Colors.red
..strokeWidth = 100
..strokeCap = StrokeCap.round
..isAntiAlias = true;
_drawXyDot(canvas);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
//todo 暂时无脑true
return true;
}
void _drawXyDot(Canvas canvas) {
print('globalPosition == $mGlobalPosition');
if (mGlobalPosition == null) return;
canvas.drawPoints(PointMode.points, [mGlobalPosition], _mPaint);
}
}其中绘制东西需要使用“画笔”，具体使用方法和安卓差不多，就是设置各种绘制特性而已。
另外shouldRepaint用来控制每次widget树更新的时候，时候重绘这个widget的内容，以免产生多次无用绘制。这里要的就是不停的绘制，所以无脑return?true就好了。
当mGlobalPosition被外部更新时，setState触发widget树绘制，此时paint方法被回调，被带来canvas，然后调用我的私有方法drawXyDot，此时我调用canvas的drawPoints方法，在mGlobalPosition记录的坐标处使用mPaint记录的画笔颜色、粗细等属性绘制一个点。反复被调用后，这个过程就成了一个点跟着我的手指移动了。
实际效果：
原本在这里
按着可以拖动到别处：
?flutter跨端调试起来还是挺爽的，写一套UI代码，无论在Android端还是web端的表现都比较一致，但是web端按F12看一下，很明显是想需要加载一套很大的2d引擎才能进行界面绘制，并没有生成h5元素，其表现和真正的网页还是有点不同的，不过也不是什么坏事了。
?
