如何保存 FutureProvider 的数据以避免重建答案

【问题标题】：How to save data of FutureProvider to avoid rebuild如何保存 FutureProvider 的数据以避免重建
【发布时间】：2021-09-23 19:20:33
【问题描述】：

我正在使用 FutureProvider 从 Laravel API 获取数据（位置）以显示该数据在颤动中。现在的问题是它一次又一次地重建，甚至服务器开始抛出"too many attempts" 的错误。我正在使用ListView.builder 显示从 API 获取的所有位置，但是当我滚动到下一个位置然后滚动回上一个位置时，它会重建。平均FutureProvider 正在一次又一次地重建。这是附加的代码。我还尝试在 ListView 中添加addAutomaticKeepAlives: true, 以保存状态

Container(
  height: 100,
  child: ListView.builder(
    addAutomaticKeepAlives: true,
    scrollDirection: Axis.horizontal,
    itemCount: places.length,
    itemBuilder: (_, index) {
      return FutureProvider(
        initialData: null,
        
        create: (context) =>
            getFireIceCount(index, places),
        child: Consumer<List<dynamic>>(
          builder: (context, fireIceCount,
              child) {
            return (fireIceCount != null)
                ? (fireIceCount.isNotEmpty)
                    ? PlacesImageViewer()
                    : Center(
                        child:
                            CircularProgressIndicator(
                          color:
                              Colors.cyan,
                        ),
                      )
                : Center(
                    child:
                        CircularProgressIndicator(
                      color: Colors.red,
                    ),
                  );
          },
        ),
      );
    },
  ),
),

【问题讨论】：

标签： flutter dart provider flutter-provider

【解决方案1】：

您需要一个有状态的小部件，因为与之关联的State 对象在重建之间保持不变。第一个建议是从列表视图本身中提取您正在构建的小部件

class SampleItem extends StatefulWidget {
  const SampleItem({Key? key}) : super(key: key);

  @override
  _SampleItemState createState() => _SampleItemState();
}

class _SampleItemState extends State<SampleItem> {
  late final Future<List<dynamic>> items=getFireIceCount(index, places);

  @override
  Widget build(BuildContext context) {
    return BuildYOurItemHere();
  }
}

但最重要的是实际上减少对后端的请求，获取一系列项目而不是一个一个，并尝试实现分页both in your 应用程序和服务器。单枪匹马将减少您访问服务器的时间，并在您发出更少的请求时提高性能。

【讨论】：