Flutter，如何从Firestore获取相应索引项的图像URL并显示在列表视图中 [英] Flutter, How to get Image URL from Firestore for respective Index Items and show in a list View

问题描述

我正在尝试创建一个显示动态FireStore列表的应用.我已经用Future Builder制作了List，我要实现的目标是在应该从同一文档Index的firesotre中获取URL的每个列表中添加一个Icon.例如Flipkart是FireStore中的一个文档，它具有一个图像"字段，并带有指向Flipkart徽标的URL.我希望列表视图"的前导"属性通过从FireStore数据库获取URL来显示此图像.

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

该代码将类似于

               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.

FireStore的完整代码获取数据:

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

推荐答案

当您在FireStore中将URL作为字符串时，可以使用以下类似的人检索URL:snapshot.data[index].data['imageFieldName']，然后可以返回此内容(URL)到NetworkImage来显示图像.

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.

这篇关于Flutter，如何从Firestore获取相应索引项的图像URL并显示在列表视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！