Issue while Loading (firstPageProgressIndicatorBuilder) using ListView

[nandakista]

Issue while Loading (firstPageProgressIndicatorBuilder) using ListView

[caiombueno]

hi @nandakista

I think this happens because a ListView doesn't provide its complete dimensions all at once. Instead, it only renders the elements that are currently visible.

On the other hand, when using SingleChildScrollView with Column, the entire item list is mounted and painted, even if only a few items are visible. The widget has defined dimensions, and that appears to be what the parameter wants.

If you want to know more about it, take a look at this StackOverflow discussion.

[nandakista]

Hi @caiombueno
Thank you for the response and the explanation.

I tried building using a ListView without a builder like the code below

/// Still not work
...
firstPageProgressIndicatorBuilder: (context) {
    return ListView(
      children: [
        for (var i = 0; i < 20; i++)
          Text('[Sample] Loading shimmer item-$i'),
      ],
    );
}
...

But having the same error, isn't it true that if use a ListView without a builder it will also build all the widgets not just the visible ones (constructor ListView #1) ?

So for this problem, am I required to use SingleChildScrollView for the shimmer list? That's a kinda weird

[caiombueno]

As far as I understand, the default ListView doesn't build and render the whole list at once; instead, it creates the entire list in memory at once. I took this information from Ala Amarneh's answer in this discussion.

If you really want to use the ListView, you could wrap it in a SizedBox.

[mllrr96]

Had same issue, had to use column like that to mimic ListView.separated
Column( children: List.generate( 20, (index) => index.isEven ? shimmerWidget : const SizedBox(height: 8.0)))

[EArminjon]

Elegant solution : wrap your listview inside firstPageProgressIndicatorBuilder with a Sizedbox.shrink.