1

My flutter app is showing a splash screen (statefulWidget) as a first route. This route is showing an animation while, on the background, calling an API to get some data.

Once the data has been received and the animation is complete, it navigates to the second route.

All works fine, except that, when calling the Navigator to navigate to the second route, the second route is shown, but i can see again the response from the API on the first route, that is being called.

It turns out that, when the second route is built, the build method of the previous route is called too, making an unnecessary API call again.

How to avoid this behaviour?, I believe this must be a bug on Flutter??

current flow (non-desired): SplashRoute(build) ---> Navigator ---> HomeRoute(build)+SplashRoute(build)

desired flow: SplashRoute(build) ---> Navigator ---> HomeRoute(build)

codeKiller
  • 5,493
  • 17
  • 60
  • 115
  • 1
    I have a question... animation would make build method to be called for almost every frame. And you are calling your api's in the build function? wouldn't it make thousands of api's call in just that duration of animation?? – Sahdeep Singh Nov 13 '19 at 08:21
  • no, I am using other kind of animations, not that kind of animation you are thinking about – codeKiller Nov 13 '19 at 08:49

1 Answers1

7

What you are trying to do is to work against the framework. It's a futile effort. Instead, you should work with the framework. Here is why and how:

Build methods should not make API requests. Build methods should use fields of your state class to generate a UI without any side effects.

Please move your API calls to the initState method, save their results in fields of your state class with setState and get the build method to use them without generating any side effects.

Gazihan Alankus
  • 11,256
  • 7
  • 46
  • 57
  • that is a very good suggestion, thanks, it solves the double-API call stuff, however the issue about unnecessarily calling the previous route build is still there. – codeKiller Nov 13 '19 at 08:51
  • 3
    I don't think Flutter makes any guarantees about how many times it will call the build function. They actually tell us to be ready for it to be called many times for various reasons. I wouldn't worry about it. Here's more information about this specific situation: https://github.com/flutter/flutter/issues/11655 – Gazihan Alankus Nov 13 '19 at 10:57
  • @GazihanAlankus For example I have a streambuilder inside build method and it is mapped with firestore snapshots. It is resulting in unwanted firestore reads even when the route is in background. Where should I use this streambuilder other than in build method itself? – Robert Williams Mar 06 '20 at 08:31
  • `Please move your API calls to the initState method` I am doing exactly the same and still it is making api calls in background. – Robert Williams Mar 06 '20 at 09:34
  • @RobertWilliams that shouldn't happen if you're doing it in `initState` I believe. It's kind of difficult to tell without seeing the details. – Gazihan Alankus Mar 07 '20 at 10:09
  • @GazihanAlankus Actually i have Nested Custom widgets. Like `Home( ... CustomWidget1( ) , CustomWidget2( ) )` the home widget's init is fine but all other nested custom widget's init function being called again and again. – Robert Williams Mar 07 '20 at 10:13
  • That shouldn't happen normally. I would trace up the tree and see which widget is causing those `initState` calls. Normally, even though things are being rebuilt, `initState` is not called. You would have to change the key to prevent Flutter from matching your newly built widget with an old one to force calling `initState`. – Gazihan Alankus Mar 07 '20 at 10:29
  • @GazihanAlankus I was using streambuilder with firestore query to dynamically generating widgets. It was streambuilder causing this issue. – Robert Williams Mar 07 '20 at 17:58