Flutter中如何截取超出屏幕尺寸的Widget？

需要截取超出屏幕尺寸的大型Widget（graphview包中的Graph），使用InteractiveViewer展示该Widget，但使用RepaintBoundary组件和Screenshot pub包时，仅能截取屏幕可见部分，无法获取屏幕外区域。相关代码如下：

Scaffold(
          body: state.graphInfo.isNotEmpty
              ? RepaintBoundary(
                  key: screen,
                  child: InteractiveViewer(
                    constrained: false,
                    boundaryMargin: const EdgeInsets.all(100),
                    minScale: 0.01,
                    maxScale: 4,
                    child: Column(
                      children: [
                        SizedBox(
                          width: newList.length.toDouble() * 160 + 200,
                          height: 150,
                          child: Container(
                            alignment: Alignment.center,
                            child: ListView.separated(
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              separatorBuilder:
                                  (BuildContext context, int index) {
                                return const SizedBox(
                                  width: 40,
                                );
                              },
                              itemCount: newList.length,
                              physics: const NeverScrollableScrollPhysics(),
                              itemBuilder: (context, index) {
                                return SizedBox(
                                  height: 300,
                                  width: 150,
                                  child: Center(
                                    child: Padding(
                                      padding: const EdgeInsets.only(
                                          right: 8.0, left: 8.0),
                                      child: Text(
                                        newList[index],
                                        overflow: TextOverflow.clip,
                                        textAlign: TextAlign.center,
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ),
                        GraphView(
                          graph: GetGraph.getGraph(state.graphInfo,
                              state.checkList, state.totalPatient),
                          algorithm: BuchheimWalkerAlgorithm(
                              builder, TreeEdgeRenderer(builder)),
                          builder: (Node node) {
                            var a = node.key!.value["label"].round();
                            return circleWidget(a, state.totalPatient);
                          },
                        ),
                      ],
                    ),
                  ),
                )
              : const Center(
                  child: Text("Aucune donnée."),
                ),
          floatingActionButton: state.graphInfo.isNotEmpty
              ? FloatingActionButton(
                  child: const Icon(Icons.screenshot_monitor),
                  onPressed: () async {
                    RenderRepaintBoundary boundary = screen.currentContext!
                        .findRenderObject() as RenderRepaintBoundary;
                    ui.Image image = await boundary.toImage();
                    final byteData =
                        await image.toByteData(format: ui.ImageByteFormat.png);

                    final file = File("${state.output_file}/aller.png");
                    await file.writeAsBytes(byteData!.buffer.asUint8List());
                  },
                )
              : null,
        );

核心原因 #

原代码中RepaintBoundary包裹的是InteractiveViewer，而InteractiveViewer会对超出视口的内容进行裁剪，导致toImage()只能捕获当前屏幕可见的区域。

修改方案 #

将RepaintBoundary移至InteractiveViewer内部，直接包裹需要截取的完整内容（顶部横向列表+GraphView），让RepaintBoundary能渲染整个Widget的实际尺寸，而非InteractiveViewer的视口区域。

修改后的代码示例：

// 新增一个GlobalKey用于包裹完整内容
final GlobalKey contentKey = GlobalKey();

Scaffold(
  body: state.graphInfo.isNotEmpty
      ? InteractiveViewer(
          constrained: false,
          boundaryMargin: const EdgeInsets.all(100),
          minScale: 0.01,
          maxScale: 4,
          // InteractiveViewer内部放置带RepaintBoundary的完整内容
          child: RepaintBoundary(
            key: contentKey,
            child: SingleChildScrollView(
              // 允许内容横向滚动，避免被父容器裁剪
              scrollDirection: Axis.horizontal,
              child: Column(
                children: [
                  SizedBox(
                    width: newList.length.toDouble() * 160 + 200,
                    height: 150,
                    child: Container(
                      alignment: Alignment.center,
                      child: ListView.separated(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        separatorBuilder: (BuildContext context, int index) {
                          return const SizedBox(width: 40);
                        },
                        itemCount: newList.length,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return SizedBox(
                            height: 300,
                            width: 150,
                            child: Center(
                              child: Padding(
                                padding: const EdgeInsets.only(right: 8.0, left: 8.0),
                                child: Text(
                                  newList[index],
                                  overflow: TextOverflow.clip,
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  GraphView(
                    graph: GetGraph.getGraph(state.graphInfo, state.checkList, state.totalPatient),
                    algorithm: BuchheimWalkerAlgorithm(builder, TreeEdgeRenderer(builder)),
                    builder: (Node node) {
                      var a = node.key!.value["label"].round();
                      return circleWidget(a, state.totalPatient);
                    },
                  ),
                ],
              ),
            ),
          ),
        )
      : const Center(child: Text("Aucune donnée.")),
  floatingActionButton: state.graphInfo.isNotEmpty
      ? FloatingActionButton(
          child: const Icon(Icons.screenshot_monitor),
          onPressed: () async {
            // 现在获取的是内容区域的RepaintBoundary
            RenderRepaintBoundary boundary = contentKey.currentContext!
                .findRenderObject() as RenderRepaintBoundary;
            // 获取内容的实际尺寸，确保截图完整
            RenderBox renderBox = contentKey.currentContext!.findRenderObject() as RenderBox;
            Size size = renderBox.size;
            // 指定截图尺寸为内容的实际大小
            ui.Image image = await boundary.toImage(pixelRatio: MediaQuery.of(context).devicePixelRatio, size: size);
            final byteData = await image.toByteData(format: ui.ImageByteFormat.png);

            final file = File("${state.output_file}/aller.png");
            await file.writeAsBytes(byteData!.buffer.asUint8List());
          },
        )
      : null,
);

关键说明 #

1. RepaintBoundary位置调整：直接包裹需要截取的完整内容，避免InteractiveViewer的视口裁剪影响。
2. 添加SingleChildScrollView：确保内容能展开到实际尺寸，不会被父容器强制压缩。
3. 指定截图尺寸：通过获取内容的实际Size，在toImage()中传入该尺寸，确保截图覆盖全部区域。
4. 保留InteractiveViewer功能：仍能正常缩放、平移浏览内容，不影响交互体验。

内容的提问来源于stack exchange，提问作者Anthony2609