Download Image Using Flutter DIO With Progress (%)

In this Flutter tutorial, we’ll learn how to download image using Flutter DIO package. We’ll also display the process in percentage so the user can have track of the downloading status.

You can try downloading files of other types as well like JSON, videos, and more using the same process mentioned in this article. So let’s jump right into its practical implementation.

What is Flutter DIO?

It is a powerful HTTP client for Dart that is developed by Flutter China. It supports:

Request Cancellation
FormData
Global Configuration
Interceptors
Downloading Files
ConnectionTimeout and more

This package is easy to learn as compared to the HTTP library provided by Flutter. We’ll be using it to download the image using its URL.

Implementation of Downloading Image with Flutter DIO (All Steps)

Step 1: Packages We Need ( DIO, Path Provider )

We need two packages to download images in Flutter. Dio package will start the downloading of images from the internet while the path provider will specify the path in our phone’s storage for that image to be stored.

Import these two packages into the dependencies section of your Flutter project’s pubspec.yaml file. Click the below links to get the latest version of both these packages.

dio: ^5.1.1

path_provider: ^2.0.14

Step 2: Creating UI

We’ve created a simple UI that’ll show the progress in percentage while the image is being downloaded. When the downloading process is complete, then it’ll show the text ‘Downloading Completed’. We’ll show the text using the Flutter text widget. Below is the UI of this app.

Step 3: Functionality

We’ve created a method that’ll send a downloading request of an image and also get the progress of downloading status. See below:

1. Image URL

final imgUrl = "https://source.unsplash.com/user/c_v_r";

This is a sample URL of the image that we’ll be using in this example code.

2. Function To Download Image

Future<void> downloadImage() async {
    Dio dio = Dio();

    try {
      var pathInStorage = await getApplicationDocumentsDirectory();
      await dio.download(
        imgUrl,
        '${pathInStorage.path}/sampleimage.jpg',

        onReceiveProgress: (count, total) {  // it'll get the current and total progress value
          setState(() {
            progressValue =
                'Downloading: ${((count / total) * 100).toStringAsFixed(0)}%';

            if (count == total) {
              progressValue = 'Downloading Completed';
            }
          });
        },
      );
    } catch (e) {
      print(e.toString());
    }
  }

This function will send a request to download the image and save it to the path specified by the path provider. We’ve given our image a name with a jpg extension like this ‘sampleimage.jpg’. We can specify the extension for the type of file we are downloading.

We also have specified a string that’ll store the current progress value. When the downloading is complete, then it’ll show the text ‘Downloading Completed’.

It’s totally up to you how you want to start the downloading process. It can be by clicking a custom button etc. In our case, we’ve called this method using the initState so this method is called automatically when this screen loads.

If some error occurs then do feel free to close the app and build it again. You can also try flutter clean and rebuild it again.

This is how we can easily download images or any other file in Flutter using the DIO package. The complete source code is given below.

Download Image with Flutter DIO Source Code

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ImageDownloadingScreen(),
    );
  }
}

class ImageDownloadingScreen extends StatefulWidget {
  const ImageDownloadingScreen({super.key});
  @override
  State<ImageDownloadingScreen> createState() => _ImageDownloadingScreenState();
}

class _ImageDownloadingScreenState extends State<ImageDownloadingScreen> {

  final imgUrl = "https://source.unsplash.com/user/c_v_r";
  String progressValue = '';

  @override
  void initState() {
    downloadImage();
    super.initState();
  }

  Future<void> downloadImage() async {
    Dio dio = Dio();
    try {
      var pathInStorage = await getApplicationDocumentsDirectory();
      await dio.download(
        imgUrl,
        '${pathInStorage.path}/sampleimage.jpg',
        onReceiveProgress: (count, total) {
          setState(() {
            progressValue =
                'Downloading: ${((count / total) * 100).toStringAsFixed(0)}%';
            if (count == total) {
              progressValue = 'Downloading Completed';
            }
          });
        },
      );
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(progressValue),
      ),
    );
  }
}

Conclusion

In conclusion, hope you now have a complete practical understanding of how to download images with the help of the Flutter Dio package. Don’t hesitate to share your feedback with us.

We’d also be glad to see you visit our other tutorials on Flutter app development. We appreciate the time you spent reading this article.