You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Flutter新手求助:StreamBuilder报build函数返回null,无法展示Firestore数据

解决StreamBuilder返回null的报错问题

嘿,我帮你定位到问题啦!你遇到的这个A build function returned null错误,根源是StreamBuilder的builder函数在数据未加载完成时没有返回有效的Widget——你写了Text('Loading')但漏掉了return关键字,导致这个分支默认返回null,触发了Flutter的报错规则(构建函数绝对不能返回null)。

另外我还发现代码里有个小拼写错误:snapshot.data.document.length应该改成snapshot.data.documents.length(注意是复数形式的documents),不然运行时还会出现找不到document属性的错误。

下面是修复后的完整代码:

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),
          onPressed: () {}, // 补充onPressed避免警告
        ),
      ),
      body: StreamBuilder(
        stream: Firestore.instance.collection('post').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            // 这里加上return,返回加载状态的Widget
            return Center(child: Text('Loading'));
          } else {
            return ListView.builder(
              itemCount: snapshot.data.documents.length, // 修正拼写错误:documents而非document
              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']}'),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                );
              },
            );
          }
        },
      ),
    );
  }
}

关键修改点说明:

  1. 添加return关键字:在加载分支里给Text('Loading')加上return,同时用Center包裹让文本居中显示,体验更好。
  2. 修正拼写错误:把snapshot.data.document.length改为snapshot.data.documents.length,因为Firestore的查询快照里的文档列表属性是复数形式的documents
  3. 补充IconButton的onPressed:给AppBar的汉堡按钮添加空的onPressed回调,避免Flutter抛出缺少必要参数的警告。

这样修改后,你的App就能正常加载Firestore里的post集合并展示在ListView中啦!

内容的提问来源于stack exchange,提问作者joyhossain

火山引擎 最新活动