Render an image only when it'll visible

user_15540434 0
Viewed 443

Can i render an imagens only it'll visuble in scrollview?

My app has an list view with many products, when I scrolling down many times the performance of my app is down (i'm using a lazy list), i guess it's becase there many imagens (from web) render up my screen.

I'm thinking to do something like it:

enter image description here

dart flutter performance
2 Answers

You'll need to use Listview.builder with itemBuilder instead of a child

It will allow you to only render what is on the screen or what is likely to be on scrolled in the very near future - your performance will be considerably improved

  • I recommend watching this video from the Flutter Team on this topic (lazy load a big list view) at flutter.io - if you'd like to go deeper into the topic

Illustration of Listview.builder

user_125484940

use .builder when ever you can find.

Creates a scrollable, linear array of widgets that are created on demand.

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. for more follow ListView.builder

user_101571270
Related