Flutter Web not displaying NetworkImages from Firebase storage, works perfectly on android emulator however

Question

As in the title, I am deploying my app to Flutter Web and I am displaying pictures from Firebase storage. When testing on the android emulator, it works perfectly and displays all images without error. However, when I deploy it to my web app, images don't show at all for some reason. Below I added the relevant code snippet which shows how I display the pictures from Firebase (which, again, works perfectly fine on Android emulator) and the error on the web app when it tries to display the pictures.

Code:

void checkImages() async {
    FirebaseFirestore.instance
        .collection("uploads")
        .where('username', isEqualTo: Constants.myName)
        .get()
        .then((querySnapshot) {
      querySnapshot.docs.forEach((result) {
        FirebaseFirestore.instance
            .collection("uploads")
            .doc(result.id)
            .collection("images")
            .get()
            .then((querySnapshot) {
          querySnapshot.docs.forEach((result) async {
            imageCount++;
            final ref =
                FirebaseStorage.instance.ref().child(result.data()['imageid']);
            url = await ref.getDownloadURL();
            setState(() {
              printImages();
            });
          });
        });
      });
    });
  }

  printImages() {
    return List.generate(imageCount, (index) {
      return GestureDetector(
        onTap: () {
          print( "hello");
        },
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Image.network(
            url.toString(),
            fit: BoxFit.cover,
          ),
        ),
      );
    });
  } 

Error in web console:

main.dart.js?version=19:3082 Uncaught MissingPluginException(No implementation found for method StorageReference#getDownloadUrl on channel plugins.flutter.io/firebase_storage)
    at Object.a (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:3082:3)
    at https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:53813:15
    at adv.a (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:4517:71)
    at adv.$2 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30063:23)
    at acI.$1 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30055:30)
    at No.mY (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:31072:40)
    at a82.$0 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30474:11)
    at Object.rs (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:4637:40)
    at a1.nL (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30390:3)
    at a7V.$0 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30432:22)

To add to this, I am pretty sure I have all plugins installed correctly, because it works on Android. Any help would be appreciated, thank you.

Answer 1

Please try adding this script tag to your index.html, after you have initialized it with the Firebase credentials (you get them when you add a new web-app in Firebase)

//import the Firestore plugin
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>

Take a look at this website to see all the plugins you may want to import:

https://firebase.google.com/docs/web/setup#expandable-8