ListView.builder in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this ListView.builder code?

Consider this Flutter code snippet that builds a list of 3 items:

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

What will the user see on the screen?

Flutter

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

A A scrollable list showing: Item 0, Item 1, Item 2

B A scrollable list showing: Item 1, Item 2, Item 3

C An error because itemCount is less than 4

D A blank screen because Text widgets need keys

💡 Hint

Remember that index starts at 0 and goes up to itemCount - 1.

The ListView.builder creates widgets for indices 0, 1, and 2 because itemCount is 3. So it shows 'Item 0', 'Item 1', and 'Item 2'.

❓ lifecycle

intermediate

When does ListView.builder call itemBuilder?

In Flutter, when does the itemBuilder function of ListView.builder get called?

A Every time an item scrolls into view and needs to be built

B Only for the first item, then reused for others

C Only once for all items when the ListView is created

D When the app starts and never again

💡 Hint

Think about how Flutter optimizes scrolling lists.

ListView.builder calls itemBuilder lazily, only when an item scrolls into view, to save memory and improve performance.

📝 Syntax

advanced

Which option causes a syntax error in ListView.builder?

Identify which ListView.builder code snippet will cause a syntax error.

Flutter

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Text('Item $index');
  }
)

A ListView.builder(itemCount: 5, itemBuilder: (context, index) { return Text('Item $index'); })

B ListView.builder(itemCount: 5, itemBuilder: (context, index) => { Text('Item $index'); })

C ListView.builder(itemCount: 5, itemBuilder: (context, index) => Text('Item $index'))

D ListView.builder(itemCount: 5, itemBuilder: (context index) { return Text('Item $index'); })

💡 Hint

Check the syntax of function parameters and arrow functions in Dart.

Option D misses a comma between parameters, causing a syntax error. Option D uses a block with arrow syntax incorrectly.

❓ navigation

advanced

How to navigate on ListView item tap?

You want to navigate to a detail screen when a user taps an item in ListView.builder. Which code snippet correctly adds tap handling?

Flutter

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
)

A Use onPressed property on Text widget

B Add onTap directly to Text widget

C Wrap Text with GestureDetector and call Navigator.push inside onTap

D Wrap Text with Container and add onTap property

💡 Hint

Remember which widgets handle taps in Flutter.

Text widget does not have onTap or onPressed. GestureDetector or InkWell can detect taps and trigger navigation.

🔧 Debug

expert

Why does ListView.builder cause 'RenderBox was not laid out' error?

Given this code snippet inside a Column:

Column(
  children: [
    Text('Header'),
    ListView.builder(
      itemCount: 3,
      itemBuilder: (context, index) => Text('Item $index'),
    ),
  ],
)

Why does this cause a 'RenderBox was not laid out' error?

A itemCount must be null inside Column

B ListView.builder has infinite height inside Column without constraints

C Column cannot have children widgets

D Text widget inside ListView.builder is invalid

💡 Hint

Think about how ListView behaves inside unbounded height parents.

ListView.builder tries to expand infinitely inside a Column because Column does not constrain height, causing layout errors.