Flutter提供了一个RepaintBoundaryWidget来实现截图的功能，用RepaintBoundary包裹需要截取的部分，RenderRepaintBoundary可以将RepaintBoundary包裹的部分截取出来；然后通过boundary.toImage()方法转化为ui.Image对象，再使用image.toByteData()将image转化为byteData；最后通过File().writeAsBytes()存储为文件对象：
RepaintBoundary(
key: _repaintKey,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Image.asset(
'images/food01.jpeg',
fit: BoxFit.cover,
),
Icon(Icons.translate,),
],
),
)
RenderRepaintBoundary boundary =
_repaintKey.currentContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
File(tempPath).writeAsBytes(pngBytes);
需要注意的地方：
记住给RepaintBoundary添加一个key，因为我们需要通过这个key来找到当前的RenderObject，生成一个RenderRepaintBoundary对象；
image.toByteData(format: format)可以自定义存储格式，一般图片为png格式，但是要注意，如果你的RepaintBoundary包裹的部分没有设置背景色，那么存储出来的图片可能会有背景色缺失的问题，boundary.toImage()并不会自动添加一个你想要的白色背景，这种情况在截取Text的时候会尤其明显。
toImage({double pixelRatio = 1.0})中的pixelRatio参数是可以表面上提高图片清晰度的。为什么说是表面上呢？因为这个参数是纯px为单位的，和你的屏幕密度并没有关系。以安卓为例，屏幕基础宽高为360px*480px， 默认输出也是360px*480px的图片文件；如果你将pixelRatio设置为10，那么你输出的图片文件大小将是3600px*4800px，但是展示这张图的手机屏幕大小并不会改变，图变大了，自然看起来“清晰”了。因此，这个值我建议取window.devicePixelRatio。
Flutter中获取存储路径
我们可以通过官方插件path_provider来获取APP的内部和外部存储路径：
Directory tempDir = await getTemporaryDirectory()，等同于iOS中的NSCachesDirectoryAPI和Android中的getCacheDirAPI；
Directory externalDir = await getExternalStorageDirectory()，不支持iOS（会抛出UnsupportedError），等同于Android中的getExternalStorageDirectoryAPI；
Directory applicationDir = await getApplicationDocumentsDirectory()，等同于iOS中的NSDocumentsDirectoryAPI和Android中的AppData目录；
要注意的是getExternalStorageDirectory()方法，大多数情况下是访问SDCard路径，因此即使在Android中调用，也要注意权限问题，推荐使用permission_handler插件。 还有就是存储文件的时候要养成一个好习惯，先判断下父目录是否存在：
void _saveImage(Uint8List uint8List, Directory dir, String fileName)
async { bool isDirExist = await Directory(dir.path).exists();
if(!isDirExist) Directory(dir.path).create();
······
File(tempPath).writeAsBytes(uint8List);}
涂鸦
通过GestureDetector包裹需要绘制的区域，收集用户的手势路径信息，通过canvas.drawLine()方法来绘制路径：
List points = [];
GestureDetector( onPanStart: (details) { },
onPanUpdate: (details) {
RenderBox referenceBox = context.findRenderObject();
OffsetlocalPosition = referenceBox.globalToLocal(details.globalPosition);
state(() { points.add(localPosition); }); },
onPanEnd: (details) { }, )
for(int i = 0; i < points.length - 1; i++) {
if(points[i] != null && points[i + 1] != null)
canvas.drawLine(points[i], points[i + 1], _linePaint);
}
为什么不直接用canvas.drawPoints()方法呢？
即使将PointMode设置为PointMode.lines，你会发现，绘制出来的点集合并不是无缝连接在一起的，看起来就像是虚线一样：
更新：评论有人说可以使用PointMode.polygon，polygon确实可以绘制连续的曲线，但是有两个缺点：一是绘制不如drawLine流畅，延迟会大一点，因为暂时的实现方式是用户手指每动一次都会重绘一次，消耗比较大；二是绘制出来的线条不如直接绘制line来得圆润。我之前没有深度考虑drawPoints的一个原因就是延迟太大。以后如果能找到更好的刷新机制，我会尝试使用drawPoints来绘制的。
因此我们还是使用drawLine()强行将所有点连接起来。
用户绘制完成后，依然是使用RepaintBoundary来保存图片就可以啦～～～
