【问题标题】:A build function returned null,The offending widget is: StreamBuilder<QuerySnapshot>构建函数返回 null,有问题的小部件是:StreamBuilder<QuerySnapshot>
【发布时间】:2020-02-25 20:35:03
【问题描述】:

我是 Flutter 的新手。我试图从firestore获取项目以显示在应用程序的Listview中,但得到“构建函数返回null。有问题的小部件是:StreamBuilder,构建函数永远不能返回null”。我只想在 listview 中显示来自 firstore 的列表“帖子”

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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


class MyApp extends StatelessWidget {

  @override

   Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Post App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff543b7a),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

 @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(FontAwesomeIcons.hamburger),
        ),
      ),
      body: StreamBuilder(
        stream: Firestore.instance.collection('post').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            Text('Loading');
          } else {
            return ListView.builder(
              itemCount: snapshot.data.document.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myPost = snapshot.data.documents[index];
                return Stack(
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width,
                      height: 350.0,
                      child: Padding(
                        padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
                        child: Material(
                          color: Colors.white,
                          elevation: 14.0,
                          shadowColor: Color(0x802196f3),
                          child: Column(
                            children: <Widget>[
                              Container(
                                width: MediaQuery.of(context).size.width,
                                height: 200.0,
                                child: Image.network(
                                  '${myPost['image']}',
                                  fit: BoxFit.fill,
                                ),
                              ),
                              SizedBox(
                                height: 10.0,
                              ),
                              Text('${myPost['title']}'),
                              SizedBox(
                                height: 10.0,
                              ),
                              Text('${myPost['subtitle']}'),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                );
              },
            );

          },
        },


      ),
    );
  }
}
[enter image description here][1]


  [1]: https://i.stack.imgur.com/QeSyi.png

构建函数返回 null。有问题的小部件是:StreamBuilder.Build 函数绝不能返回 null。

【问题讨论】:

    标签: flutter flutter-layout


    【解决方案1】:

    你错过了回报:

    builder: (context, snapshot) {
              if (!snapshot.hasData) {
                Text('Loading'); // <---- no return here
              } else {
                return ListView.builder(
                  itemCount: snapshot.data.documents.length, // <---- documents here
                  itemBuilder: (context, index) {
                    DocumentSnapshot myPost = snapshot.data.documents[index];
    

    【讨论】:

    • 嗨,谢谢你这么快的评论,现在我收到错误“类'QuerySnapshot'没有实例获取器'document'。接收者:'QuerySnapshot'的实例尝试调用:文档”
    • 我查看了 firebase api 文档,它说 'QuerySnapshot' 有 documents 字段,它是一个文档快照列表。我编辑了我的答案,向您展示错误在哪里。
    • thx 很多朋友刚刚意识到我在文档后缺少一个“s”。
    • 没问题,如果我解决了你的问题,请接受答案
    猜你喜欢
    • 2019-02-09
    • 1970-01-01
    • 2020-06-16
    • 2021-06-05
    • 2020-05-05
    • 2021-08-03
    • 2021-08-01
    • 1970-01-01
    • 2020-08-23
    相关资源
    最近更新 更多