title: How to show Circular progress indicator while fetching document from Firestore
body: <p>Here is how I am trying to read data from a single document in Firestore.</p>
  <pre><code>final CollectionReference myCollection =
    FirebaseFirestore.instance.collection('collection');
  //
  Future getScore(String level) async {
    var document = await myCollection.doc(uid).get();
    for (int i = 0; i &lt; document.data().length; i++) {
      print(document.data().keys.elementAt(i));
      print(document.data().values.elementAt(i));
    }
  }
  </code></pre>
  <p>I call this code on press of a button like this:</p>
  <pre><code>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) =&gt; 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,
          ),
        ),
      ),
    ),
  </code></pre>
  <p>I was wondering how can I show the circular progress indicator until the data is fetched and the view switch code is executed.</p>
  <p>Thanks for any pointers.</p>