how to return single circular Indicator for 2 futurebuilder for the same screen in flutter?

Question

I have a widget like this,

import 'package:flutter/material.dart';
class TestWidget extends StatelessWidget {
  const TestWidget({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // for first data👇
          FutureBuilder(
          future: firstMethod(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            return Text(firstData);
          },
        ),
         // for second data👇
        FutureBuilder(
          future: secondMethod(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            return Text(SecondData);
          },
        ),
        ],
      ),
    );
  }
}

Now what I want is I want to show only one CircularProgessIndicator in the entire screen till both the future builder has some data.

What might be the best way to do that?

Answer 1

You can use one future builder and wait for both method completion

body : FutureBuilder(
      future: _loadData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if(snapshot.connectionState == ConnectionState.done){
          return Column(
            children: [
              Text(firstData),
              Text(SecondData)
            ],
          );
        }
        return yourLoadingProgressWidget;
      },
    )

And _loadData will be as

_loadData()async{
    await firstMethod();
    await secondMethod();
  }//wait for both function to be completed