從 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())
          ],
        ),
      ),
    );
  }
}