显示加载屏幕，直到 firestore 返回一些数据抖动

Question

我有这个代码可以从 firestore 检索数据

    Stream<QuerySnapshot> collectionStream({
    required String path,
    QueryBuilder? queryBuilder,
  }) {
    return _streamErrorHandler(
      () {
        Query<Map<String, dynamic>> reference =
            firebaseFirestore.collection(path);
        if (queryBuilder != null) {
          reference = queryBuilder(reference);
        }
        return reference.snapshots();
      },
    );
  }

稍加修改就可以正常工作。我使用 Riverpod 来监听数据流

final myDataAsync = ref.watch(myDataProvider);
...
myDataAsync.when(
      data: (data) => DataScreen(),
      error: (e, st) => Padding(
        padding: const EdgeInsets.all(Sizes.ten),
        child: Text("Error"),
      ),
      loading: () => const DataPlaceHolder(),

有时我会收到此警告：

无法访问 Cloud Firestore 后端。后端10秒内没有响应。这通常表明您的设备目前没有健康的互联网连接。

Android模拟器和真实设备都会发生这种情况 基本上我不再处于

loading

状态，而是

data

状态，并且由于我没有从 firestore 获取任何数据，但我得到了一个白屏，从用户角度来看，这感觉不太好。 我想仍然显示加载屏幕，直到数据可用，但我不知道如何检查。

Answer 1

使用

FutureBuilder

和

snapshot.hasData

检查您的应用是否已从 firestore 加载数据

FutureBuilder(
future: collectionStream(),
builder: (context,snapshot){
if(snapshot.hasData){
return Text('Your Data') //Any Widget o display your data
}else{
return const Center(
    child: CircularProgressIndicator(color: Color(0xFF00BFFF)),
  );
}
}