Flutter 在使用 StreamBuilder 從 firebase 加載數據之前顯示紅色錯誤屏幕，如何解決？

Question

我從 firebase 獲取數據並使用該數據制作卡片。 從數據庫顯示用戶的某些數據，數據加載正常，但 1 秒或更長時間出現紅色錯誤屏幕。 我想要這個 go 離開我會告訴你我的代碼。 有人可以幫我看看出了什么問題。 我不知道發生這種情況我做錯了什么，我得到了錯誤

在 null 上調用了 getter 'uid'。 接收方：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,
                ),
              ));
        });
  }


} 

Answer 1

所以在嘗試了一些東西之后，我終於修復了這個錯誤。 決定發布答案，因為這個問題在網上沒有任何解決方案。 至少我找不到一個。 希望這可以幫助有同樣問題的人

我首先做的是聲明一個包含 user.uid 值的字符串

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

現在在卡片生成器小部件中，我擺脫了額外的東西，並在 init state 中簡單地調用了 _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，這也對我有用，這對於界面來說看起來更自然。

Answer 2

您可以在加載數據時顯示進度指示器，如下所示

return StreamBuilder(
    stream: Firestore.instance.collection(UserInformation).document(user.uid).snapshots(),
    builder: (context, snapshot) {
    //==========show progress============
     if (!snapshot.hasData) {
        return CircularProgressIndicator()            
      }
      var userDocument = snapshot.data;
      // User userDocument here ..........

Answer 3

在 main.dart 中試試這個：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Answer 4

當設備沒有正確的互聯網連接或設備離線時，會顯示 flutter 紅色錯誤屏幕。

您可以嘗試使用 CircularProgressIndicator 作為來自 API 的數據加載。

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

}

確保初始化 _getUser 方法。

  @override
  void initState() {
    getUser();
    super.initState();

}

您現在可以構建您的小部件。

userid == null ? CircularProgressIndicator() : yourWidget(),