如何 return 2 个 futurebuilder 的单个圆形指示器用于 flutter 中的同一屏幕？

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我创造的

如何 return 2 个 futurebuilder 的单个圆形指示器用于 flutter 中的同一屏幕？

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

flutter

asynchronous

flutter-futurebuilder