flutter 保存分享海报、画报

最新推荐文章于 2023-07-26 21:32:37 发布

鱼欲语雨

最新推荐文章于 2023-07-26 21:32:37 发布

阅读量1k

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/u012029712/article/details/115555186

版权

flutter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求

画报分享，常见于电商APP
在这里插入图片描述

效果实现

1 写布局
在这里插入图片描述
2 将需要导出的内容用RepaintBoundary包裹

在这里插入图片描述
注意：需要生成一个key,并赋给RepaintBoundary，后面要用到

3 编写点击事件
3.1 判断是否有保存图片的权限
使用permission_handler插件

PermissionStatus status = await Permission.storage.status;
      if (!status.isGranted) {
        status = await Permission.storage.request();
        return;
      }

3.2 将组件生成图片

BuildContext buildContext = _repaintKey.currentContext;
RenderRepaintBoundary boundary = buildContext.findRenderObject();
ui.Image image = await boundary.toImage();
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);

注意：await boundary.toImage();返回的是 ui.Image ，其中Image就是 dart:ui中的Image，面前加的ui，需要在导入包的时候as。

import 'dart:ui' as ui;

3.3 保存图片
使用image_gallery_saver插件

final result = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
if(result['isSuccess']){
    DialogUtils.toast('保存成功');
    Navigator.of(context).pop();
}else{
    DialogUtils.toast('保存失败:${result['errorMessage']}');
}

整体代码

	_saveImage() async {
      //存储权限
      PermissionStatus status = await Permission.storage.status;
      if (!status.isGranted) {
        status = await Permission.storage.request();
        return;
      }

      BuildContext buildContext = _repaintKey.currentContext;
      if (null != buildContext){
        RenderRepaintBoundary boundary = buildContext.findRenderObject();
        ui.Image image = await boundary.toImage();
        ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        final result = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
        if(result['isSuccess']){
          DialogUtils.toast('保存成功');
          Navigator.of(context).pop();
        }else{
          DialogUtils.toast('保存失败:${result['errorMessage']}');
        }
      }
    }