I want to access variable in dart - database

Question

I want to access imageUrl variable into Scaffold's body.
class _homePageState extends State<homePage> {
Stream<QuerySnapshot> _homeTopSliderData =
FirebaseFirestore.instance.collection("homeTopSliderData").snapshots();
#override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _homeTopSliderData,
builder:
(BuildContext context, AsyncSnapshot<QuerySnapshot> querySnapshot) {
if (querySnapshot.hasError) {
return Scaffold(
body: Center(
child: Text("Something went wrong"),
),
);
} else if (querySnapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
querySnapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
var imageUrl = data['imageUrl'];
});
return Scaffold(
body: Image(
image: NetworkImage(imageUrl),
),
);
});
}
}
It shows error when I use it as network image's url,
I am new to flutter and dart
Thanks!!!

Answer 1

The scope of the variable imageUrl is local, for that reason the scaffold can't access to that variable. To get more info refer to: https://toastguyz.com/dart/dart-variable-scope
It should work in the next way:
class _homePageState extends State<homePage> {
Stream<QuerySnapshot> _homeTopSliderData =
FirebaseFirestore.instance.collection("homeTopSliderData").snapshots();
#override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _homeTopSliderData,
builder:
(BuildContext context, AsyncSnapshot<QuerySnapshot> querySnapshot) {
if (querySnapshot.hasError) {
return Scaffold(
body: Center(
child: Text("Something went wrong"),
),
);
} else if (querySnapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
var imageUrl;
querySnapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
imageUrl = data['imageUrl'];
});
return Scaffold(
body: Image(
image: NetworkImage(imageUrl),
),
);
});
} }

Answer 2

You are streaming a collection, therefore, you will get a List of imageUrls (not 1, you could get up to 5 imageUrls). From your code, you are not using the list of imageUrls for anything, you are simply trying to use the last value of imageUrl. So, I do not think you want to stream a collection. I think you want a particular imageUrl.
To get a particular imageUrl, stream the document like this:
Stream<DocumentSnapshot<Map<String, dynamic>>> _homeTopSliderData =
FirebaseFirestore.instance
.collection("homeTopSliderData")
// TODO: replace DOCUMENTID with your document id.
.doc("DOCUMENTID")
.snapshots();
#override
Widget build(BuildContext context) {
return StreamBuilder<DocumentSnapshot>(
stream: _homeTopSliderData,
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot> querySnapshot) {
if (querySnapshot.hasError) {
return Scaffold(
body: Center(
child: Text("Something went wrong"),
),
);
} else if (querySnapshot.connectionState == ConnectionState.waiting) {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
Map<String, dynamic> data = querySnapshot.data.data();
print(data['imageUrl']);
return Scaffold(
body: Image(
image: NetworkImage(data['imageUrl']),
),
);
},
);
}
If you want to stream a collection (get all imageUrls in all documents) (bad idea since you are obviously not expecting multiple imageUrls), you can replace this part in your code:
var imageUrl;
querySnapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
print(data['imageUrl']);
if (data['imageUrl'] != null) {
imageUrl = data['imageUrl'];
}
});
return Scaffold(
body: Image(
image: NetworkImage(imageUrl),
),
);