如何在 flutter 中為同一屏幕返回 2 個 futurebuilder 的單個圓形指示器？

Question

我有一個這樣的小部件，

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

現在我想要的是我想在整個屏幕上只顯示一個CircularProgessIndicator直到未來的構建器都有一些數據。

最好的方法是什么？

Answer 1

您可以使用一個未來的構建器並等待兩種方法完成

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

_loadData將是

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

Answer 2

您可以使用Future.wait它將等待多個期貨完成。

看看我創建的這個DartPad 。