如何在Flutter中使用share_plus分享QrImageView生成的二维码

问题场景 #

在ListView界面中通过QrImageView生成二维码后，原本能实现本地资源图片分享，但无法直接分享生成的二维码。尝试拆分截图和分享按钮的方案存在问题，需要优化实现逻辑。

修正后的完整代码 #

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:screenshot/screenshot.dart';
import 'package:share_plus/share_plus.dart';

class QrSharePage extends StatefulWidget {
  final String groupId;
  const QrSharePage({super.key, required this.groupId});

  @override
  State<QrSharePage> createState() => _QrSharePageState();
}

class _QrSharePageState extends State<QrSharePage> {
  final ScreenshotController _screenshotController = ScreenshotController();

  // 合并截图与分享逻辑
  Future<void> _shareQrCode() async {
    final box = context.findRenderObject() as RenderBox?;
    try {
      // 捕获QrImageView的截图
      final Uint8List? imageBytes = await _screenshotController.capture();
      if (imageBytes == null) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('二维码截图失败，请重试')),
        );
        return;
      }

      // 分享截图后的图片
      await Share.shareXFiles(
        [
          XFile.fromData(
            imageBytes,
            name: 'group_qr.png',
            mimeType: 'image/png',
          ),
        ],
        sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size,
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('分享失败：${e.toString()}')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          // 用Screenshot包裹QrImageView
          Center(
            child: Screenshot(
              controller: _screenshotController,
              child: QrImageView(
                data: widget.groupId,
                version: QrVersions.auto,
                size: 200,
                gapless: false,
              ),
            ),
          ),
          // 分享按钮，直接触发截图+分享
          Center(
            child: IconButton(
              icon: const Icon(
                Icons.ios_share_rounded,
                size: 30,
              ),
              onPressed: _shareQrCode,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 合并逻辑：将截图和分享操作放在同一个异步方法中，避免拆分按钮导致的imageFile未初始化问题
• 错误处理：添加截图失败、分享异常的捕获提示，提升用户体验
• 参数完善：给分享的XFile指定文件名，确保分享时的文件名合理
• 空值安全：判断截图返回的imageBytes是否为null，避免空指针报错

内容的提问来源于stack exchange，提问作者It'sPhil