【Flutter】使用image_gallery_saver保存图片(截图、网络图片、gif和视频)到本地相册

前言

本文主要介绍使用image_gallery_saver保存图片(截图、网络图片、gif和视频)到本地相册,目前已经适配了android和iOS端。

前提

flutter版本:2.8.0
dart版本:2.12.0
image_gallery_saver 跳转
permission_handler 跳转


一、使用步骤

1.使用的插件

# 保存图片到本地
image_gallery_saver: ^1.7.1  
# 权限管理  
permission_handler: ^9.2.0  
# 文件权限  
path_provider: ^2.0.8  
# 网络请求  
dio: ^4.0.6
# 提示框
flutter_easyloading: ^3.0.5 

2.配置权限

  • android 的 AndroidManifest.xml 添加 开启读写storage权限
<!-- 写权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<!-- 读权限 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  • ios 的 Info.plist 添加
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Please allow the APP to save photos to the album</string>

此处省略了关于permission_handler的相关配置,如何想要了解permission_handler的相关配置,请前往我的另外一篇文章【flutter】使用permission_handler配置android和 iOS的权限


二、代码示例

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';
import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';
import 'dart:ui' as ui;

class HomePage extends StatefulWidget {
   
  const HomePage({
   Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
   
  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text('保存图片到本地'),
      ),
      body: L
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要在pubspec.yaml文件中添加file_saver插件的依赖: ```yaml dependencies: file_saver: ^2.0.3 ``` 然后,在需要保存图片的地方,可以使用如下代码: ```dart import 'dart:async'; import 'dart:typed_data'; import 'package:flutter/material.dart'; import 'package:file_saver/file_saver.dart'; import 'package:image_gallery_saver/image_gallery_saver.dart'; import 'package:flutter/services.dart'; class SaveImagePage extends StatefulWidget { final String imageUrl; SaveImagePage({Key key, @required this.imageUrl}) : super(key: key); @override _SaveImagePageState createState() => _SaveImagePageState(); } class _SaveImagePageState extends State<SaveImagePage> { Uint8List imageBytes; bool isSaving = false; @override void initState() { super.initState(); loadImage(); } Future<void> loadImage() async { final ByteData imageData = await NetworkAssetBundle(Uri.parse(widget.imageUrl)).load(""); setState(() { imageBytes = imageData.buffer.asUint8List(); }); } Future<void> saveImage() async { setState(() { isSaving = true; }); final result = await ImageGallerySaver.saveImage(imageBytes); setState(() { isSaving = false; }); if (result != null) { // 保存成功后,分享到QQ FileSaver.instance.shareFile(result['filePath'], 'image/*', text: '分享图片'); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Save Image'), ), body: imageBytes != null ? Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.memory( imageBytes, width: MediaQuery.of(context).size.width, fit: BoxFit.contain, ), SizedBox(height: 20), RaisedButton( onPressed: isSaving ? null : saveImage, child: isSaving ? CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.white), ) : Text('Save and Share'), ), ], ) : Center( child: CircularProgressIndicator(), ), ); } } ``` 上面的代码中,我们首先使用`NetworkAssetBundle`加载图片,然后在`saveImage`方法中,调用`ImageGallerySaver.saveImage`方法将图片保存到相册中,并返回保存成功后的结果。最后,我们调用`FileSaver.instance.shareFile`方法将图片分享到QQ中。 需要注意的是,为了能够进行文件分享,我们需要在AndroidManifest.xml文件中添加以下权限: ```xml <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/> ``` 同时,还需要在AndroidManifest.xml文件中添加以下provider: ```xml <provider android:name="androidx.core.content.FileProvider" android:authorities="${applicationId}.fileProvider" android:exported="false" android:grantUriPermissions="true"> <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" /> </provider> ``` 其中,file_paths.xml文件内容如下: ```xml <?xml version="1.0" encoding="utf-8"?> <paths> <external-path name="external_files" path="."/> </paths> ``` 最后,在调用`FileSaver.instance.shareFile`方法时,需要传递正确的MIME类型,例如分享图片时,MIME类型应该为'image/*'。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值