从 Firestore 获取文档时如何显示循环进度指示器

Question

这是我尝试从 Firestore 中的单个文档中读取数据的方式。

final CollectionReference myCollection =
  FirebaseFirestore.instance.collection('collection');
//
Future getScore(String level) async {
  var document = await myCollection.doc(uid).get();
  for (int i = 0; i < document.data().length; i++) {
    print(document.data().keys.elementAt(i));
    print(document.data().values.elementAt(i));
  }
}

我在按下这样的按钮时调用此代码：

Expanded(
    flex: 1,
    child: Container(
      alignment: Alignment.centerLeft,
      child: ElevatedButton(
        onPressed: () {
          //////////////////////////////////////////////////////////////////////
          // This is where I call the getScore function in database dart file //
          //////////////////////////////////////////////////////////////////////
          DatabaseService(uid: globals.uid).getScore(
          'level11',
          );
          /////////////////////////////////////////////////////////////////////////////////////////////////
          // I would like the circular indicator until data is fetched and before the new view is pushed //
          /////////////////////////////////////////////////////////////////////////////////////////////////
          Navigator.push(
              context,
              CupertinoPageRoute(
                  builder: (context) => GameHome()));
        },
        child: Text(
          'Play',
          style: Theme.of(context).textTheme.headline2,
        ),
        style: OutlinedButton.styleFrom(
          shape: StadiumBorder(),
          padding: EdgeInsets.symmetric(
              horizontal: 5.25 * SizeConfig.textMultiplier,
              vertical: 1.125 * SizeConfig.textMultiplier),
          side: BorderSide(width: 1, color: Colors.black26),
          backgroundColor: Colors.black,
        ),
      ),
    ),
  ),

我想知道如何在获取数据并执行视图切换代码之前显示循环进度指示器。

感谢您的任何指示。

Answer 1

使您的 Widget 成为StatefullWidget并将 boolean 值isLoading设置为false 。 确保您的 DatabaseService 是异步的并等待它。 如果isLoading的值为 true，则显示 CircularProgressIndicator。

这是一个基本示例：

import 'package:flutter/material.dart';

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  bool isLoading = false;

  Future getScore() async {
    setState(() {
      isLoading = true;
    });
    //////////////////////////////////////////////////////////////////////
    // This is where I call the getScore function in database dart file //
    //////////////////////////////////////////////////////////////////////
    await DatabaseService(uid: globals.uid).getScore(
      'level11',
    );
    /////////////////////////////////////////////////////////////////////////////////////////////////
    // I would like the circular indicator until data is fetched and before the new view is pushed //
    /////////////////////////////////////////////////////////////////////////////////////////////////

    setState(() {
      isLoading = false;
    });

    Navigator.push(
        context, CupertinoPageRoute(builder: (context) => GameHome()));
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        alignment: Alignment.centerLeft,
        child: Column(
          children: [
            ElevatedButton(
              onPressed: getScore,
              child: Text(
                'Play',
                style: Theme.of(context).textTheme.headline2,
              ),
              style: OutlinedButton.styleFrom(
                shape: StadiumBorder(),
                padding: EdgeInsets.symmetric(
                    horizontal: 5.25 * SizeConfig.textMultiplier,
                    vertical: 1.125 * SizeConfig.textMultiplier),
                side: BorderSide(width: 1, color: Colors.black26),
                backgroundColor: Colors.black,
              ),
            ),
            Visibility(visible: isLoading, child: CircularProgressIndicator())
          ],
        ),
      ),
    );
  }
}

Answer 2

使您的 Widget 成为StatefullWidget并将 boolean 值isLoading设置为false 。 确保您的 DatabaseService 是异步的并等待它。 如果isLoading的值为 true，则显示 CircularProgressIndicator。 编辑：您不需要 setState(){isLoading=false} 因为一旦您推送到新屏幕 state 将被更新。 从而避免每次都构建屏幕这是一个基本示例：

import 'package:flutter/material.dart';

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  bool isLoading = false;

  Future getScore() async {
    setState(() {
      isLoading = true;
    });
    //////////////////////////////////////////////////////////////////////
    // This is where I call the getScore function in database dart file //
    //////////////////////////////////////////////////////////////////////
    await DatabaseService(uid: globals.uid).getScore(
      'level11',
    );
    /////////////////////////////////////////////////////////////////////////////////////////////////
    // I would like the circular indicator until data is fetched and before the new view is pushed //
    /////////////////////////////////////////////////////////////////////////////////////////////////

 

    Navigator.push(
        context, CupertinoPageRoute(builder: (context) => GameHome()));
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        alignment: Alignment.centerLeft,
        child: Column(
          children: [
            ElevatedButton(
              onPressed: getScore,
              child: Text(
                'Play',
                style: Theme.of(context).textTheme.headline2,
              ),
              style: OutlinedButton.styleFrom(
                shape: StadiumBorder(),
                padding: EdgeInsets.symmetric(
                    horizontal: 5.25 * SizeConfig.textMultiplier,
                    vertical: 1.125 * SizeConfig.textMultiplier),
                side: BorderSide(width: 1, color: Colors.black26),
                backgroundColor: Colors.black,
              ),
            ),
            Visibility(visible: isLoading, child: CircularProgressIndicator())
          ],
        ),
      ),
    );
  }
}