Flutter 中实现截图指定控件并进行微信分享和本地存储

1、在需要转换的控件最外部包裹一层 RepaintBoundary()；

Flutter中截图的主要用到了类RepaintBoundary。

RepaintBoundary(
	key: pictureShareSlurpKey,
		child: Container(
		  child: Container(
		    child: Column(
		      children: [
		       //
		       需要转换的控件。
		       //
		      ],
		    ),
	  ),
),

2、传入绘制控件范围的 GlobalKey()

GlobalKey repaintWidgetKey = GlobalKey(); // 绘图key值

3、将截屏的图片生成ByteData

首先进行存储权限的验证，没有权限的情况下去请求权限。

我用的是 permission_handler获取存储权限。其他的一个库，都在下面列出来了，仅供借鉴。
然后通过 RenderRepaintBoundary 中的 toImage() API 来获取当前控件生成的 ByteData。

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';

SharePosterUtils{
	static Future<ByteData?> getWidgetToImageByteData(GlobalKey repaintKey) async {
	    //存储权限
	    PermissionStatus status = await Permission.storage.status;
	    XccLog.write('status', status);
	    if (!status.isGranted) {
	      XccLog.write('获取存储权限');
	      status = await Permission.storage.request();
	      return null;
	    }
	    BuildContext? buildContext = repaintKey.currentContext;
	    if (null != buildContext) {
	      XccLog.write('buildContext === >>> ', buildContext);
	      RenderRepaintBoundary? boundary = buildContext.findRenderObject() as RenderRepaintBoundary?;
	      ui.Image? image = await boundary?.toImage(pixelRatio: 3.0);
	      ByteData? byteData = await image?.toByteData(format: ui.ImageByteFormat.png);
	      if (byteData == null) {
	        EasyLoading.show(status: '保存失败, == >>> 获取 image.toByteData 失败');
	        return null;
	      } else {
	        return byteData;
	      }
	    }
	    return null;
	  }
	}

4、将ByteData写入File，并执行微信图片分享

我们拿到控件生成的 ByteData，通过 ByteData.buffer.asUint8List() 拿到 Uint8List ，
之后获取临时的缓存目录，File().create() 创建 一个空间的 png File。
通过 file.writeAsBytesSync(imageByte); 就生成了指定控件转换的图片文件了。

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';

  static Future<String?> getImageFilePath(GlobalKey repaintKey) async {
    ByteData? byteData = await SharePosterUtils.getWidgetToImageByteData(repaintKey);
    if (byteData == null) {
      XccLog.write('获取 byteData 失败 ');
      return null;
    }
    Uint8List imageByte = byteData.buffer.asUint8List();
    var tempDir = await getTemporaryDirectory();
    var file = await File('${tempDir.path}/image_${DateTime.now().millisecond}.jpg').create();
    file.writeAsBytesSync(imageByte);
    return file.path;
  }

5、使用 fluwx 分享图片给微信好友和朋友圈。

上面我们已经拿到了，生成 png 文件了，下面的就直接根据 fluwx 的文档直接去用就可以了。
点 这里 ；

import 'dart:io';
import 'dart:typed_data';

import 'package:community_app/app/global/config.dart';
import 'package:fluwx/fluwx.dart';

 static void ShareImage(
      {String? title,
      String? decs,
      String? file,
      String? url,
      String? asset,
      int scene = 1}) async {
    WeChatScene wxScene = WeChatScene.SESSION;
    if (scene == 2) {
      wxScene = WeChatScene.TIMELINE;
    } else if (scene == 3) {
      wxScene = WeChatScene.FAVORITE;
    }
    WeChatShareImageModel? model = null;

    if (file != null) {
      model = WeChatShareImageModel(WeChatImage.file(File(file)),
          title: title, description: decs, scene: wxScene);
    } else if (url != null) {
      model = WeChatShareImageModel(WeChatImage.network(url),
          title: title, description: decs, scene: wxScene);
    } else if (asset != null) {
      model = WeChatShareImageModel(WeChatImage.asset(asset),
          title: title, description: decs, scene: wxScene);
    } else {
      throw Exception("缺少图片资源信息");
    }
    shareToWeChat(model);
  }

6、把图片保存到本地

保存到本地，值需要我们拿到 控件的 ByteData 。
然后使用 ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
就直接保存到相册了。
想要仔细了解 image_gallery_saver 点 这里 ；

  static savePosterImage(GlobalKey repaintKey) async {
    ByteData? byteData = await SharePosterUtils.getWidgetToImageByteData(repaintKey);
    if (byteData == null) {
      XccLog.write('获取 byteData 失败 ');
      return;
    }
    final result = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
    if (result['isSuccess']) {
      XccLog.write('保存成功。。。');
      AppBruno.toastShow('保存成功');
    } else {
      AppBruno.toastShow('保存失败');
      XccLog.write('操作失败。。。');
    }
  }