Ive been trying to display images from firestore the code show no error and compiles but not able to display images,i am using web soo only configured for flutter web and rechecked. I am using cloud_firestore: ^3.1.0, and thought of using the new withConverter functionality. I want to use it to retrieve and pass my models from and to Firestore, but I am not quite sure why is not displaying. I think i may be parsing the data incorrectly
My firestore backend setup imgUrl:
//Here's my model
class ArtWork {
ArtWork({required this.name, required this.imgUrl});
final String name;
final String imgUrl;
factory ArtWork.fromJson(Map<String, dynamic> json) => ArtWork(
name: json['name'],
imgUrl: json['imgUrl'],
);
Map<String, Object?> toJson() {
return {
'name': name,
'imgUrl': imgUrl,
};
}
}
Ive used both streamBuilder and FutureBuilder both return same output.
class ProfilePage extends StatefulWidget {
final artRef = FirebaseFirestore.instance
.collection('artWorks')
.withConverter<ArtWork>(
fromFirestore: (snapshots, _) => ArtWork.fromJson(snapshots.data()!),
toFirestore: (artwork, _) => artwork.toJson(),
);
ProfilePage({Key? key}) : super(key: key);
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Card(child: _buildContent(context)),
),
);
}
Widget _buildContent(BuildContext context) {
// final database = Provider.of<Database>(context, listen: false);
return FutureBuilder<QuerySnapshot<ArtWork>>(
future: widget.artRef.get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot<ArtWork>> snapshot) {
if (snapshot.hasError) {
return Text("Something went wrong");
}
if (snapshot.hasData && snapshot.data!.docs.isNotEmpty) {
return Text("Document does not exist");
}
if (snapshot.connectionState == ConnectionState.done) {
return ListView(
shrinkWrap: true,
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return ListTile(
title: Text(data['name'].toString(), style: TextStyle(color: Colors.black,fontSize: 60),),
subtitle: Text(data['imgUrl']),
);
}).toList(),
);
}
return Text("loading");
},
);
}
Output:
Performing hot restart... 12.6s
Restarted application in 12,582ms.
[.2021-11-09T15:47:17.224Z] @firebase/firestore:
