Flutter Dart - LateInitializationError：字段“playerSnapshot”尚未初始化

Question

我正在創建一個博客應用程序，但我不明白為什么我的代碼會產生以下錯誤：

LateInitializationError ：字段“playerSnapshot”尚未初始化。

見附圖。

我試過添加一個？ 在遲到的 QuerySnapshot 之后？ 播放器快照； 但我仍然收到錯誤。

我當前的代碼是：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_blog_application/services/crud.dart';
import 'package:flutter_blog_application/views/create_blog.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  CrudMethods crudMethods = new CrudMethods();

  late QuerySnapshot playerSnapshot;


  Widget TransferList(){
    return Container(
      child: Column(
        children: <Widget>[
          playerSnapshot != null
              ? ListView.builder(
              itemCount: playerSnapshot.documents.length,
              itemBuilder: (context, index){
                return PlayerDisplay(
                  playerName: playerSnapshot.documents[index].data['playerName'],
                  fromClub: playerSnapshot.documents[index].data['fromClub'],
                  toClub: playerSnapshot.documents[index].data['toClub'],
                  rumourDesc: playerSnapshot.documents[index].data['rumourDesc'],
                  imgUrl: playerSnapshot.documents[index].data['imgUrl'],
                );
              }) : Container(
                alignment: Alignment.center,
                child: CircularProgressIndicator(),)
          ],
      ),
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    crudMethods.fetchData().then((result){
      playerSnapshot = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Row(
          children: const <Widget>[
          Text(
            "Transfer",
            style: TextStyle(fontSize: 22,  color: Colors.orangeAccent)
          ),
            Text("Blog",
              style: TextStyle(fontSize: 22, color: Colors.black),
            )
        ],
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: TransferList(),
      floatingActionButton: Container(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => CreateBlog()));
            },
            backgroundColor: Colors.orangeAccent,
            child: const Icon(Icons.add),
          )
        ],),
      ),
    );
  }
}

class PlayerDisplay extends StatelessWidget {

  late String imgUrl, playerName, fromClub, toClub, rumourDesc;
  PlayerDisplay({required String imgUrl,
    required String playerName,
    required String fromClub,
    required String toClub,
    required String rumourDesc});


  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Stack(children: <Widget>[
        ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(imgUrl)),
        Container(
          height: 150,
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
            borderRadius: BorderRadius.circular(10)),
        ),
        Container(child: Column(children: <Widget>[
          Text(playerName),
          Text(fromClub),
          Text(toClub),
          Text(rumourDesc)
        ],),)
      ],),
    );
  }
}

任何幫助是極大的贊賞！

Answer 1

與其使用late ，不如讓它可以為空

QuerySnapshot? playerSnapshot;

並調用 setState

  crudMethods.fetchData().then((result) {
      playerSnapshot = result;
      setState(() {});
    });

使用late的 promise 該值將在讀取時間之前分配，它不會使其可以為空。

另外，關於閱讀 querySnapshot 的另一件事。 喜歡做，

playerName:
  "${playerSnapshot?.docs[index].get('playerName')}",
 imgUrl: playerSnapshot!.docs[index].get('imgUrl'),

使 nullable 更容易在運行時處理 null 數據。

  String? imgUrl, playerName, fromClub, toClub, rumourDesc;

對於圖像

if (imgUrl != null)
  ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Image.network(imgUrl!)),

而對於其他人的文字，你可以做

 Text(playerName?? "Null"),

您可以找到更多關於零安全性的信息