【环境】Flutter (Channel stable, 1.22.2, on Mac OS X 10.15.7 19H2, locale zh-Hans-CN)
不知道各位小伙伴有没有遇到过需要将 Widget 转成图片保存下来的需求，今天就来介绍一下这个功能具体是怎么实现的。
大家都知道，写一个新的 Widget 需要继承 StatelessWidget 或者 StatefulWidget 类，然后需要重写 build 方法，build 方法会传入 BuildContext 对象，从字面意思可以判断出，这个应该是与 Widget 的显示有关的东西，进入到源码中看一下
abstract class BuildContext
这是一个抽象类，通过查看源码，可以找到这个东西
截屏2020-11-05 上午10.28.45.png
RenderObject，应该就是和渲染相关的东西了，阅读说明，第二段很重要，大意是，在 build 过程完成后，才可以获取到这个renderObject，后面将要用到的。
关键方法
Future<Uint8List> widgetToImage(Widget widget) async {
GlobalKey key = GlobalKey(); // 1.通过 key 来获取 BuildContext 从而获取 RenderObject
Completer completer = Completer<Uint8List>(); // 2.因为要等待回调之后才能返回，所以需要使用到 Completer
setState(() {
widgetToConvert = RepaintBoundary(key: key, child: widget); // 3.将需要转换为图片的 widget 显示出来，才能获取到 BuildContext
});
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
// 4.此时如果立刻执行下面的代码，是获取不到 BuildContext，因为 widget 还没有完成绘制
// 所以需要等待这一帧绘制完成后，才能开始转换图片
if (key.currentContext?.findRenderObject() != null) {
RenderRepaintBoundary render = key.currentContext.findRenderObject();
ui.Image image = await render.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
completer.complete(byteData.buffer.asUint8List());
}
setState(() {
widgetToConvert = null; // 5.图片已经绘制完成，不需要显示该 widget 了
});
});
// 6.返回数据，使用 Completer 可以实现返回和回调数据相关的 Future
return completer.future;
}
Page 的 build 方法需要处理一下，因为只有将 widget 显示出来，才能转换为图片
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
child ?? Container(),
Positioned.fill(
child: yourPage(),
),
],
),
);
}
至此已经完成了基本转换功能了
但是，如果 Widget 里面包含了图片，会发现图片在第一次转换的时候，图片显示不出来的。
这个是因为，widget 的绘制和图片的绘制不是同步的。所以当 widget 绘制完成时，图片并没有加载完毕所以不显示。第二次因为图片已经缓存，所以转换成图片是正常的。
所以如果包含了图片，需要先将图片手动缓存，以 AssetImage 为例子，代码如下
AssetImage provider = AssetImage('assets/images/1.png');
await precacheImage(provider, context);
