Displaying image in container using Firebase storage in Flutter? - firebase

Question

I'm new to Firebase and I don't know how to move forward from here now. I have an image in Firebase storage and I just want to display it in my app. In full size, so I chose Container. Now by watching a tutorial I have wrote some code but didn't get anywhere. Please can you guys help.
It maybe a silly question but you know the beginners! Thank you in advance.😅 I've updated by code with StreamBuilder.
**MAIN.DART**
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DetailScreen(),
);
}
}
**DETAILSCREEN.DART
class DetailScreen extends StatefulWidget {
#override
_DetailScreenState createState() => _DetailScreenState();
}
class _DetailScreenState extends State<DetailScreen> {
StreamSubscription<QuerySnapshot> subscription;
List<DocumentSnapshot> wallpaperList;
final CollectionReference collectionReference =
FirebaseFirestore.instance.collection("wallpaperimg");
#override
void initState() {
super.initState();
subscription = collectionReference.snapshots().listen((datasnapshot) {
setState(() {
wallpaperList = datasnapshot.docs;
});
});
}
#override
void dispose() {
subscription?.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return return StreamBuilder(
stream: FirebaseFirestore.instance
.collection("wallpaperimg")
.doc()
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Text("Loading");
}
var profiledetail = snapshot.data;
return Container(
child: Image(image: NetworkImage(profiledetail['imgUrl'])));
});
}
}

Answer 1

This is assuming that every document in firebase is storing a single imageUrl.
To display the first image in your list, you can use:
Container(
child: Image.network(wallpaperList[0].data()['imageUrl'])
)
But since you are retrieving multiple documents, not just one, you can use a ListView.builder to do that to display all the images you are getting.
ListView.builder(
itemCount: wallpaperList.length,
itemBuilder: (context, index) {
return Container(
child: Image.network(wallpaperList[index].data()['imageUrl'])
);})
Post how your data looks in firebase, to get a better answer.
-- edit 2:
Since youa re using streambuilder now, you need to pass the the document id to your query .collection('wallpaperimg').doc('theRandomNumberDocumentIdinfirebase').get()

Answer 2

use like this pass your stream where your images is saved.
StreamBuilder(
stream: Firestore.instance
.collection("userprofile")
.document(userid)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Text("Loading");
} var Profiledetail = snapshot.data;return Container(child:Image(image:NetworkImage(Profiledetail["imgurl"])));
I hope this would be Helpful