flutter：由future builder引起的紅屏

Question

我的 flutter-firebase 應用程序首先檢查用戶的 state。 如果用戶是專業人士，則會顯示mypagepro屏幕，否則會顯示mypage 。 這是我的代碼。

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: FirebaseFirestore.instance
          .collection('crews')
          .doc(user.uid)
          .get(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.data['isPro'] == true) {
          return MyPagePro();
        } else {
          return MyPage();
        }
      });
    }
  }
}

問題是檢查用戶的 state 需要很長時間才能顯示紅色屏幕，然后才最終顯示mypage或mypagepro屏幕。

我想顯示mypage或mypagepro屏幕而不顯示任何像這樣的紅色屏幕。 檢查用戶的 state 時如何避免出現此紅屏？

Answer 1

您應該檢查snapshot是否有數據。

嘗試這個：

@override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: FirebaseFirestore.instance
          .collection('crews')
          .doc(user.uid)
          .get(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.hasData && snapshot.data['isPro'] == true) {
          return MyPagePro();
        } else {
          return MyPage();
        }
      });
    }
  }
}

Answer 2

您正在嘗試訪問尚未收到的數據的屬性。 嘗試使用以下代碼。

    @override
Widget build(BuildContext context) {
  return FutureBuilder(
      future: FirebaseFirestore.instance
          .collection('crews')
          .doc(user.uid)
          .get(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        if (snapshot.hasData && snapshot.data["isPro"]) {
          return myPagePro();
        } else {
          return MyPage();
        }
      });
    }
  }
}

Answer 3

需要驗證使用

快照.hasData？ 我的頁面Pro（）：我的頁面（）

   @override
    Widget build(BuildContext context) {
      return FutureBuilder(
          future: FirebaseFirestore.instance
              .collection('crews')
              .doc(user.uid)
              .get(),
          builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) =>
            snapshot.hasData ?  myPagePro() : MyPage()
          );
        }
      }
    }