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.
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;
}
}
}
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.