【Flutter】Widget 转 Image

【环境】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 widgetToImage(Widget widget) async {
    GlobalKey key = GlobalKey(); // 1.通过 key 来获取 BuildContext 从而获取 RenderObject
    Completer completer = Completer(); // 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);

完整代码地址
https://github.com/huangrrui/Widget-to-Image