Mobile App Development

In many cases, we may have to display images in our Flutter app that are protected by web middleware and require a token to access them. In this tutorial, we’ll see how to accomplish this using the Image.network widget along with an authentication mechanism to pass the token to the server.

Prerequisites

Before we get started, make sure you have the following:

Flutter installed on your system.
An image URL that is protected by web middleware and requires a token to access it.
A valid authentication token for the image URL.

The Code

Here is an example code snippet that demonstrates how to display protected images with tokens in Flutter:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class ImageWithToken extends StatefulWidget {
  final String imageUrl;
  final String token;

  const ImageWithToken({Key? key, required this.imageUrl, required this.token})
      : super(key: key);

  @override
  _ImageWithTokenState createState() => _ImageWithTokenState();
}

class _ImageWithTokenState extends State<ImageWithToken> {
  late http.Response _response;
  late String _imageBase64;

  @override
  void initState() {
    super.initState();
    _fetchImage();
  }

  Future<void> _fetchImage() async {
    _response = await http.get(
      Uri.parse(widget.imageUrl),
      headers: {HttpHeaders.authorizationHeader: 'Bearer ${widget.token}'},
    );

    setState(() {
      _imageBase64 = base64Encode(_response.bodyBytes);
    });
  }

  @override
  Widget build(BuildContext context) {
    return _imageBase64.isNotEmpty
        ? Image.memory(
            base64Decode(_imageBase64),
          )
        : const CircularProgressIndicator();
  }
}