Flutter FutureBuilder() 導致空異常一秒鍾

Question

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _userSnapshot;
    List<dynamic> myContactsList;
    return StreamProvider<DocumentSnapshot>.value(
      value: DatabaseService("").myUser,
      builder: (context, child) => Expanded(
        child: Container(
            child: (_userSnapshot = Provider.of<DocumentSnapshot>(context)) ==
                        null ||
                    (myContactsList = _userSnapshot.data["contacts"]) == null
                ? Padding(
                    // if no contacts were found
                    padding: EdgeInsets.all(10.0),
                    child: Column(
                      children: <Widget>[
                        Text(
                          "No recent chats yet",
                        ),
                      ],
                    ),
                  )
                : ListView.builder(
                    itemCount: _userSnapshot.data["contacts"].length,
                    itemBuilder: (context, index) => FutureBuilder(
                      future: DatabaseService("").getUserById(
                        myContactsList.elementAt(index),
                      ),
                      builder: (context, snapshot) => GestureDetector(
                        onTap: () => Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (_) => ChatScreen(
                              myContactsList.elementAt(index),
                              snapshot.data["displayName"],
                            ),
                          ),
                        ),
                        child: Container(
                          margin: EdgeInsets.only(top: 5, bottom: 5, right: 20),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Row(
                                children: <Widget>[
                                  FutureBuilder(
                                    future: DatabaseService("").getUserById(
                                      myContactsList.elementAt(index),
                                    ),
                                    builder: (context, snapshot) =>
                                        CircleAvatar(
                                      radius: 33,
                                      backgroundImage: snapshot
                                                  .data["imageUrl"] ==
                                              null
                                          ? snapshot.data["isMale"] == true
                                              ? AssetImage(
                                                  "assets/images/male.png")
                                              : AssetImage(
                                                  "assets/images/female.png")
                                          : AssetImage(
                                              "assets/images/male.png"),
                                    ),
                                  ),
                                  SizedBox(width: 10),
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      FutureBuilder<DocumentSnapshot>(
                                        future: DatabaseService("").getUserById(
                                          myContactsList.elementAt(index),
                                        ),
                                        builder: (context, snapshot) => Text(
                                          snapshot.data["displayName"],
                                          style: TextStyle(
                                            color: Colors.grey,
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                      SizedBox(height: 5),
                                      Container(
                                        width:
                                            MediaQuery.of(context).size.width *
                                                0.45,
                                        child: Text(
                                          "Something N. $index ",
                                          style: TextStyle(
                                            color: Colors.blueGrey,
                                            fontSize: 18,
                                            fontWeight: FontWeight.w600,
                                          ),
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Text(
                                    "TIME"
                                  ),
                                  Container(
                                    height: 20,
                                    width: 40,
                                    decoration: BoxDecoration(
                                      color: Theme.of(context).primaryColor,
                                      borderRadius: BorderRadius.circular(30),
                                    ),
                                    alignment: Alignment.center,
                                    child: Text(
                                      "NEW",
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 11,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
          ),
        ),
      ),
    );
  }
}

每次我與我的應用程序交互並在我的雲 Firestore 數據庫中觸發更改時，我都會使用StreamProvider()獲取快照。 當這種情況發生時，我會得到下面列出的一些例外情況，但在半秒后屏幕被修復，我猜可能是新快照的原因（？）。 如下所列，問題來自FutureBuilder()的使用。 這是錯誤：

The following NoSuchMethodError was thrown building FutureBuilder<DocumentSnapshot>(dirty, state: _FutureBuilderState<DocumentSnapshot>#98dd9):
The method '[]' was called on null.
Receiver: null
Tried calling: []("imageUrl")

The relevant error-causing widget was: 
  FutureBuilder<DocumentSnapshot> file:///home/pss/Desktop/android/flutter_firebase_chat_app/lib/widgets/recent_chats.dart:90:35
When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
#1      RecentChats.build.<anonymous closure>.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter_firebase_chat_app/widgets/recent_chats.dart:98:56)
#2      _FutureBuilderState.build (package:flutter/src/widgets/async.dart:740:55)
#3      StatefulElement.build (package:flutter/src/widgets/framework.dart:4663:28)
#4      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4546:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: NoSuchMethodError: The method '[]' was called on null.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The method '[]' was called on null.
Receiver: null
Tried calling: []("displayName")
The relevant error-causing widget was: 
  FutureBuilder<DocumentSnapshot> file:///home/pss/Desktop/android/flutter_firebase_chat_app/lib/widgets/recent_chats.dart:114:39

錯誤在這兩行： backgroundImage: snapshot.data["imageUrl"] == null & builder: (context, snapshot) => Text(snapshot.data["displayName"]

所以我不確定是否誠實。 我認為這是FutureBuilder()沒有它們的原因，我沒有例外。 我是 Flutter 的新手，所以任何建議都將不勝感激！

Answer 1

您正在嘗試調用_userSnapshot.data[]但data為null ，您必須首先確保_userSnapshot不為 null 並且_userSnapshot.data也不為空。
同時，考慮放置一個加載器，您可以使用CircularProgressIndicator作為簡單的開始，或者您可以使用來自 pub.dev 的Shimmer庫來制作一些很酷的占位符加載動畫（如 Facebook）。

Answer 2

您可以將 initialData 參數設置為 StreamProvider，在流尚未發出任何內容時使用此數據。 在訪問其中一個鍵之前，您還應該檢查 _userSnapshot.data != null。