Flutter : How to show Progress indicator until the data is fetched from the server

Question

I want to show a progress indicator until the required data is fetched from the server. Currently what I am doing is made a function getQuotes() that will fetch the data into a variable using setState(). And the Used the FutureBuilder where its future parameter is set to getQuotes(). But this approach gives me a non-ending CircularProgressIndicator. I don't why it is happening. Is ther any problem with the combination of FutureBuilder() and setState() ? Can Some one help ?

Here is my code,

Map<String, dynamic> userInfo = {};

  Future<void> getQoutes() async {
    var data = await FirebaseFirestore.instance.collection('user').doc(auth.currentUser!.uid).get();
    setState(() {
      userInfo = data.data() as Map<String, dynamic>;
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Some Quotes',
        ),
        backgroundColor: Colors.deepOrange,
      ),
      body: FutureBuilder (
        future: getQoutes(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.done:
              if (snapshot.hasError) {
                return Text('Error : ${snapshot.error}');
              }
              return SingleChildScrollView(
                child: Container(
                height: MediaQuery.of(context).size.height,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Expanded(
                        child: ListView.builder(
                          itemCount: 3,
                          scrollDirection: Axis.vertical,
                          itemBuilder: (context, index) {
                          return Card_fun(userInfo['quotes'][index]);
                          }
                        )
                      )
                    ],
                  ),
                )
              );
            default:
              return const CircularProgressIndicator();
          }
        }
      ),
    );
  }

Answer 1

Another solution would be to make your getQuotes() function returning a Future<String> instead of a Future<void> and then access the data via the snapshot instead of accessing the state.

The Flutter docs of the FutureBuilder Flutter Docs are also doing it that way in the demo. As long as you don't need the state of userInfo in other places this should be an acceptable solution and you could also remove userInfo as variable. If you want to maintain or manipulate it later you could try to put the setState({}) statement in the ConnectionState.done switch case within an if(snapshot.hasData){} block.