How to display images from Frirebase Storage in StreamBuilder - flutter

Question

I'm trying to display images from FirebaseStorage in StreamBuilder when user add them after they have been saved in FirebaseStorage
Try #1
It works but only the last added image is shown as stream and I would like to display all the images added.
I guess this try is the better way but I can't add ListView.builder because TaskSnapshot is one data and not a list of data like ListResult that's probably why I can't diplay all images and only the last one.
Widget:
Widget loadingImage(UploadTask uploadTask) => StreamBuilder<TaskSnapshot>(
stream: uploadTask.snapshotEvents,
builder: (context, snapshot) {
if(snapshot.hasData) {
final snap = snapshot.data;
final photoName = snap!.metadata!.name;
final photoType = snap.metadata!.contentType;
final photo = snapshot.data!.ref.getDownloadURL();
return StreamBuilder(
stream: photo.asStream(),
builder: (context, AsyncSnapshot<String> snapshot) {
final image = snapshot.data;
print("Image: $image");
return Row(
children: [
Image.network(
fit: BoxFit.cover,
width: 100,
height: 100,
image!,
),
const SizedBox(width: 20,),
Text(
photoName,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 20,),
Text(
photoType!,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
)
],
);
}
);
}
return Container();
},
);
Try #2
It displays images but not as stream if one is added it's not shown if a second one is added the first one will be displayed etc
DocumentViewModel:
//----------------------------------------------------------------------------
//----------------------------- Upload instructor document list --------------
//----------------------------------------------------------------------------
static Stream<ListResult>? uploadFileList(String uid) {
try {
final result = FirebaseStorage.instance
.ref("instructorDocuments/")
.child("$uid/")
.listAll();
return result.asStream();
} on FirebaseException catch (e) {
return null;
}
}
Widget:
Widget loadingImage(UploadTask uploadTask) => StreamBuilder<ListResult>(
stream: DocumentViewModel.uploadFileList(user!.uid),
builder: (context, snapshot) {
if(snapshot.hasData) {
final snap = snapshot.data;
return ListView.builder(
itemCount: snap!.items.length,
itemBuilder: (context, index) {
final photoName = snap.items[index].name;
final photoType = snap.items[index].getMetadata();
final photo = snap.items[index].getDownloadURL();
return StreamBuilder<FullMetadata>(
stream: photoType.asStream(),
builder: (context, AsyncSnapshot<FullMetadata> snapshot) {
if(snapshot.hasData) {
final type = snapshot.data!.contentType;
return StreamBuilder(
stream: photo.asStream(),
builder: (context, AsyncSnapshot<String> snapshot) {
if(snapshot.hasData) {
final image = snapshot.data;
return Row(
children: [
Image.network(
fit: BoxFit.cover,
width: 100,
height: 100,
image!,
),
const SizedBox(width: 20,),
Text(
photoName,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 20,),
Text(
type!,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
);
}
return Container();
},
);
}
return Container();
}
);
},
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
);
}
if(!snapshot.hasData) {
return const Loader();
}
if(snapshot.hasError) {
return Utils.showErrorMessage(snapshot.hasError.toString());
}
else {
return Container();
}
}
);
Thanks in advance

Answer 1

try this without streambuilder for getting images from firebase
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class BlogView extends StatefulWidget {
const BlogView({Key? key}) : super(key: key);
#override
State<BlogView> createState() => _BlogViewState();
}
var im;
var allimgList = [];
class _BlogViewState extends State<BlogView> {
#override
void initState() {
getData();
super.initState();
setState(() {
});
}
void getData() async {
allimgList=[];
await FirebaseFirestore.instance
.collection('Names')
.snapshots()
.forEach((event) {
var n=event.docs.length;
print(event.docs.length);
for (int i = 0; i <n; i++) {
im = event.docs[i]['Images'];
var nn=event.docs[i]['Images'].length;
for(int j=0;j<nn;j++){
allimgList.add(im[j]);
setState(() {});
}
if(i==n)break;
}
print("=========>" + allimgList.toString());
});
setState(() {
});
}
#override
Widget build(BuildContext context) {
// print("================lllllllll =>" + allimgList.toString());
return Scaffold(
appBar: AppBar(
title: Text("Blog"),
),
body: Container(
child: Center(
child: allimgList.length == 0 ?
Container(
height: 500,
width: 300,
child: Center(child: Text("No Image Added Yet")),
):Container(
margin: EdgeInsets.only(top: 10),
child: GridView.builder(
padding: EdgeInsets.only(left: 10, right: 10),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 150,
childAspectRatio: 4 / 4,
crossAxisSpacing: 10,
mainAxisSpacing: 20),
itemCount: allimgList.length,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Image.network(
allimgList[index],
fit: BoxFit.fill,
),
);
}),
),
),
),
);
}
}