Flutter使用RepaintBoundary截图后如何直接在屏幕展示无需存文件

你完全不需要把截图存到本地，RepaintBoundary.toImage() 方法返回的是内存级别的 dart:ui.Image 对象，直接用这个对象在当前页渲染即可，完整实现流程如下：

1. 绑定截图区域Key #

首先给需要截图的 RepaintBoundary 绑定全局Key，用来获取渲染对象：

// 页面 State 内定义全局Key
final GlobalKey _repaintBoundaryKey = GlobalKey();

// Widget树中绑定Key
RepaintBoundary(
  key: _repaintBoundaryKey,
  child: Container(
    // 你需要截图的目标组件区域
    width: 300,
    height: 300,
    color: Colors.blue,
    child: const Text("待截图内容"),
  ),
)

2. 实现内存截图逻辑 #

在触发截图的回调（比如按钮点击事件）中执行截图，直接拿到内存中的图片对象，不需要本地存储：

import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';

Future<ui.Image?> _takeScreenshot() async {
  try {
    // 获取RepaintBoundary对应的渲染对象
    RenderRepaintBoundary? renderBoundary = 
        _repaintBoundaryKey.currentContext?.findRenderObject() as RenderRepaintBoundary?;
    if (renderBoundary == null) return null;
    // 生成内存图片，pixelRatio匹配设备像素比保证清晰度
    ui.Image image = await renderBoundary.toImage(
      pixelRatio: MediaQuery.of(context).devicePixelRatio
    );
    return image;
  } catch (e) {
    debugPrint("截图失败: $e");
    return null;
  }
}

3. 直接在当前页渲染截图 #

有两种常用的渲染方式，都不需要本地文件：

方式1：用RawImage直接渲染ui.Image对象 #

适合仅需要展示的场景，性能最优：

// State中定义存储截图的变量
ui.Image? _capturedImage;

// 触发截图后更新状态
void _handleScreenshot() async {
  _capturedImage = await _takeScreenshot();
  setState(() {});
}

// Widget树中添加展示逻辑
if (_capturedImage != null)
  Container(
    margin: const EdgeInsets.only(top: 20),
    decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
    child: RawImage(
      image: _capturedImage!,
      width: 200,
      height: 200,
      fit: BoxFit.contain,
    ),
  )

方式2：转字节流用Image.memory渲染 #

适合需要同时做上传、分享等其他处理的场景：

// State中定义存储截图字节的变量
Uint8List? _capturedImageBytes;

// ui.Image转PNG格式字节流
Future<Uint8List?> _imageToBytes(ui.Image image) async {
  ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  return byteData?.buffer.asUint8List();
}

// 触发截图后处理
void _handleScreenshot() async {
  final image = await _takeScreenshot();
  if (image != null) {
    _capturedImageBytes = await _imageToBytes(image);
    setState(() {});
  }
}

// Widget树中展示
if (_capturedImageBytes != null)
  Container(
    margin: const EdgeInsets.only(top: 20),
    decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
    child: Image.memory(
      _capturedImageBytes!,
      width: 200,
      height: 200,
      fit: BoxFit.contain,
    ),
  )

注意事项 #

• 必须保证 RepaintBoundary 已经完成布局渲染后再执行截图，否则会获取不到渲染对象
• toImage 方法的 pixelRatio 不要写死为1，用设备的像素比可以避免截图模糊
• 如果需要在弹窗中展示截图，拿到图片对象后直接调用showDialog，把图片组件放在弹窗内容中即可

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