Flutter图片保存插件gallery_saver_updated的使用

Flutter图片保存插件gallery_saver_updated的使用

gallery_saver_updated 是一个用于在Flutter应用程序中保存图片和视频到设备相册的插件。它支持从网络或临时文件保存图片和视频，并且这些媒体文件会在Android的图库和iOS的照片应用中可见。

注意事项

• 如果你要保存网络上的图片或视频链接，确保链接包含 http 或 https 前缀。
• 该插件支持保存本地文件路径和网络URL。

安装

首先，在你的 pubspec.yaml 文件中添加 gallery_saver_updated 作为依赖项：

dependencies:
  gallery_saver_updated: ^latest_version

iOS配置

在 <project root>/ios/Runner/Info.plist 文件中添加以下键值对：

• NSPhotoLibraryUsageDescription - 描述为什么你的应用需要访问照片库权限。例如：

  <key>NSPhotoLibraryUsageDescription</key>
  <string>我们需要访问您的照片库以保存图片和视频</string>
  

Android配置

在 AndroidManifest.xml 文件中添加以下权限：

• android.permission.WRITE_EXTERNAL_STORAGE - 用于写入外部存储的权限。

示例代码

下面是一个完整的示例代码，展示了如何使用 gallery_saver_updated 插件来保存图片和视频。该示例包括拍照、录制视频以及保存网络图片和视频的功能。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:gallery_saver_updated/gallery_saver.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String firstButtonText = 'Take photo';
  String secondButtonText = 'Record video';
  double textSize = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Flexible(
                  flex: 1,
                  child: Container(
                    child: SizedBox.expand(
                      child: TextButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.blue),
                        ),
                        onPressed: _takePhoto,
                        child: Text(firstButtonText,
                            style: TextStyle(fontSize: textSize, color: Colors.white)),
                      ),
                    ),
                  ),
                ),
                Flexible(
                  child: Container(
                    child: SizedBox.expand(
                      child: TextButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.white),
                        ),
                        onPressed: _recordVideo,
                        child: Text(secondButtonText,
                            style: TextStyle(fontSize: textSize, color: Colors.blueGrey)),
                      ),
                    ),
                  ),
                  flex: 1,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _takePhoto() async {
    // 使用 ImagePicker 拍照
    final ImagePicker picker = ImagePicker();
    final XFile? image = await picker.pickImage(source: ImageSource.camera);

    if (image != null) {
      setState(() {
        firstButtonText = 'saving in progress...';
      });

      // 保存图片到相册
      GallerySaver.saveImage(image.path).then((bool success) {
        setState(() {
          firstButtonText = 'image saved!';
        });
      });
    }
  }

  void _recordVideo() async {
    // 使用 ImagePicker 录制视频
    final ImagePicker picker = ImagePicker();
    final XFile? video = await picker.pickVideo(source: ImageSource.camera);

    if (video != null) {
      setState(() {
        secondButtonText = 'saving in progress...';
      });

      // 保存视频到相册
      GallerySaver.saveVideo(video.path).then((bool success) {
        setState(() {
          secondButtonText = 'video saved!';
        });
      });
    }
  }

  void _saveNetworkVideo() async {
    // 保存网络视频
    String path = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
    GallerySaver.saveVideo(path).then((bool success) {
      print('Video is saved');
    });
  }

  void _saveNetworkImage() async {
    // 保存网络图片
    String path = 'https://image.shutterstock.com/image-photo/montreal-canada-july-11-2019-600w-1450023539.jpg';
    GallerySaver.saveImage(path).then((bool success) {
      print('Image is saved');
    });
  }
}

代码说明

1. 主界面布局：

   • 两个按钮分别用于拍照和录制视频。
   • 按钮点击后会调用 _takePhoto 和 _recordVideo 方法。

2. 拍照功能 (_takePhoto)：

   • 使用 ImagePicker 拍照，获取图片路径。
   • 调用 GallerySaver.saveImage 将图片保存到相册。
   • 保存成功后，更新按钮文本为 “image saved!”。

3. 录制视频功能 (_recordVideo)：

   • 使用 ImagePicker 录制视频，获取视频路径。
   • 调用 GallerySaver.saveVideo 将视频保存到相册。
   • 保存成功后，更新按钮文本为 “video saved!”。

4. 保存网络图片和视频：

   • _saveNetworkImage 和 _saveNetworkVideo 方法展示了如何保存网络上的图片和视频。
   • 直接传递网络URL给 GallerySaver.saveImage 或 GallerySaver.saveVideo 即可。

其他功能

• 指定保存到特定相册：你可以通过传递 albumName 参数来指定保存到哪个相册。例如：

  GallerySaver.saveImage(image.path, albumName: 'MyAlbum').then((bool success) {
    print('Image saved to MyAlbum');
  });