Flutter HomePage 太多小部件有时会构建并创建 http 错误答案

【问题标题】：Flutter HomePage too many widgets getting build and creating http error sometimesFlutter HomePage 太多小部件有时会构建并创建 http 错误
【发布时间】：2020-06-26 12:50:54
【问题描述】：

我正在 Flutter 中创建电子商务应用，并制作了多个小部件以显示在主页上。问题是，由于在打开应用程序时大约有 5-8 个 idgets 被构建，我遇到的问题是在打开应用程序时发送了太多服务器请求，因为每个小部件都是基于单独的 json 数据构建的。这也需要几秒钟的时间才能在应用上显示数据。

有没有一种方法可以更快地加载所有小部件并避免过多的 http 请求，因为有时当发送过多的 http 请求时，我会在后端收到 http 错误。

我的主屏幕

SingleChildScrollView(
        child: Column(
          children: <Widget>[
            CarouselSliderList(),
            Banner1Slot(),
            TopCategoriesList(),
            HotProducts(),
            TopCategoriesList(),
          ],
        ),
      ),

我正在使用下面的方法来调用 API 请求。由于有很多小部件，屏幕上会显示多个 CircularProgressIndicator()，我只想要所有小部件的 1 个 ProgressIndicator。

Future<List<CarouselSlider>> getCarouselSlider(http.Client client) async {
  final response = await client.get('https://androidapp.factory2homes.com/api/carouselslider');
  return compute(parseCarouselSlider, response.body);
}


List<CarouselSlider> parseCarouselSlider(String responseBody) {
  final parsed = jsonDecode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<CarouselSlider>((json) => CarouselSlider.fromJson(json)).toList();
}

class CarouselSliderList extends StatefulWidget {
  @override
  _TopCategoriesListState createState() => _TopCategoriesListState();
}

class _TopCategoriesListState extends State<CarouselSliderList> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<CarouselSlider>>(
      future: getCarouselSlider(http.Client()),
      builder: (context, snapshot) {
        if (snapshot.hasError) print(snapshot.error);
        return snapshot.hasData
            ? CarouselSliderBanner(
                carouselSlider: snapshot.data,
              )
            : Center(
                child: CircularProgressIndicator(
                  backgroundColor: Colors.black26,
                ),
              );
      },
    );
  }
}

【问题讨论】：

你能分享错误信息吗？另外，您如何在 initState 中调用这些 http 请求？如果您可以展示您的子组件的一小部分，也会有所帮助。
只有在应用启动的时候才能一次性获取所有数据？
我用调用http请求的方法编辑了代码

标签： flutter

【解决方案1】：

我建议有一个存储库，其方法使用 Future.wait([]) 并运行 Futures 列表，您可以在其中将它们全部获取到一个结果中，然后通过将数据传递给它们来使用它们来构建您的小部件

【讨论】：