DEV Community

kalokli8
kalokli8

Posted on

Why the SingleChildScrollView widget load all data at once(does not lazy loading)?

The fundamental difference between SingleChildScrollView and CustomScrollView lies in their design and intended use-cases.

SingleChildScrollView is a simple widget that combines a scrollable area with a single child. It's intended to be used where there is a need to make a single child scrollable. This child widget is typically a Column, Row, or Flex that contains a large number of items. All the children of these widgets are loaded at once, which might lead to performance issues if the list is very long. In other words, SingleChildScrollView does not support lazy loading.

On the other hand, CustomScrollView is a more complex widget that can contain multiple children, each of which could be a scrollable area (a Sliver). Slivers are a lower-level primitive that describe part of the layout and can change their behavior based on the scroll position. This makes CustomScrollView more flexible and capable of handling complex layouts.

Some of the slivers like SliverList or SliverGrid support builder delegates (SliverChildBuilderDelegate), which create children on-demand, as they scroll onto the screen. This is the mechanism that enables lazy loading in CustomScrollView.

In essence, if you need to display a potentially large list of widgets and want it to be efficiently loaded, it's better to use CustomScrollView with slivers. If you just need to make a relatively small number of widgets scrollable, SingleChildScrollView would be a simpler choice.

Top comments (1)

Collapse
 
shamnad_sherief profile image
shamnad-sherief

It helps if you add some examples