【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册

最新推荐文章于 2024-05-25 09:46:25 发布
最新推荐文章于 2024-05-25 09:46:25 发布
阅读量2.3k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Flutter 常见问题 文章标签： Flutter截屏并显示到页面 Flutter截图并保存到相册 Flutter获取文件存储权限 Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42351033/article/details/118108249
本文详细介绍了在Flutter中如何截取屏幕、显示截图以及将截图保存到相册。通过使用RepaintBoundary组件，配合GlobalKey获取截图数据，然后使用image_gallery_saver插件实现图片保存。同时，文章提供了完整的代码示例和注意事项，确保功能的正确实现。

这是【Flutter 问题系列第 22 篇】，如果觉得有用的话，欢迎关注专栏。

关于在 Flutter 中如何截取屏幕，以及如何将截图保存到相册的文章少之又少，即使有，也是错误一大片，有的甚至运行后都报错，就这都直接发出来了，真是可恶啊！

所以我整理了这篇博客，实现了两个功能

  • 如何截取整个屏幕或屏幕中的某一部分，并显示到页面中
  • 如何将截取的图片，保存到相册中

这两个功能都已亲测并无问题，源码会全部奉上，如果有用，希望可以给个三连，接下来是博客正文。

文章目录

一：如何截取屏幕，并显示到页面中

依照国际惯例，先上效果图（没有先看到效果图，估计你们都会走吧~）

由效果图可以看出来，截取到的每一帧都是不同的图片，功能实现了，接下来就是如何实现功能的代码了。
1：RepaintBoundary 组件介绍

我们知道在 Flutter 中万物皆组件，所以接下来要说的截图其实也是一个组件，与其说是截取屏幕，不如说是截取组件。

而这个组件的名称就是 RepaintBoundary ，源码如下所示

 RepaintBoundary(
了解本专栏 订阅专栏 解锁全文
【Flutter 问题系列第 73 篇】如何在 Flutter 应用中进行屏幕适配（含使用教程、原理解析）
“Allen Su”的博客
07-08 3790
如何在 Flutter 应用中进行屏幕适配（含使用教程、原理解析） 什么是 rpx？
【Flutter 问题系列第 79 篇】在 Flutter 中使用 ReorderableListView 实现拖拽排序列表组件的功能
“Allen Su”的博客
10-24 2717
Flutter 版本：3.10.5，Dart 版本：3.0.5，操作系统：macOS。
screenshot:Flutter屏幕截图库
05-22
截屏 一个简单的插件，可将小部件捕获为图像。 该插件将您的小部件包装在 入门 这个方便的插件可用于捕获所有小部件，包括全屏屏幕截图和单个小部件，例如Text（）。 创建截图控制器的实例 class _MyHomePageState extends State < MyHomePage> { int _counter = 0 ; Uint8List _imageFile; //Create an instance of ScreenshotController ScreenshotController screenshotController = ScreenshotController (); @override void initState () { // TODO: implement initState super . initStat
flutter_screenshot_callback:Flutter插件，可让您检测移动屏幕截图并在iOS和Android上执行回调函数。 :rocket:
05-05
屏幕截图回调 Flutter插件，可让您检测移动屏幕截图并在iOS和Android上执行回调函数。 :rocket: ••• ！ 用法 导入包裹 要使用此插件，请按照。 使用插件 将以下导入添加到您的Dart代码中： import 'package:screenshot_callback/screenshot_callback.dart' ; 使用所需的范围初始化ScreenshotCallback： ScreenshotCallback screenshotCallback = ScreenshotCallback (); addListener 然后调用ScreenshotCallback addListener方法。 添加检测屏幕截图后要执行的自定义功能。 例如： screenshotCallback. addListener (() { //Void funtions are
Flutter截屏与长截屏的实现
程序员吗？
03-17 3252
在做App开发中，获取当前视图的截图基本都会用到的，在Android中，我们可以通过视图的id获取当前视图的bitmap进行编辑操作，在Flutter中想获取Widget的截图针对不同的场景也是需要一个key进行绑定截图。这里介绍的Flutter截图的方式主要分为两种：视图可见时的截图与不可见的截图。
Flutter之屏幕截图/组件截图
weixin_34192732的博客
12-18 5742
继续更新Flutter系列，本篇记录如何在Flutter中进行截图，在Flutter中万物皆组件，不但高斯模糊是套一层组件，截图也是套一层组件，所以屏幕截图和组件截图其实是一个意思。虽然Flutter的这种嵌套UI很繁琐，但是用习惯了反而会感觉结构很清晰，不用担心布局相关代码的混乱，在FlutterInspector识图下更是一目了然，可以在不翻阅代码的情况下快速理解别人写的布局。 本次用到的组件...
Flutter屏幕截图
寒江
08-04 1911
Flutter截取屏幕信息并保存为图片 在Flutter中，可以通过将需要截取的内容使用RepaintBoundary包裹起来，并设置一个GlobalKey，使用此global key获取要截取内容的渲染对象，调用其toImage方法，转换成ByteData类型的数据，并最终转化为Uint8List类型。 RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject(); var dpr = window.devi
flutter 截长图 并且保存到手机相册（目前只有android ）
04-01
在 Flutter 开发中，有时我们需要实现截取长图并将其保存到手机相册的功能，特别是在构建滚动视图如列表或网格时。这个功能在 Android 平台上是常见的需求。Flutter 提供了丰富的插件和原生平台通道来帮助开发者完成...
【Flutter 问题系列第 76 篇】在 Flutter 中 Builder 组件的作用以及如何解决 Scaffold.of 找不到上下文问题的解决文案
“Allen Su”的博客
03-12 2238
在 Flutter 中 Builder 组件的作用以及如何解决 Scaffold.of 找不到上下文问题的解决文案
flutter 截图 截长图 滚动截图 保存到手机
bu_wangchuxin的博客
04-01 3613
flutter 截长图
使用 Screenshots 轻松捕捉和美化你的 Flutter 应用截图
最新发布
gitblog_00094的博客
05-25 612
使用 Screenshots 轻松捕捉和美化你的 Flutter 应用截图 项目简介 Screenshots 是一个强大的命令行工具，专为 Flutter 设计，用于自动化捕获应用的屏幕快照，并对其进行处理，如添加状态栏、设备边框等。它将 Fastlane 的 Snapshots、Screengrab 和 FrameIt 功能结合在一起，让你无论在 iOS 还是 Android 上都能轻松完成截图...
【Flutter 问题系列第 8 篇】在 Flutter 中如何截取屏幕并显示到页面中，以及如何将截图保存到相册
Android_XG的博客
06-17 3446
关于在 Flutter 中如何截取屏幕，以及如何将截图保存到相册的文章少之又少，即使有，也是错误一大片，有的甚至运行后都报错，就这都直接发出来了，真是可恶啊！所以我整理了这篇博客，实现了两个功能这两个功能都已亲测并无问题，源码会全部奉上，如果有用，希望可以给个三连，接下来是博客正文。依照国际惯例，先上效果图（没有先看到效果图，估计你们都会走吧~）由效果图可以看出来，截取到的每一帧都是不同的图片，功能实现了，接下来就是如何实现功能的代码了。我们知道在 Flutter 中万物皆组件，所以接下来要说的截图其实也是
Flutter实现二维码海报图片截取并保存相册
大灰狼的小绵羊哥哥的博客
06-07 2177
截取图片并保存相册 相信大家见过这种使用场景，就是生成属于自己的二维码海报，可以保存到相册，分享出去。在社交电商类的App中比较常见。 这种懂原生知道，用原生实现简单，但Flutter中实现这种功能,没接触过的,就会无从下手。下面我们就来通过代码交流下。 Demo涉及技术点状态管理Provider生成二维码图片保存 Demo涉及的插件 fluttertoast: 3.1.3 # toast提示框 provider: ^3.0.0+1 # 状态管理 permissi.
flutter 截图功能（截取控件）
weixin_44911775的博客
11-28 1300
【代码】flutter 截图功能（截取控件）
android打开sdcard读写文件、访问网络权限
weixin_30389003的博客
05-27 301
去工程的AndroidManifest.xml，添加 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <use...
Flutter 长截屏适配 Miui 系统，一点都不难
闲鱼技术的博客
08-10 1861
背景现有 App 大部分业务场景都是以长列表呈现，为更好满足用户内容分享的诉求，Android 各大厂商都在系统层面提供十分便捷的长截屏能力。然而我们发现 Flutter 长列表页面在部分 Android 手机上无法截长屏，Flutter 官方和社区也没有提供框架层面的长截屏能力。闲鱼作为 Flutter 在国内业务落地的代表作，大部分页面都以 Flutter 承接。为了...
flutter 截图生成的二维码并保存在手机上
qq_42772570的博客
12-28 764
https://blog.csdn.net/gemini_kanon/article/details/105964924 https://www.jianshu.com/p/386458c3a4a9
flutter 布局截图生成图片保存本地
冰天糖葫芦的博客
04-27 1768
项目要求分享带二维码的宣传图，二维码是账号生成的放在宣传图上，要求分享时生成一张图片。 首先是先将布局生成图片，这需要用到系统的 RepaintBoundary 将需要生成图片的布局用RepaintBoundary嵌套： RepaintBoundary( key: globalKey, child: Container( ··· ), ) 他需要一个globalkey： var globalKey = new Gl
flutter RepaintBoundary 截屏图片下载，保存图片不清晰的问题
半身风雪
07-06 3863
最近工作中，突然遇到截屏保存图片的问题，但是保存下来的图片，一直都非常的模糊，最后看源码才发现，可以直接设置image 的pixelRatio分辨率来解决，下面是完整的图片截屏保存方法请注意，这只是一个基本示例，你可能需要根据你的具体需求进行调整。另外，确保你已在文件中添加了插件的依赖。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Allen Su

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值