Tracking File Download Progress in Flutter with Firebase Storage

In the world of mobile application development, providing feedback to users during long-running tasks is essential. When it comes to downloading files, especially large ones, users appreciate knowing the status of the download. In this blog post, we'll explore how to track and display the progress of a file download from Firebase Storage in a Flutter app.

Setting Up Firebase Storage

Before diving into the code, ensure that Firebase Storage is correctly set up in your Flutter project. Firebase Storage offers a robust and secure way to store your app’s files and media.

The downloadFileWithProgress Function

Our journey begins with the creation of a function named downloadFileWithProgress, which is responsible for downloading a file and tracking its progress. The function takes two parameters:

• cloudFilePath: The path of the file in Firebase Storage.
• localFileName: The name of the file for local storage on the device.

Step-by-Step Breakdown

1. Obtaining the File Reference: We start by getting a reference to the file in Firebase Storage.

   final ref = FirebaseStorage.instance.ref().child(cloudFilePath);
   

2. Preparing Local Storage: We determine where to save the file locally by obtaining the application’s document directory.

   Directory appDocDir = await getApplicationDocumentsDirectory();
   File downloadToFile = File('${appDocDir.path}/$localFileName');
   

3. Starting the Download: We initiate the download using ref.writeToFile(downloadToFile), which downloads the file to the specified path.

4. Listening to Download Progress: The most critical part of our function is listening to the download’s progress. This is accomplished using the snapshotEvents.listen method.

   downloadTask.snapshotEvents.listen((taskSnapshot) {
     ...
   });
   

   Inside the listener, we handle different states of the download:

   • Running: We calculate the download percentage and print it.
   • Paused: Informing the user that the download is paused.
   • Success: Indicates the download is complete.
   • Canceled: Informs about the download cancellation.
   • Error: An error state, where we log any issues encountered.

5. Error Handling: Outside of the listener, we catch and handle any exceptions that might occur during the download process.

Usage and Integration

This function can be integrated into any part of your Flutter app where file downloading is required. It’s particularly useful in scenarios like downloading media files, documents, or large datasets.

Conclusion

By providing real-time feedback on the download progress, we enhance the user experience significantly. This approach to handling file downloads in Flutter with Firebase Storage is not just effective but also ensures that the users are well-informed about the ongoing processes in the app.

Remember, the key to a great user experience is not just in the features you provide, but also in how you present them. Happy coding!

Complete function:

 Future<void> downloadFileWithProgress(
    String cloudFilePath,
    String localFileName,
  ) async {
    final ref = FirebaseStorage.instance.ref().child(cloudFilePath);

    try {
      // Get the application document directory
      Directory appDocDir = await getApplicationDocumentsDirectory();
      File downloadToFile = File('${appDocDir.path}/$localFileName');

      // Start the download
      final downloadTask = ref.writeToFile(downloadToFile);

      // Listen for progress
      downloadTask.snapshotEvents.listen((taskSnapshot) {
        switch (taskSnapshot.state) {
          case TaskState.running:
            final progress = 100.0 *
                (taskSnapshot.bytesTransferred / taskSnapshot.totalBytes);
            print("Download is $progress% complete.");
            break;
          case TaskState.paused:
            print("Download paused.");
            break;
          case TaskState.success:
            print("Download complete.");
            break;
          case TaskState.canceled:
            print("Download canceled.");
            break;
          case TaskState.error:
            taskSnapshot.printError();
            // print("Download failed with error: ${taskSnapshot.printError()}");
            break;
        }
      });
    } catch (e) {
      print('Error occurred while downloading file: $e');
    }
  }

---

See Also