Download File from Firebase (Flutter Mobile and WEB)

There are a bunch of articles that talk about how to download a file from firebase on Mobile (Android, iOS) or even WEB solely. But what about if you support mobile and web in your project?

If your project is web-only and you have a URL then you can refer to this answer (stackoverflow.com) in order to find out how to download a file.

If your project is web-only then the following snippet lets you download the file from firebase.

Problem

I am assuming that your project supports mobile and web. In this case, when you try to build the above code then the build fails. You will see Not Found “dart:html” when building for mobile.

Then you will probably search for “flutter dart html not found in mobile app”. A long list of pages displays and you might not find your answer easily. Such as this issue reported on Github.

Solution

First, add the universal_html package to your pubspec.yaml file.

Second, Install gsutil. You need to download the proper package. Then unzip it and finally run the install script in the extracted folder.

Third, You need to log in and select the project you want to choose on Firebase. Run gcloud init at the command prompt, as described here.

Forth, you need to follow CORS Configuration section. Basically, you need to create a file, call it cors.json, and put the following content in it.

Fifth, Run gsutil cors set cors.json gs://<your-cloud-storage-bucket> to deploy these restrictions.

Sixth, you are done. Having the following code makes you able to download your file from Firebase on the web (when your project supports web and mobile).