捕获QR图片触发空值检查错误，需实现本地存储保存

问题根源分析 #

1. Key不匹配：RepaintBoundary使用的是qrKey，但捕获逻辑中误用了globalKey，导致currentContext为null，触发「Null check operator used on a null value」错误。
2. 未处理空值风险：byteData和pngBytes可能为null，直接使用!强制解包会引发错误。
3. 分享路径错误：分享时引用固定的assets路径，而非实际保存的临时文件路径。

修正后的代码 #

1. 确保全局Key定义

final GlobalKey qrKey = GlobalKey();

2. 修正捕获与保存逻辑

Future<void> _captureAndSharePng() async {
  try {
    // 检查RepaintBoundary上下文是否存在
    final context = qrKey.currentContext;
    if (context == null) {
      print("无法获取QR图片渲染上下文");
      return;
    }
    
    RenderRepaintBoundary boundary = context.findRenderObject() as RenderRepaintBoundary;
    var image = await boundary.toImage();
    ByteData? byteData = await image.toByteData(format: ImageByteFormat.png);
    
    // 处理字节数据为空的情况
    if (byteData == null) {
      print("无法生成QR图片字节数据");
      return;
    }
    
    Uint8List pngBytes = byteData.buffer.asUint8List();

    // 保存到临时目录
    final tempDir = await getTemporaryDirectory();
    final file = File('${tempDir.path}/qr_code.png');
    await file.writeAsBytes(pngBytes);

    // 分享保存后的图片
    await Share.shareXFiles([XFile(file.path)], text: _dataList());
  } catch (e) {
    print(e.toString());
  }
}

3. RepaintBoundary保持原结构（确保key为qrKey）

RepaintBoundary(
  key: qrKey,
  child: QrImage(
    padding: const EdgeInsets.all(11),
    data: _dataList(),
    backgroundColor: Colors.white,
    size: height*0.2,
    errorCorrectionLevel: QrErrorCorrectLevel.L,
    dataModuleStyle: const QrDataModuleStyle(dataModuleShape: QrDataModuleShape.circle, color: Colors.black),
  ),
),

关键说明 #

• 必须保证qrKey是全局定义的GlobalKey，才能正确关联RepaintBoundary的渲染上下文。
• 新增的空值判断避免了强制解包!带来的空值崩溃。
• 分享时使用临时目录中的实际文件路径，确保分享的是生成的QR图片。

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