Flutter FutureBuilder gets constantly called
Use AsyncMemoizer A class for running an asynchronous function exactly once and caching its result.
AsyncMemoizer _memoizer;
@override
void initState() {
super.initState();
_memoizer = AsyncMemoizer();
}
@override
Widget build(BuildContext context) {
if (someBooleanFlag) {
return Text('Hello World');
} else {
return FutureBuilder(
future: _fetchData(),
builder: (ctx, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.toString());
}
return CircularProgressIndicator();
},
);
}
}
_fetchData() async {
return this._memoizer.runOnce(() async {
await Future.delayed(Duration(seconds: 2));
return 'DATA';
});
}
Future Method:
_fetchData() async {
return this._memoizer.runOnce(() async {
await Future.delayed(Duration(seconds: 2));
return 'REMOTE DATA';
});
}
This memoizer
does exactly what we want! It takes an asynchronous function, calls it the first time it is called and caches its result. For all subsequent calls to the function, the memoizer
returns the same previously calculated future.
Detail Explanation:
https://medium.com/flutterworld/why-future-builder-called-multiple-times-9efeeaf38ba2
Even if your code is working in the first place, you are not doing it correctly. As stated in the official documentation of FutureBuilder,
The
future
must be obtained earlier, because if thefuture
is created at the same time as the FutureBuilder, then every time theFutureBuilder
's parent is rebuilt, the asynchronous task will be restarted.
Following are the correct ways of doing it. Use either of them:
Lazily initializing your
Future
.// Create a late instance variable and assign your `Future` to it. late final Future? myFuture = getFuture(); @override Widget build(BuildContext context) { return FutureBuilder( future: myFuture, // Use that variable here. builder: (context, snapshot) {...}, ); }
Initializing your
Future
ininitState
:// Create an instance variable. late final Future? myFuture; @override void initState() { super.initState(); // Assign that variable your Future. myFuture = getFuture(); } @override Widget build(BuildContext context) { return FutureBuilder( future: myFuture, // Use that variable here. builder: (context, snapshot) {}, ); }