在使用StreamBuilder从Firebase加载数据之前，Flutter会显示一个红色错误屏幕，该如何解决？

问题内容：

我正在从Firebase获取数据，并使用该数据制作卡。为了显示来自数据库的用户某些数据，数据加载正常，但是持续1秒钟或更长时间，出现红色错误屏幕。我希望这个消失，我将向您展示我的代码。有人可以帮我看看怎么了。我不知道这是怎么回事，我得到了错误

getter’uid’在null上被调用。接收方：null尝试调用：uid

方法’[]’在null上被调用。接收方：null尝试调用：

这是我的代码，任何帮助将不胜感激谢谢

class CardBuilder extends StatefulWidget {

  final String title;
  final String text;
  final IconData icon;

  CardBuilder({Key key, this.title,this.text,this.icon}): super(key: key);

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

class _CardBuilderState extends State<CardBuilder> {
  FirebaseUser user;
  String error;

  void setUser(FirebaseUser user) {
    setState(() {
      this.user = user;
      this.error = null;
    });
  }

  void setError(e) {
    setState(() {
      this.user = null;
      this.error = e.toString();
    });
  }

  @override
  void initState() {
    super.initState();
    FirebaseAuth.instance.currentUser().then(setUser).catchError(setError);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance.collection(UserInformation).document(user.uid).snapshots(),
        builder: (context, snapshot) {
          var userDocument = snapshot.data;
          // User userDocument here ..........
          return Card(
              margin: EdgeInsets.only(left: 20,right: 20,top: 20),
              child: ListTile(
                leading:
                Icon(widget.icon, color: QamaiGreen, size: 20.0),
                title: AutoSizeText(
                  '${widget.title} :   ${userDocument[widget.text]}',
                  style: TextStyle(
                      fontFamily: 'Montserrat',
                      fontWeight: FontWeight.w600,
                      color: QamaiThemeColor,
                      fontSize: 15
                  ),
                  maxLines: 1,
                  maxFontSize: 15,
                  minFontSize: 12,
                ),
              ));
        });
  }


}

问题答案：

因此，在尝试了一些东西之后，我终于解决了该错误。由于此问题在线上没有任何解决方案，因此决定发布答案。至少我找不到一个。希望这可以帮助遇到同样问题的人

我首先要做的是声明一个包含user.uid值的字符串

String userid;
void _getUser() async {
  FirebaseUser user = await FirebaseAuth.instance.currentUser();
  userid=user.uid;
}

现在在卡片制造器小部件中，我摆脱了多余的东西，并在初始状态下简单地称为_getUser（）方法

class _CardBuilderState extends State<CardBuilder> {

  @override
  void initState() {
    super.initState();
    _getUser();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance.collection(UserInformation).document(userid).snapshots(),
        builder: (context, snapshot) {
          if(snapshot.hasData)
            {
              final userDocument = snapshot.data;
              final title=userDocument[widget.text];
              return Card(
                  margin: EdgeInsets.only(left: 20,right: 20,top: 20),
                  child: ListTile(
                    leading:
                    Icon(widget.icon, color: QamaiGreen, size: 20.0),
                    title: AutoSizeText(
                      '${widget.title} :   $title',
                      style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          color: QamaiThemeColor,
                          fontSize: 15
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      maxFontSize: 15,
                      minFontSize: 9,
                    ),
                  ));
            }
          else{
            return Card(
                margin: EdgeInsets.only(left: 20,right: 20,top: 20),
                child: ListTile(
                  leading:
                  Icon(widget.icon, color: QamaiGreen, size: 20.0),
                  title: AutoSizeText(
                    'LOADING...',
                    style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontWeight: FontWeight.w600,
                        color: QamaiThemeColor,
                        fontSize: 15
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    maxFontSize: 15,
                    minFontSize: 9,
                  ),
                ));
          }

        });
  }
}

最后的更改是添加条件检查快照是否有数据。也将特定文档字段保存在最终变量中对我而言很有帮助

final title=userDocument[widget.text];

最后，添加了else条件来模拟显示显示加载文本的同一卡界面。您可以使用CirculorIndicator，如果您希望它也对我有用，这对于界面来说看起来更加自然。

在使用StreamBuilder从Firebase加载数据之前，Flutter会显示一个红色错误屏幕，该如何解决？

微信关注