How to fetch image from firestore on flutter? - flutter

Question

I tried to fetch images and topic and descriptions for each "doc id ", Successfully fetch topic and description but when I tried to fetch image then shows "URL undefined" .For this code I used model class also.And in there I decleard "URL" and in the UI code I called that in an" Imagenetwrok widget".
code
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../articlesModel.dart';
class ViewArticlesScreens extends StatefulWidget {
const ViewArticlesScreens({Key? key}) : super(key: key);
#override
State<ViewArticlesScreens> createState() => _ViewArticlesScreensState();
}
class _ViewArticlesScreensState extends State<ViewArticlesScreens> {
#override
Future<List<Articles>> fetchRecords() async {
var records = await FirebaseFirestore.instance.collection('articles').get();
return mapRecords(records);
}
List<Articles> mapRecords(QuerySnapshot<Map<String, dynamic>> records) {
var _list = records.docs
.map(
(article) => Articles(
id: article.id,
topic: article['topic'],
description: article['description'],
url: article['url'],
),
)
.toList();
return _list;
}
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return Scaffold(
body: Column(
children: [
SingleChildScrollView(
child: Column(
//chip words
children: <Widget>[
const SizedBox(height: 10),
SizedBox(
width: width * 0.94,
height: height * 0.30,
child: FutureBuilder<List<Articles>>(
future: fetchRecords(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
List<Articles> data = snapshot.data ?? [];
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return (ListTile(
leading: Image.network(
url,
height: 30,
fit: BoxFit.cover,
),
title: Text(data[index].topic),
subtitle: Text(data[index].description),
tileColor: Colors.red,
));
});
}
}))
],
),
),
],
),
);
}
}
model class
import 'dart:convert';
Articles articlesFromJson(String str) => Articles.fromJson(json.decode(str));
String articlesToJson(Articles data) => json.encode(data.toJson());
class Articles {
Articles({
required this.id,
required this.url,
required this.topic,
required this.description,
});
String id;
String topic;
String description;
String url;
factory Articles.fromJson(Map<String, dynamic> json) => Articles(
id: json["id"] ?? "",
topic: json["topic"] ?? "",
description: json["description"] ?? "",
url: json["url"] ?? "",
);
Map<String, dynamic> toJson() => {
"id": id,
"topic": topic,
"description": description,
"url": url,
};
}

Answer 1

you just set url instead of data[index].url
here try this :
itemBuilder: (context, index) {
return (ListTile(
leading: Image.network(
data[index].url,
height: 30,
fit: BoxFit.cover,
),
title: Text(data[index].topic),
subtitle: Text(data[index].description),
tileColor: Colors.red,
));
});
}