我如何添加一个加载圆形图标，因为它需要时间从 firestore 获取数据？

Question

I want to show a loading button until it loads all the list items from firestore.

return StreamBuilder(
         
        stream: Firestore.instance.collection(uid).snapshots(),
        
        builder: (context, snapshot) {
          if (snapshot.hasData) {
          
          return ListView.builder(
            itemBuilder: (ctx, index) {
              return FavItem(
                uid: snapshot.data.documents[index]['uid'],
                id: snapshot.data.documents[index]['id'],
         , 
                
                
              );
            },
            itemCount: snapshot.data.documents.length,

Answer 1

试试这个：

builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        }
        return ListView.builder(itemBuilder: (ctx, index) {
          return FavItem(
            uid: snapshot.data.documents[index]['uid'],
            id: snapshot.data.documents[index]['id'],
          );
        });
      }

如果还没有数据，这应该显示一个循环加载微调器（可自定义），否则它将显示 FavItem 列表。

Answer 2

CircularProgressIndicator 可能就是您要找的东西。

StreamBuilder(
      stream: Firestore.instance.collection(uid).snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ...;
        }
        if (snapshot.hasError) {
          return Text(snapshot.error.toString());
        }
        return CircularProgressIndicator();
      },
    );

Answer 3

声明布尔变量

bool loading = false;

当api函数启动时，setState,

bool loading = true;

api函数结束，setState，

bool loading = false;

内部小部件，检查是否

!loading ? Your widget : Center(
 Child:CirculatProgressIndicator();
  )

我如何添加一个加载圆形图标，因为它需要时间从 firestore 获取数据？

how do i add a loading circular icon as it takes time to fetch data from firestore?

firebase

flutter

dart

google-cloud-firestore

stream-builder