CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Jazil Zaim
Jazil Zaim

Reputation: 357

Struggling to load images from Firebase Firestore into ListItem in Flutter app

I am having a bit of issue loading images from my Firebase Firestore database into my Flutter app. I am sort of stuck on this since I don't know what to do currently. I have seen a way to use NetworkImage to download an image on a list tile but it only does one image. I am trying to figure out a way to use a separate image for each item in the Firestore database.

I have hooked up the image URL from the Firebase Storage to Firestore under the imageURL key which is a String. But I am still struggling to figure out how to do this. I have also downloaded all the dependencies such as Firebase and Firestore. If anyone does offer to help or shares a tip on how they have worked with something similar to this, it'd be greatly appreciated! :)

class HomeTab extends StatefulWidget {
  @override
  _HomeTabState createState() => _HomeTabState();
}

class _HomeTabState extends State<HomeTab> {
  

  @override
  Widget build(BuildContext context) {

// This will reference our posts collection in Firebase Firestore NoSQL database.
CollectionReference posts = FirebaseFirestore.instance.collection('posts');

return Center(
  child: Container(
    width: 250,
    child: StreamBuilder<QuerySnapshot>(
      // Renders every post from the Firebase Firestore Database.
      stream: posts.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }

        return new ListView(
          children: snapshot.data.docs.map((DocumentSnapshot document) {

            return Card(
              margin: EdgeInsets.all(20.0),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
              ),
              elevation: 10,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [

                  ListTile(
                    // Renders the title on every single listview.
                    title: new Text(document.data()['title']),
                    // leading: new NetworkImage(''),
                    onTap: () {

                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => ReaderPage(),
                        ),
                      );

                    },
                  ),


                  

                ],

                // Added Column
                // In case if things don't work, go back to this.
                // child: new ListTile(
                //   title: new Text(document.data()['text']),
                // ),
              ),
            );
          }).toList(),

        );
      },
    ),
  ),
);


}

}

Here is my Firebase Storage

My Firestore database

Upvotes: 0

Views: 793

Answers (1)

yusufpats
yusufpats

Reputation: 856

The NetworkImage class is not a flutter widget class. It is responsible for downloading the image from the URL provided. It inherits from the ImageProvider class.

From the flutter docs:

Fetches the given URL from the network, associating it with the given scale.

Use Image.network for a shorthand of an Image widget backed by NetworkImage.

You should be using the Image.network named constructor of the Image widget to create a flutter widget used to display image with help of NetworkImage.

You should replace the NetworkImage in your widget tree with:

new Image.network("https://i.sstatic.net/W98kA.png")

Upvotes: 1

Related Questions