How to cache Future in FutureBuilder's Future.wait function to not rebuild everytime state changes

Question

I want to use multiple Futures so I implemented Future.wait functionality in FutureBuilder.

But it keeps rebuilding whenever page state changes. How can I cache futures in Future.wait ?

Here is the code:

GetBuilder<OrdersMainController>(builder: (controller) {
            return FutureBuilder(
                future: Future.wait([controller.ordersFuture.value]),// lets me use multiple futures
                builder: (context, snapshot) {
                  switch (snapshot.connectionState) {
                    case ConnectionState.active:
                    case ConnectionState.waiting:
                    case ConnectionState.done:
                      if (snapshot.hasError) {
                        return SizedBox(
                            width: double.infinity,
                            height: 600,
                            child: Center(
                                child: Text(snapshot.error.toString(),
                                    style:
                                        Theme.of(context).textTheme.caption!)));
                      }
                      controller.ordersData.value = (snapshot.data! as List)[0];
                      final DataTableSource _data =
                          OrdersMainSource(controller.ordersData.value.data!);
                      return ...
                    default:
                      return ...;
                  }
                });
          })

check `AsyncMemoizer` - the official docs say: *"A class for running an asynchronous function exactly once and caching its result."* — pskink, Sep 14 '21 at 08:07
Try to put `id` Inside GetBuilder that you can specify `id:"someText"` and same text given in `update(["someText"])` will trigger the rebuilding. if `update()` without id its not going to rebuild. — Arul, Sep 14 '21 at 08:14

score 2 · Accepted Answer · answered Sep 14 '21 at 08:15

Instead of calling your Future.wait() on every build use a StatefulWidget and cache the computation inside its state(Note that the state object survives rebuilds).

class _MyWidgetState extends State<MyWidget> {
late final lotsOfData=Future.wait([controller.ordersFuture.value])
 @override
  Widget build(BuildContext context) {
.....
 return FutureBuilder(
                future: lotsOfData,

By declaringlotsOfData as a late final variable inside the State object you are actually caching it. And by declaring it late you don't start the Futures eagerly but on first access.

How to cache Future in FutureBuilder's Future.wait function to not rebuild everytime state changes

1 Answers1