如何使用 Future Builder 创建包含来自 Cloud FireStore 的数据的列表

Posted 2023-02-23

【中文标题】如何使用 Future Builder 创建包含来自 Cloud FireStore 的数据的列表

【英文标题】：How can I create a list with data from Cloud FireStore using Future Builder

【发布时间】：2020-09-23 16:03:33

【问题描述】：

我正在尝试使用从 Cloud Firestore 检索数据的列表视图创建 Flutter 应用程序。我遇到了 Future Builder 的问题。在下面找到我的代码：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:awesome_loader/awesome_loader.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(OfferPage());

class OfferPage extends StatefulWidget 
@override
_OfferPageState createState() => _OfferPageState();


class _OfferPageState extends State<OfferPage> 
@override
Widget build(BuildContext context) 
return MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(primaryColor: Colors.green[900]),
    home: Scaffold(
      appBar: AppBar(
        title: Text('Click a Deal'),
        centerTitle: true,
        backgroundColor: Colors.green[900],
      ),
      body: OfferScroll(),
    ));
    
     

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

    class _OfferScrollState extends State<OfferScroll> 

     Future getOffers() async 
     var firestore = Firestore.instance;
     QuerySnapshot qn = await firestore.collection("Offers").getDocuments();
     return qn.documents;
    

    @override
    Widget build(BuildContext context) 
       return Container(
          child: FutureBuilder(
          future: getOffers(),
          builder: (_, snapshot) 
          if (snapshot.connectionState == ConnectionState.waiting) 
              return Center(
                 child: AwesomeLoader(
                 loaderType: AwesomeLoader.AwesomeLoader3,
                 color: Colors.green[900],
            ),
          );
         else 
          ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (_, index) 
                return ListTile(
                    title: Text(snapshot.data[index].data["title"]));
              );
        
      ),
);

我遇到了这个错误：

在构建 FutureBuilder(dirty, state: _FutureBuilderState#ea2bc) 时抛出了以下断言： 构建函数返回 null。

有问题的小部件是：FutureBuilder 构建函数绝不能返回 null。

要返回导致建筑小部件填满可用空间的空白空间，请返回“Container()”。要返回占用尽可能少空间的空白空间，请返回“Container(width: 0.0, height: 0.0)”。

【参考方案1】：

必须在ListView.builder前添加return，否则else分支会返回null：

return ListView.builder(
    itemCount: snapshot.data.length,
    itemBuilder: (_, index) 
        return ListTile(
            title: Text(snapshot.data[index].data["title"]));
    ,
);

【讨论】：

谢谢@MarcelGeirhos，只是忘了补充。编程新手

不是您的问题的正确解决方案？当它是正确的解决方案时，请接受答案。 :)

能否请您查看我的其他帖子，我需要它工作：***.com/q/62208497/10616816

我认为您应该寻找 NetworkImage 来加载图像，然后您可以参考您要显示的图像 url。

当您在 FireStore 中将 URL 作为字符串时，我认为您可以通过以下方式检索 URL：snapshot.data[index].data['imageFieldName'] 然后您可以提供将此（URL）返回到 NetworkImage 以显示图像。