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

Issue

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?

Solution

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

Answered By – Faiizii Awan

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)