flutter - 在flutter中从Firebase实时数据库检索数据时，有什么方法可以显示加载小部件的方法

Question

这是用于将数据从Firebase实时数据库加载到列表的代码片段:

var CategoryName =  FirebaseDatabase.instance.reference().child('CategoryNames').once()
        .then((DataSnapshot dataSnapshot){
      var key  = dataSnapshot.value.keys;
      for(var i in key)
      {
        // print(dataSnapshot.value[i]['Name']);
        CategoriesOnly categoriesOnly = new CategoriesOnly(
            dataSnapshot.value[i]['Name']
        );
        categoriesOnlyList.add(categoriesOnly);
      }
      setState(() {
        print(categoryItemList.length);
      });

    });

我将这些数据存储到列表中，并将其显示到ListView.builder中。
我想在数据完全加载后显示该屏幕，同时它显示某种加载小部件或加载屏幕，但在我的情况下，该屏幕看起来空白，并在一段时间后显示数据。如果互联网连接速度缓慢，则空白屏幕会显示一分钟并加载(因为我的数据也包含图像)。我也想如果加载时间超过某个特定时间，它将显示尝试重新加载或互联网连接错误。请帮忙。

Answer 1

正如其他人已经说过的那样，我认为最好的解决方案是这样的FutureBuilder:

FutureBuilder(
            future: //your future you want the data from,
            builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text("None");
                case ConnectionState.active:
                  return Text("active");
                case ConnectionState.waiting:  /while you are waiting for the data...
                return CupertinoActivityIndicator(); //thats the typical apple loading
                return CircularProgressIndicator(); // this would be a blue circle
                case ConnectionState.done:
                  //you have the data and can access it with 'snapshot.data'
              }
        }),