加载程序卡在 FutureBuilder答案

【问题标题】：Stuck Loader in FutureBuilder加载程序卡在 FutureBuilder
【发布时间】：2021-04-15 21:01:46
【问题描述】：

总的来说，我是 Flutter 和 Dart 的新手，我正在尝试在页面加载期间进行扩展计算，但是当我尝试执行以下操作时加载器卡住了：

body: Center(
child:FutureBuilder(
    future:   _lorem()
    builder:  (context, snapshot) {
      if (snapshot.connectionState != ConnectionState.done){
        print("loader");
        return Center(
            child: CircularProgressIndicator(
                backgroundColor:  Theme.of(context).primaryColor)
        );
      }

[...]

       Future<void> _lorem() async {
//there is not a request to service, there is a more than one filter on map and some lists. I set the for loop for example of a local computation
      return Future(() {
        for (int i = 0; i < 50000; i++){
          print(i);
        }
      }
      );
    }

【问题讨论】：

你能告诉我你为什么在 Future 中使用循环吗？
你能给我们你的 Future Builder 小部件的全部内容吗？
@AmonChowdhury 该视图是带有一些图表的摘要，我想在 Future 中插入计算以在其中显示加载器，但如果有不同的方法来获得该结果，我会整合

标签： android flutter dart asynchronous mobile

【解决方案1】：

我认为实现这一点的更简单方法是在您的小部件中使用Completer 类型的字段，例如Completer calc。你可以在你的小部件初始化中开始你昂贵的计算（永远不要在你的构建函数中），当计算完成时，你可以通过调用calc.complete()completeCompleter。

然后，在您的小部件的 FutureBuilder 中，您应该通过包含 future: calc.future 而不是您的 future: _lorem() 来收听 calc 的未来。

有关此 UI 范例的示例，请参阅 FutureBuilder。

【讨论】：

不幸的是，Completer 与不同数组上的逻辑的集成也会阻塞主图形线程

【解决方案2】：

用未来和计算解决。

详细说明：

Future<List<CustomObject>> _retrieveCustomObjects() async {
  SourceData data = SourceData(CustomSourceData());
  return compute(getFilteredClients, data);
}

List<CustomObject> computeCustomObject(SourceData data) {
  List<CustomObject> list = [];
  // expensive logic on data, not only network call
  return list;
}

class LoremIpsumClass { 

// use where you need `List<CustomObject> value = await _retrieveFilteredClient();`
}

【讨论】：

您能详细说明您是如何解决的吗？您在futureBuilder 中的future 字段中使用了哪个函数？