Why ListView.builder hangs the app when an empty Container widget is returned from itemBuilder callback?

Question

I just started learning Flutter and during the development, the app got stuck at Performing hot-reload.

I tried flutter clean, flutter pub get and reboot of the android emulator and then re-run the app. Now the app is stuck at Connecting to VM service.

After undoing my changes, it got resolved. So I traced my changes line by line and found that my incomplete code that returned an empty Container from ListView builder's callback is causing it. I could reproduce it in a clean project as follow:

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Padding(
              padding: EdgeInsets.all(1),
              child: ListView.builder(itemBuilder: (context, index) {
                return Container();
              }))),
    );
  }
}

Why does this happen? My guess is that it needs to return a Widget or a tree of Widgets that finally resolves to a Render Widget. But then, shouldn't it be somehow warned or errored if I cannot return Widgets that don't resolve to a Render Widget?

I have tried searching the existing Flutter issues and didn't find it.

Aks · Accepted Answer · 2024-06-11 19:31:24Z

2

The "itemCount" parameter in ListView.builder is missing, which is necessary to define the number of items the list should display.
The Container inside the itemBuilder is empty, meaning it has no height, width, or content, so nothing will be displayed.

Here's the updated version.

itemCount is added to the list view

ListView.builder(
                itemCount: 10, // Added itemCount to define the number of items
                itemBuilder: (context, index) {
                   return Container(
                    height: 50, // Defined a height for the container
                    color: Colors.blue, // Added color to make the container visible
                    child: Center(child: Text('Item $index')), // Added text to the container
                  );
                },
              )

edited Jun 11, 2024 at 19:31

answered Jun 11, 2024 at 16:32

Aks

1,7622 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aks Over a year ago

Updated. try now

Aung Kaung Khant - Takao Over a year ago

Thank you for the reply. But according to the two bullet points you mentioned, it should just cause a display showing nothing right? I don't see them being the cause of getting the app stuck on load. itemCount is also not mandatory when I checked the docs.

Aks Over a year ago

If itemCount is not specified, ListView.builder will keep calling the itemBuilder indefinitely. However, if you give a height to the container, it will generate a list that you can scroll infinitely. Not specifying both itemCount and a height for the container will cause an infinite loop. You can add a print() statement inside the itemBuilder to see this in action.

Aung Kaung Khant - Takao Over a year ago

Yes, your reply is not precise but gave me the answer. When itemCount is not given, builder doesn't run indefinitely, but runs lazily with a limit of "until there is enough children for one scroll". Container tries to be as small as possible (found this behavior from A-E's answer) with no height and no child in it so it becomes a height-zero child. Combination of these behaviors introduced the infinite loop of "Needs infinitely many height-zero Containers to fill the one-scroll space", causing app to be stuck. Can confirm by adding very tiny height to Container like 0.1.

A-E · Accepted Answer · 2024-06-12 05:27:02Z

2

Container with no child, no height, no width, no constraints, and the parent provides unbounded constraints (like scroll view widgets do), then Container tries to size as small as possible.

actually it collapses to zero size, Consequently, any widgets that rely on the presence of the Container for layout or spacing may also not appear as expected which leads to white blank screen.

for more info about container go here

edited Jun 12, 2024 at 5:27

answered Jun 11, 2024 at 19:23

A-E

3,4013 gold badges8 silver badges33 bronze badges

1 Comment

Aung Kaung Khant - Takao Over a year ago

It makes sense. But, in the doc you linked, it says "If the widget has no child, no height, no width, no constraints, and the parent provides unbounded constraints, then Container tries to size as small as possible." not as big as possible.

Jacob Frye · Accepted Answer · 2024-06-22 04:27:48Z

0

I had this issue, spent way too long debugging it. Absolutely no explanation.

From my testing, returning ANYTHING except an empty Container seems to work just fine, even null. No error messages, just hangs the application if an empty Container is returned.

answered Jun 22, 2024 at 4:27

Jacob Frye

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Why ListView.builder hangs the app when an empty Container widget is returned from itemBuilder callback?

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related