flutterfirebase-storage

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.