Flutter - 在后台构建、渲染小部件并捕获它

Question

是否可以在舞台外构建和渲染小部件，因此不可见，然后使用 RepaintBoundary 捕获小部件以将其保存为图像文件？

Background: I want to capture a widget which is already build, but cant make it work with wrapping it with a RepaintBoundary as i cant supply a GlobalKey at this point. See Flutter - RepaintBoundary causes state reset of StatefulWidget

因此，也许一种不同的方法是在用户发出捕获时在后台重建小部件，这次使用 RepaintBoundary 和 GlobalKey，然后丢弃后台渲染的小部件。

我知道有一个 Offstage 小部件，但我不确定如何将它用于此目的。我当前的代码给出了一个失败的断言:

断言失败:第 2752 行第 12 行:'!debugNeedsPaint':不正确。

这可能是因为 Offstage 没有像文档所说的那样绘制:

一个像在树上一样布置 child 的小部件，但没有绘制任何东西......

还有其他方法可以实现吗？

代码:

要捕获的小部件是child，下面的构建方法是返回child的方法，用GestureDetector包裹实现捕获，有我打包在 Offstage 小部件中进行捕获。

  @override
  Widget build(BuildContext context) {

    Widget child = Card(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: children,
        ),
      );

    return GestureDetector(
      onLongPress: () async {

        await showModalBottomSheet(context: context,
            builder: (BuildContext bcontext) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Offstage(
                    offstage: true,
                    child: RepaintBoundary(
                      key: globalKey,
                      child: child,
                    ),
                  ),
                  ListTile(
                      title: 'Capture Widget,
                      onTap: () async {

                        Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.storage]);

                        if (permissions[PermissionGroup.storage] == PermissionStatus.granted) {

                          Directory externalDirectory = await getExternalStorageDirectory();

                          RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();

                          final image = await boundary.toImage(pixelRatio: 2.0);
                          final byteData = await image.toByteData(format: ImageByteFormat.png);

                          String path = externalDirectory.path + '/' + uuid + '.png';

                          File(path).writeAsBytes(byteData.buffer.asUint8List());
                        }

                        Navigator.pop(context);
                      }
                  ),
                  ListTile(
                    title: 'Cancel',
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ],
              );
            });
      },
      child: child,
    );
  }

Answer 1

尝试使用 Stack 小部件并将 Container 或任何要捕获的小部件上方的小部件。

        Stack(
       
            children: <Widget>[
               RepaintBoundary(
                  key: globalKey,
                  child: child,
                ),
              Container(
                 color: Colors.white,
                 height: MediaQuery.of(context).size.height,
                 width: MediaQuery.of(context).size.width,
              ),
              ListTile(
                  title: 'Capture Widget',
                  onTap: () async {

                    Map<PermissionGroup, PermissionStatus> permissions = await PermissionHandler().requestPermissions([PermissionGroup.storage]);

                    if (permissions[PermissionGroup.storage] == PermissionStatus.granted) {

                      Directory externalDirectory = await getExternalStorageDirectory();

                      RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();

                      final image = await boundary.toImage(pixelRatio: 2.0);
                      final byteData = await image.toByteData(format: ImageByteFormat.png);

                      String path = externalDirectory.path + '/' + uuid + '.png';

                      File(path).writeAsBytes(byteData.buffer.asUint8List());
                    }

                    Navigator.pop(context);
                  }
              ),
              ListTile(
                title: 'Cancel',
                onTap: () {
                  Navigator.pop(context);
                },
              ),
            ],
          );