I am trying to load some images into a gridview. Each GridTile contains a container with a decoration that uses a NetworkImage. All the images I'm using are stored in google drive and the problem is that for some reason, flutter does not like Google Drive urls. I've tried the following urls:

None of the above is working. It throws the following error:

The following _Exception was thrown resolving an image codec: Exception: Could not instantiate image codec.

What I've noticed is that all of those urls end up redirecting to another link, probably where the image is cached. Is that the reason why is not working? If that is so, how can I force it to follow redirects?

This is the relevant piece of code:

String imgUrl = "https://drive.google.com/file/d/$fileId/view";
GridTile(
    child: InkWell(
      onTap: () {
        openDriveImage(fileId);
      },
      child: Container(
        margin: EdgeInsets.all(5.0),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.black38,
          ),
          shape: BoxShape.rectangle,
          image: DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(imgUrl),
          ),
        ),
      ),
    ),


Solution 1: Rajnish Singh

You have to modify the links like i did below:

Link given by Google Drive when link sharing is made on: https://drive.google.com/open?id=1PpUCg8U0YkedIPYmm2NtLXt00JsdBJt2

Now replace the open? from the Url with the uc?export=download&

So the Url that will work with NetworkImage() widget is: https://drive.google.com/uc?export=download&id=1PpUCg8U0YkedIPYmm2NtLXt00JsdBJt2


Solution 2: Morfinismo

Well, it results that all of the options mentioned in the question work. Nothing has to be changed. The problem is that the images are private hence it was failing to fetch them. In order to get fetch the images, I had to implement Google Sign In.

After the user is signed in, I simply grab the access token and put it in the headers of the NetworkImage class like this:

NetworkImage(imgUrl, headers: {"Authorization": "Bearer ${accessToken}"})

After that, I was able to fetch the images with any of the url's.


Solution 3: Peter Wauyo

Here are the steps:

  1. Right click the image and click Share as shown below;enter image description here

  2. In the dialog that appears, make sure the option selected from the dropdown is Anyone with the link can view as shown below: enter image description here

  3. After, click Copy link and then paste it somewhere

  4. It should be something like this https://drive.google.com/file/d/1VdjEgb0aZl9IZa2jOzGU5_SNbmlmeiCj/view?usp=sharing which is in the format

    https://drive.google.com/file/d/<FILE_ID>/view?usp=sharing

  5. Copy the <FILE_ID> which in my case is 1VdjEgb0aZl9IZa2jOzGU5_SNbmlmeiCj

  6. Append it to this link below in the following format:

    https://drive.google.com/uc?export=view&id=<FILE_ID>

  7. In my case for example, the final link is:

    https://drive.google.com/uc?export=view&id=1VdjEgb0aZl9IZa2jOzGU5_SNbmlmeiCj

  8. Finally get that link and paste in a NetworkImage() or Image.network() widget and your done