Flutter unnecessarily redrawing list item when navigating to a different route ?

[Zhenlei Cai]

Note: the source code of my app can be found at : https://github.com/jerryzhenleicai/flutter_list_redraw_inefficiency , if anybody wants to easily reproduce this issue.

My app's home screen is a list view where each list item contains an image loaded from a web site (image built with the FutureBuilder class). The list item's onTap handler will transit the whole screen to  an item detail view, by navigating to a new route. I found to my surprise that Flutter will try to redraw the list item (and making HTTP calls to load the image) every item I tap the item, and every time I navigate from the detail view back to the list view. 

Ideally no HTTP call should be made if the image stays in the cache all the time. Even if Flutter does not cache the image, I would expect the first HTTP call (the one made when the item is tapped) should never happen, because when the screen goes to a new navigation route the old list view would be completely out of sight and should not be redrawn at all. 

In the debugger I noticed the list item was being redrawn in the onTap handler because Flutter added it to its internal dirty list. But why would a widget from the old navigation route screen need to be redrawn when the whole widget tree is being replaced by a new widget tree that's to be built for the new navigation route?

Here is the console output when running my app in the debugger, the texts in bold are my comments :

Syncing files to device Nexus 6...

I/flutter ( 9472): tab view init State

I/flutter ( 9472): tab view rebuild 

I/flutter ( 9472): tab view rebuild 

I/flutter ( 9472): Building list tile for asset summary null

I/flutter ( 9472): Download image from wikipedia  (this is expected, it's displaying the list item for first time)

I/flutter ( 9472): User tapped a list item, showing its detail

I/flutter ( 9472): Building list tile for asset summary null

I/flutter ( 9472): Download image from wikipedia (Why would the list item be redraw and image download again when the user is destroying the whole list view and going to item detail view?)

I/flutter ( 9472): Building list tile for asset summary null

I/flutter ( 9472): Download image from wikipedia (Here the item is redrawn again when user navigates back to the list view)

[Ian Hickson]

You call getImgBytes from the build() method. You should assume that build() will be called every frame. (It won't be in practice, but that's an optimisation.)

Instead, I recommend caching the image data by having images represented as a stateful widget, which load the image in initState once only. Alternatively, use an Image.network (or some variant of FadeInImage), which take a URL and take care of the caching for you. Or implement the caching in getImgBytes, though that's less optimal.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

--
Ian Hickson

😸