Flutter Memory Optimization Series
Almost anything in Flutter is optimized and enhanced by default as you may already know, thanks to the Flutter teams in which they’ve provided us a very useful dev tools that helps us optimize our app more efficiently.. but we’re not gonna be talking about any of these tools and how to use them, instead we’re gonna be talking about how should we write that proper piece of code which deals with memory a little bit more carefully and efficiently.
What this series is all about?
It may look that one single article is enough to cover all of the entire topic but it could be a terrible mess, that’s why I decided to separate this topic into small individual topics and make a series of them.
Currently, this article will discuss the following:
- Loading images with hight resolutions in a ListView
Loading images with hight resolutions in a ListView
This could be the easiest task that can be done in Flutter, and indeed it is.
Loading large amount of images in a ListView could consume lots of the device’s memory (RAM) and it may even crashes the entire app… so, if we take a look at the following code:
Sounds very easy to read.. you can imagine the _images getter as you wish but now, all it can do is returning a bunch of images each time we request new page from the server side (from API for instance).
What’s wrong with this code?
Well, several things depends on what’s exactly would cause an error.. for example: if the images has a very big resolution and the ListView keeps fetching and viewing the images, here it’s absolutely will be a terrible problem!
Why?
Simply, because ListView is by default keeps its children alive for the entire process (scrolling along) and it won’t repaint its children again and to maintain the state as it was before so it can’t be lost while scrolling back (up).
By default, ListView keeps its children in two things:
- first, it keeps the children’s state alive, so it won’t be lost once the user scrolls back.
- second, the children won’t be repainted again, if the user also scrolls back.
In fact, the children are wrapped with two different widgets that do the above job (keeping the state, and not to repaint the children again).
- RepainBoundries (each child is wrapped by default with this widget, which paint the child only once to have higher performance)
- AutomaticKeepAlive (each child is wrapped by default with this widget, which keeps every child’s state alive)
The problem!
Here, ListView plays good role of keeping its children alive with their own states, but by doing this.. the children won’t be disposed or garbage collected when the user scrolls down a bit or the children are not being visible to the screen.. it’s like caching the children into the memory so the ListView can easily fetch them directly from memory.
This entire process with those huge amount of loaded images (an image with big resolution) could definitely consume lots of the memory and it could eventually crashes the app.
So, How can we solve this problem?
For that, The ListView and almost any other scrollable widgets has two different useful boolean properties:
- addAutomaticKeepAlives (true by default)
- addRepaintBoundaries (true by default)
These two properties are by default enabled, so in our case.. we can simply disable them so that the children which are not visible will be disposed and garbage collected automatically.
This could lead to use more GPU and CPU work because of repainting the children and also managing the state, but it could solve our memory issue and you get a very performant view without noticeable issues.
That’s it 😆
I can see that this article is a little bit small and took less time to write, but to be honest.. in some of my big projects.. I’ve faced the same issue, so I work around it and found out how to solve it properly with the help of the Flutter API documentations (easily provided by Flutter team).. Flutter provides you the flexibility to choose the right options of building great apps.
What’s Next?
Currently, this series contains only this single article, but I’ll write another articles in the next few days (I hope) about more interesting stuff hidden behind the Flutter, until then, I hope you write code wisely as always I wish to everyone 😄❤️
