Displaying image in container using Firebase storage in Flutter?

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'])));
    });
      }
   }

Solution

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()

Comments

[Yash Jha]

this looks close i did this and after some multidex and firebase init errors (that i solved), i'm now facing with another issue Bad state: cannot get a field on a DocumentSnapshotPlatform which does not exist any idea how can i get through this?

[Yash Jha]

i've posted the data you can have a look!

[Yash Jha]

i think the streambuilder is causing some error it's showing something like the relevant error-causing widget was StreamBuilder<DocumentSnapshot>

[Huthaifa Muayyad]

@YashJha I updated my answer, you need to add ['imageUrl'] to access the url. Try now it should work.

[Huthaifa Muayyad]

@YashJha the error you are getting is because you aren't passing a documentId to firebase,so it doesn't know where to look. in .doc() , you should pass the id of the document, then it should work fine. Update ont he results of this.

[Yash Jha]

it worked!!!! thank you so much. really appreciate that.

[Huthaifa Muayyad]

You're most welcome @YashJha . Please mark it as a solution to your post, and upvote the helpful comments, because the post contained more than one question, I'd appreciate it. Happy coding!

[Amit Singh]

You do not need to provide doc() becuse u provide random document id