Flutter use network images protected with Basic Auth

Issue

We have a main site that holds all the user's uploads which are usually just profile pictures.

The folder with all the uploads is protected with nginx and the basic auth. So you need to enter a username and password to access it.

Question

How can this be done using Flutter cached_network_image? Or something similar. We don't want to physically store the images on the device.

Solution

You can use httpHeaders property on CachedNetworkImage widget to pass custom auth headers.

CachedNetworkImage(
  imageUrl: ...,
  imageBuilder: ...,
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  httpHeaders: {
    "Authorization": "Basic $token",
  }
),

Answered By - Pionix