How to save an image to the Gallery

Sagar Koju Design

In this guide, we will learn how to save an image to the gallery by using the external package name gallery_saver in a flutter. Basically, it saves images and videos from the network or temporary files to external storage. Both images and videos will be visible in Android Gallery and iOS Photos.

To set up the gallery_saver in our application. At first, we should do the following things.

Step1: Add the dependency

Start by adding the dependency to the pubspec.yml file

dependencies:
   gallery_saver: ^2.3.2

or 

We can do that by running the following command in our terminal: $ flutter pub add gallery_saver

The gallery_saver the plugin will be added as a dependency to our pubspec.yaml file as a result.

Configuration

IOS

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

  • NSPhotoLibraryUsageDescription – describe why your app needs permission for the photo library. This is called Privacy – Photo Library Usage Description in the visual editor.

Android 

  • android.permission.WRITE_EXTERNAL_STORAGE – Permission for the usage of external storage

Let’s take an example of how we can save the image to the gallery in our flutter application.

import 'package:flutter/material.dart';
import 'package:gallery_saver/gallery_saver.dart';

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

  @override
  State<ImageSaveScreen> createState() => _ImageSaveScreenState();
}

class _ImageSaveScreenState extends State<ImageSaveScreen> {
  String path = 'https://i.ytimg.com/vi/5uShwmVXopc/maxresdefault.jpg';

  saveImage() async {
    await GallerySaver.saveImage(path, toDcim: true, albumName: 'Flutter');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Save to Gallery'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Image.network(
            path,
            fit: BoxFit.cover,
          ),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                shape: const StadiumBorder(),
                textStyle: const TextStyle(fontSize: 20),
                minimumSize: const Size.fromHeight(72),
              ),
              onPressed: () {
                saveImage();
              },
              child: const Text('Download Images to Gallery'),
            ),
          )
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

on clicking on the Download image to the gallery the image is saved in our local gallery folder name as Flutter which is shown below

Thank you for reading the Guide about How to save an image to the Gallery.

Related guide: How To Select An Image In Flutter