How to get images from Firebase Cloud Storage to display in Flutter web

The Problem

As I was updating the web version of my Shopping list app to look and function more like the mobile app version, I noticed that the images were not displaying. I would see error messages in the console telling me that it could not display the image. I thought that maybe it was because the widget CachedNetwokImage( ) doesn't work for the web so I changed to Network image but that didn't work either.

The Solution

 I found the solution in this Stack Overflow post. The issue was something called CORS. So if you are using flutter web and you want to display images that are not stored in the app itself but rather on a different server (like Firebase Cloud Storage) then you have to give permission for your app to display those images from the other server. The way you do that is through configuring a Cors.json file through the Google Cloud Platform. 

I'm going to walk you through how I got the images stored in Firebase Cloud Storage to show up in my Flutter Web project.

How to configure the CORS file

1. Log into the GCP and go into your app project. 

2. Click on the cloud terminal button to start a terminal session. You will find this button at the top of the page. It is the first icon on the right of the search bar.

It will ask you to authorize the cloud shell to use your credentials. I clicked authorize.

3. Click on the pencil icon in the cloud terminal to open the editor. 

4. You need to create a Cors.json file. Click on File, then New File. Name it "Cors.json" in this file you want to enter a few lines. 

[

  {

    "origin": ["https://shopping-list-3e48a.web.app"],

    "method": ["GET"],

    "responseheader":["Access-Control-Allow-Origin"],

    "maxAgeSeconds": 3600

  }

]

I referred to this document to help me figure out how to configure the cors file. For Orgin I put the web address of my shopping list app. You can also put an * if you want any website to be able to access the photos in your cloud storage.

Note:  If you are still working on your flutter web project through your IDE, you may want to temporarily put an * so that your app can access the photos even when it is running through local host. 

 The method was set to Get. For the response header I put "Access- Control-Allow-Origin" I think that this line is the important part as that is what your app is looking for when it goes to fetch the images form the Cloud Storage without this line it does not have permission to retrieve those images. Lastly I set the maxAgeSeconds to 3600. 

5. Once you are done with this document click on Open terminal to return to the cloud terminal. The terminal should show your Project id. If it doesn't type gcloud config set project "your project id". To switch over to the correct project. Then type gstil cors set cors.json gs:// "you bucket id". Your bucket id can be found in the Cloud Storage it usually ends with appspot.com. Once you run that command it should tell you that you have successfully configured the cors file. 

6. Go back to your web app and test it out. The pictures should appear as long as they are being held in your cloud storage.