Flutter: Image not displaying despite correct Firebase Storage URL and MVC pattern with GetX

Question

I am facing an issue in my Flutter app where I'm trying to display an image fetched from Firebase Storage. The Firebase Storage URL is being fetched correctly, but the image is not displaying at all in my app.

Code Overview

I have implemented an MVC pattern using the Get package (package:get/get.dart) in my Flutter app. The relevant code includes a FirebaseStorageService class (firebase_storage_service.dart) for fetching the image URL, a controller class (post_controller.dart), and the main app file (main.dart) where I use a FutureBuilder to load the image.

Issue and Error

The error I'm encountering in the console is as follows:

[Log] The following ImageCodecException was thrown resolving an image codec: (dart_sdk.js, line 29573)
[Log] Failed to decode image data. (dart_sdk.js, line 29573)
[Log] Image source: encoded image bytes (dart_sdk.js, line 29573)

Code Snippets

firebase_storage_service.dart for fetching the image URL.

Reference get firebaseStorage => FirebaseStorage.instance.ref();

class FirebaseStorageService extends GetxService {
  final Logger _logger = Logger();

  Future<String?> getImage(String? imgName) async {
    if (imgName == null) return null;

    try {
      var urlRef = firebaseStorage.child(StorageConstants.postMediaDir).child(
          '${imgName.toLowerCase()}.png'); //  image might be other than .png
      var imgUrl = await urlRef.getDownloadURL();

      _logger.i('Image retrieved successfully: $imgUrl'); // log success

      return imgUrl;
    } catch (e) {
      _logger.e('Error getting image: $e'); // log
      return e.toString();
    }
  }
}

post_controller.dart for handling the logic to get the image URL. for handling the logic to get the image URL.

import 'package:get/get.dart';
import 'package:logger/logger.dart';

import '../services/firebase_storage_service.dart';

class PostController extends GetxController {
  final Logger _logger = Logger();

  @override
  void onReady() {
    super.onReady();
    _logger.i('PostController is ready.');
  }

  static Future<String?> getPostImage({String? imgName}) async {
    try {
      final imgUrl = await Get.find<FirebaseStorageService>().getImage(imgName);
      // Add log for successful image retrieval
      Get.find<PostController>()
          ._logger
          .i('Image retrieved successfully: $imgUrl');
      return imgUrl;
    } catch (e) {
      // Add log for error during image retrieval
      Get.find<PostController>()._logger.e('Error getting image: $e');
      return null;
    }
  }
}

main.dart for building the UI and using FutureBuilder to load the image.

class _MyAppStateful extends StatefulWidget {
  const _MyAppStateful({Key? key}) : super(key: key);

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

class __MyAppState extends State<_MyAppStateful> {
  late final PostController _postController;
  final RxString imgUrl = ''.obs;
  @override
  void initState() {
    super.initState();
    Get.put(FirebaseStorageService());
    _postController = Get.put(PostController());
  }

  final Logger _logger = Logger();

  @override
  Widget build(BuildContext context) {
    _logger.d('Building widget...');

    return Scaffold(
      body: FutureBuilder<String?>(
        future: PostController.getPostImage(imgName: '1'),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            _logger.d('Waiting for the future...');
            return const Center(
              child: CircularProgressIndicator(),
            );
          } else if (snapshot.hasError) {
            _logger.e('Error loading image: ${snapshot.error}');
            return const Center(
              child: Text('Error loading image'),
            );
          } else {
            String imgUrl = snapshot.data ?? '';
            _logger.d('Image URL: $imgUrl');

            return _buildImageList();
          }
        },
      ),
    );
  }

  Widget _buildImageList() {
    return Center(child: Image.network(imgUrl.value));
  }

Environment

Flutter 3.16.0
get: ^4.6.6
firebase_core: ^2.21.0
firebase_database: ^10.3.2
firebase_storage: ^11.5.2

I have verified that the Firebase Storage URL is being fetched correctly. Additionally, I've checked for any errors in the code, but I'm unable to identify the root cause of the issue.

I would appreciate any guidance or suggestions on how to resolve this issue. If there's something I might be missing or if there's a better approach to fetch and display images from Firebase Storage using GetX, please let me know.