I'm experiencing interesting behavior. I have a FutureBuilder in Stateful widget. If I return FutureBuilder alone, everything is ok. My API gets called only once.
However, if I put extra logic, and make a choice between two widgets - I can see in chrome my API gets called tens of times. I know that build
method executes at any time, but how does that extra logic completely breaks Future's behavior?
Here is example of api calling once.
@override
Widget build(BuildContext context) {
return FutureBuilder(..);
}
Here is example of api being called multiple times if someBooleanFlag
is false
.
@override
Widget build(BuildContext context) {
if(someBooleanFlag){
return Text('Hello World');
}
else{
return FutureBuilder(..);
}
Thanks
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
in initState
:
// 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) {},
);
}