CODEWITHSUNDEEP
listflutter
Maddox Mania
Maddox Mania

Reputation: 61

Flutter, How to get Image URL from Firestore for respective Index Items and show in a list View

I am trying to create an app which displays a dynamic FireStore List. I have made the List with a Future Builder, what I am trying to achieve is to add a Icon to every list of which the URL should be fetched from firesotre of the same documents Index. For Eg. Flipkart is a Document in FireStore it has a "images" field with the URL to Flipkart logo. I want the List View "leading" property to display this image by getting the URL from FireStore Database.

ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) {
                return Card(
                  margin: EdgeInsets.fromLTRB(10, 2, 10, 2),
                  elevation: 3,
                  borderOnForeground: true,
                  child: ListTile(
                    title: Text(snapshot.data[index].data['title']),
                    subtitle: Text(snapshot.data[index].data['description']),
                    onTap: () => navigateToDetails(snapshot.data[index]),
                  ),
                );
              });

The Code would go something like

               ListTile(
                    leading: "Code Goes Here"
                    title: Text(snapshot.data[index].data['title']),
                    subtitle: Text(snapshot.data[index].data['description']),

Please share your valuable thoughts. I would like this to work, New to programming.

Full Code For FireStore Get Data:

class OfferScroll extends StatefulWidget {
@override
_OfferScrollState createState() => _OfferScrollState();
}

class _OfferScrollState extends State<OfferScroll> {

Future _data;
Future getOffers() async {

var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection('Offers').getDocuments();
return qn.documents;

}

navigateToDetails (DocumentSnapshot offers) {
Navigator.push(context, MaterialPageRoute(builder: (context) => 
OfferDetails(offers: offers,)));
}

 @override
void initState() {
super.initState();
_data = getOffers();
}

@override
Widget build(BuildContext context) {
return Container(
  child: FutureBuilder(
      future: _data,
      builder: (_, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: AwesomeLoader(
              loaderType: AwesomeLoader.AwesomeLoader3,
              color: Colors.green[900],
            ),
          );
        } else {
          return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) {
                return Card(
                  margin: EdgeInsets.fromLTRB(10, 2, 10, 2),
                  elevation: 3,
                  borderOnForeground: true,
                  child: ListTile(
                    title: Text(snapshot.data[index].data['title']),
                    subtitle: Text(snapshot.data[index].data['description']),
                    onTap: () => navigateToDetails(snapshot.data[index]),
                  ),
                );
              });
        }
      }),
);
}
}

Upvotes: 1

Views: 843

Answers (1)

Marci
Marci

Reputation: 180

When you have the URL as a string in your FireStore you can retrieve the URL with someone like this: snapshot.data[index].data['imageFieldName'] and then you can give the return of this (the URL) to a NetworkImage to display the image.

Upvotes: 1

Related Questions