Display images from Google Drive using NetworkImage

Question

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:

• https://docs.google.com/uc?id={fileId}
• https://drive.google.com/uc?export=view&id={fileId}
• https://drive.google.com/a/{domain}.com/uc?authuser=0&id=fileId}&export=download
• https://drive.google.com/file/d/{fileId}/view

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),
          ),
        ),
      ),
    ),

Answer 1

Here are the steps:

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

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

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