介绍 ：
在Flutter中，所有内容都围绕Widget。Flutter让你灵活创建一些漂亮的UI小部件，并且该应用程序可以在iOS和Android上使用。因此，将您创建的这些小部件绘制到移动屏幕上，或者我们可以将其称为绘制在画布上（Canvas）。那么我们也可以将其用作绘图板来绘图。
我们将使用custom painter在画布上绘画，我们将提供更改画笔的大小，不透明度和颜色的选项。
该代码位于https://github.com/sharansingh00002/draw
现在让我们来看看这是如何完成的:)
Code Time
我们需要具备的第一个信息是用户与之交互的画布上的点的坐标，我们可以使用Gesture Detector轻松获得该信息。我们将使用手势检测器的onPanUpdate，onPanStart和onPanEnd属性。当用户单击屏幕时使用onPanStart，这样我们可以绘制一个点，但是如果用户拖动，则使用onPanUpdate可以获取连续点，并且OnPanEnd通知用户已停止绘制。
我们将这些点存储在列表中，其中每个元素将具有坐标以及与该点关联的绘制属性。
class DrawingPoints {
Paint paint;
Offset points;
DrawingPoints({this.points, this.paint});
}
在手势检测器中，onPanUpdate函数看起来像
onPanUpdate: (details) {
setState(() {
RenderBox renderBox = context.findRenderObject();
points.add(DrawingPoints(
points: renderBox.globalToLocal(details.globalPosition),
paint: Paint()
..strokeCap = strokeCap
..isAntiAlias = true
..color = selectedColor.withOpacity(opacity)
..strokeWidth = strokeWidth));
});
},
onPanStart: (details) {
setState(() {
RenderBox renderBox = context.findRenderObject();
points.add(DrawingPoints(
points: renderBox.globalToLocal(details.globalPosition),
paint: Paint()
..strokeCap = strokeCap
..isAntiAlias = true
..color = selectedColor.withOpacity(opacity)
..strokeWidth = strokeWidth));
});
},
onPanEnd: (details) {
setState(() {
points.add(null);
});
},
因此，我们使用渲染框获取要在其上进行绘制的渲染对象，并将该框的全局坐标系点转换为局部坐标系。我们将在末尾添加null以标记绘图的结束。
现在让我们看一下自定义的CustomPainter类，该类负责在屏幕上绘制。
class DrawingPainter extends CustomPainter {
DrawingPainter({this.pointsList});
List<DrawingPoints> pointsList;
List<Offset> offsetPoints = List();
@override
void paint(Canvas canvas, Size size) {
for (int i = 0; i < pointsList.length - 1; i++) {
if (pointsList[i] != null && pointsList[i + 1] != null) {
canvas.drawLine(pointsList[i].points, pointsList[i +1].points ,
pointsList[i].paint);
} else if (pointsList[i] != null && pointsList[i + 1] == null) {
offsetPoints.clear();
offsetPoints.add(pointsList[i].points);
offsetPoints.add(Offset(
pointsList[i].points.dx + 0.1, pointsList[i].points.dy + 0.1));
canvas.drawPoints(PointMode.points, offsetPoints, pointsList[i].paint);
}
}
}
@override
bool shouldRepaint(DrawingPainter oldDelegate) => oldDelegate.pointsList!=pointsList;
}
我们使用Canvas.drawLine函数绘制线条，但是如果用户刚刚在屏幕上轻击，则使用Canvas.drawPoint绘制该点。
我们正在检查是否为null，因为在用户停止绘图时我们将添加null，以便如果他再次开始绘图，则最后一个绘图的最后一点和新绘图的起点不应该连接。
要清除屏幕，只需清除pointsList。
定制：
因此，我们可以添加许多自定义项，到目前为止，我已经添加了更改笔触宽度，笔刷的不透明度和颜色的选项。
因此，对于strokeWidth和不透明度Opacity，我们可以简单地使用Slider来更改值，对于Color，我们提供一些预定义的最常用的颜色，以及使用颜色选择器选择其选择的颜色的选项。
这些更改的值存储在与每个绘图点关联的Paint对象中，以便每个点可以具有自己的特征。
Slider(
value: (selectedMode == SelectedMode.StrokeWidth)
? strokeWidth
: opacity,
max: (selectedMode == SelectedMode.StrokeWidth)
? 50.0
: 1.0,
min: 0.0,
onChanged: (val) {
setState(() {
if (selectedMode == SelectedMode.StrokeWidth)
strokeWidth = val;
else
opacity = val;
});
}),
对于颜色选择器，我们使用fuyumi的flutter_colorpicker库https://pub.dartlang.org/packages/flutter_colorpicker
这个项目的代码可以在github上找到：
https://github.com/sharansingh00002/draw
翻译自：https://medium.com/flutter-community/drawing-in-flutter-using-custompainter-307a9f1c21f8
