How to Save Image and Video Files in Download Folder on Flutter

In this example, we are going to show you how to save media files like images and video from network URL to download folder on local storage using Flutter. It supports PNG, JPG, MP4, and other media formats. You can also add the progress bar feature while downloading.

First, you need to add downloads_path_provider_28, permission_handler, dio Flutter packages in your project by adding the following lines in pubspect.yaml file.

dependencies:
  flutter:
    sdk: flutter
  downloads_path_provider_28: ^0.1.2
  permission_handler: ^8.3.0
  dio: ^4.0.4

Add Read and Write Permission on AndroidManifest.xml file:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Also, Add this attribute on the <application> tag in AndroidManifest.xml file:

<application
   android:requestLegacyExternalStorage="true"

import 'package:dio/dio.dart';
import 'package:downloads_path_provider_28/downloads_path_provider_28.dart';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp( MaterialApp(
       home: Home()
  ));
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  String imgurl = "https://www.fluttercampus.com/img/banner.png";
  //you can save video files too.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         resizeToAvoidBottomInset: false,
         appBar: AppBar(
            title: Text("Download Image from URL"),
            backgroundColor: Colors.deepPurpleAccent,
         ),
          body: Container(
             child: Column(
                 children: [
                      Image.network(imgurl, height: 150,),
                      Divider(),
                      ElevatedButton(
                         onPressed: () async {
                            Map<Permission, PermissionStatus> statuses = await [
                                Permission.storage, 
                                //add more permission to request here.
                            ].request();

                            if(statuses[Permission.storage]!.isGranted){ 
                                var dir = await DownloadsPathProvider.downloadsDirectory;
                                if(dir != null){
                                      String savename = "banner.png";
                                      String savePath = dir.path + "/$savename";
                                      print(savePath);
                                      //output:  /storage/emulated/0/Download/banner.png

                                      try {
                                          await Dio().download(
                                              imgurl, 
                                              savePath,
                                              onReceiveProgress: (received, total) {
                                                  if (total != -1) {
                                                      print((received / total * 100).toStringAsFixed(0) + "%");
                                                      //you can build progressbar feature too
                                                  }
                                                });
                                           print("Image is saved to download folder.");  
                                     } on DioError catch (e) {
                                       print(e.message);
                                     }
                                }
                            }else{
                               print("No permission to read and write.");
                            }

                         },
                         child: Text("Save Image on Gallery."),
                      )

                 ],
             ),
          )
      );
  }
}

You can use this code for the video, just replace the URL and the file name.

Screen components: