In a class I took he said pickedImages is looping, so I'm not sure if the problem is in uploadMultipleImages function where pickedImages is used or if the problem is in the function loadImages.
The functions are a bit beyond my understanding. What I'm trying to do is have each card show different images. I'm not sure what needs to change.
Functions:
File? imageFile;
String? fileName;
Future<void> uploadMultipleImages() async {
final picker = ImagePicker();
final List<XFile>? pickedImages = await picker.pickMultiImage();
if (pickedImages == null) {
return null;
}
setState(() {
loading = true;
});
await Future.forEach(pickedImages, (XFile image) async {
fileName = image.name;
imageFile = File(image.path);
try {
await firebaseStorage.ref(fileName).putFile(imageFile!);
} on FirebaseException catch (e) {
print(e);
}
});
setState(() {
loading = false;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("All images uploaded successfully")));
}
Future<List> loadImages() async {
List<Map> files = [];
final ListResult result = await firebaseStorage.ref().listAll();
final List<Reference> allFiles = result.items;
await Future.forEach(allFiles, (Reference file) async {
final String fileUrl = await file.getDownloadURL();
files.add({
"url": fileUrl,
"path": file.fullPath,
});
});
print(files);
return files;
}
Here I use loadImages:
body: StreamBuilder(
stream: FirebaseFirestore.instance
.collection("notes")
.where('userId', isEqualTo: user.uid)
.snapshots(),
builder: (context, AsyncSnapshot streamSnapshot) {
if (streamSnapshot.hasData) {
if (streamSnapshot.data.docs.length > 0) {
return ListView.builder(
itemCount: streamSnapshot.data.docs.length ?? 0,
itemBuilder: (context, index) {
final NoteModel note =
NoteModel.fromJson(streamSnapshot.data.docs[index]);
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
margin:
const EdgeInsets.only(top: 18, left: 15, right: 15),
child: Column(children: [
SizedBox(
height: 210,
child: Expanded(
child: FutureBuilder(
future: loadImages(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Swiper(
loop: false,
pagination: SwiperPagination(
alignment: Alignment.bottomRight,
builder: DotSwiperPaginationBuilder(
activeSize: 7,
size: 6,
color: Colors.grey[100],
activeColor: Colors.grey[600]),
),
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.length ?? 0,
itemBuilder: (context, index) {
final Map image =
snapshot.data[index];
return Padding(
padding:
const EdgeInsets.all(0.0),
child: Column(
children: [
Card(
child: SizedBox(
height: 200,
child: SizedBox(
height: MediaQuery.of(
context)
.size
.height,
width: MediaQuery.of(
context)
.size
.width,
child: ClipRRect(
borderRadius:
const BorderRadius
.only(
topLeft: Radius
.circular(
15),
topRight: Radius
.circular(
15)),
child:
CachedNetworkImage(
fit: BoxFit.cover,
imageUrl:
image['url'],
placeholder: (context,
url) =>
Image.asset(
'assets/placeholder.jpg'),
errorWidget: (context,
url,
error) =>
const Icon(Icons
.error),
),
),
),
),
),
],
));
});
}),
),
),
Please let me know if you need to see more code.
Any help is appreciated!
