List All files from Firebase Storage Flutter Web

I’m trying to display all images on my Firebase Storage but what I have tried so far are not returning all the images in the storage.
If anyone manage to list all files of a Firebase Storage using Flutter for Web please let me know.

1. I managed to display specific images based on file name
2. I managed to upload new files to the storage

Based on the documentation I tried the .listAll() & .list() methods but none of them return the images
Rules of Firebase Storage looks like:

rules_version = '2';

// Craft rules based on data in your Firestore database
// allow write: if firestore.get(
//    /databases/(default)/documents/users/$(request.auth.uid)).data.isAdmin;
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow get: if true;
      allow write: if request.auth != null;
      allow delete: if request.auth != null;
      allow list: if request.auth != null;
    }
  }
}

>Solution :

To list all files from Firebase Storage in a Flutter web app, you need to ensure that your Firebase rules are correctly set up and that you are using the Firebase Storage API correctly. Below is a solution that should help you list all images:

Firebase Rules – Make sure your Firebase Storage rules allow listing and reading files:

plaintext
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true;
      allow list: if request.auth != null;
    }
  }
}

Add Dependencies – Ensure your pubspec.yaml includes:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.6
  firebase_storage: ^10.1.1
Initialize Firebase: In main.dart, initialize Firebase:

dart
Copy code
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

List Files – Use the listAll method to fetch and display image URLs:

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> _fileUrls = [];

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

  Future<void> _listAllFiles() async {
    final ListResult result = await FirebaseStorage.instance.ref().listAll();
    final List<Reference> allFiles = result.items;

    List<String> urls = [];
    for (Reference ref in allFiles) {
      final String url = await ref.getDownloadURL();
      urls.add(url);
    }

    setState(() {
      _fileUrls = urls;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _fileUrls.length,
      itemBuilder: (context, index) {
        return Image.network(_fileUrls[index]);
      },
    );
  }
}

This should work for your problem.