如何在从 Firestore 获取数据时显示加载微调器答案

【问题标题】：How to display a loading spinner while getting data from firestore如何在从 Firestore 获取数据时显示加载微调器
【发布时间】：2020-01-23 21:47:23
【问题描述】：

我是新来的颤振。以下是我从名为posts的firestore集合中获取数据的代码。第一次加载应用程序时的问题是加载数据需要几秒钟，直到它显示一个空白屏幕。它只发生在第一次。那么如何显示加载微调器或用户的东西，直到数据被加载？（并不是说这不是全部代码）

class ForumHome extends StatefulWidget {
  @override
  _ForumHomeState createState() => _ForumHomeState();
}

dbMethods dbcrud = new dbMethods();

class _ForumHomeState extends State<ForumHome> {
  String title, content;
  //Subscribing for post details
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> snapshot;
  CollectionReference collectionReference =
      Firestore.instance.collection("posts");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        snapshot = datasnapshot.documents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {

    int num = snapshot?.length ?? 0;
    return Scaffold(
      appBar: AppBar(title: Text('Idea Forum '), backgroundColor: Colors.pink),
      body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});

【问题讨论】：

标签： android firebase flutter dart google-cloud-firestore

【解决方案1】：

您需要评估连接的状态。

body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          if (snapshot.connectionState == ConnectionState.waiting)
          return CircularProgressIndicator();
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});

【讨论】：

感谢您的快速回复。但无法使用您的解决方案。它说 getter 'loading' 没有为类 'ConnectionState' 定义。尝试导入定义“加载”的库，将名称更正为现有 getter 的名称，或定义名为“加载”的 getter 或字段
对不起，我的错误，等待未加载。

【解决方案2】：

我建议为circularProgress创建一个控制器，如示例：

class _testProgressState extends State<testProgress> {

bool _progressController = true;


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

  subscription = collectionReference.snapshots().listen((datasnapshot) {
    setState(() {
      snapshot = datasnapshot.documents;
      _progressController = false;
    });
  });

}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _progressController
        ? CircularProgressIndicator()
        : ListView.builder(
            itemCount: 3,
            itemBuilder: (context, index) {
              return Card();
            }),
  );
}
}

所以每当你发现需要调用某个函数来收集数据时，只需 setState 设置 _controllerProgress 为 true，当数据到达时返回 false！

【讨论】：

【解决方案3】：

你需要创建一个未来的小部件，

 FutureBuilder(
        future: YOUR_ASYNC_TASK_HERE,
        builder: (context, AsyncSnapshot<YOUR_RETURN_TYPE_FROM_ASYNC> snapshot) {
          return (snapshot.connectionState == ConnectionState.done)?HomePage():_buildWaitingScreen();
        },
      ),

对于您可以使用的 _buildWaitingScreen

Widget _buildWaitingScreen() {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      ),
    );
  }

【讨论】：

【解决方案4】：

您可以检查快照是否有数据，并且在其加载时显示加载器。我也已将您的列表视图提取到单独的小部件

Widget _numcard(){
     if (snapshot != null) {
       ListView.builder(
            itemCount: num,
            itemBuilder: (context, index) {
              return new Card(
                elevation: 15.0,
                margin: EdgeInsets.all(10.0),
                child: new ListTile(
                    onTap: () {
                      //For udating the view count
                      snapshot[index]
                          .reference
                          .updateData({'Views': snapshot[index].data['Views'] + 1});
                    })});
          }else {return Container(
            child:CircularProgressIndicator());}}

【讨论】：