ListView.separated in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet?

Consider this Flutter widget using ListView.separated:

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Divider(color: Colors.red),
)

What will the UI display?

Flutter

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Divider(color: Colors.red),
)

A A vertical list showing: Item 0, red divider, Item 1, red divider, Item 2

B A vertical list showing: Item 0, Item 1, Item 2 with no dividers

C A vertical list showing: red divider, Item 0, red divider, Item 1, red divider, Item 2

D A vertical list showing: Item 0, red divider, Item 1 only (Item 2 missing)

💡 Hint

Remember that separatorBuilder inserts widgets between items, not before the first or after the last.

The ListView.separated shows all items with separators only between them. So for 3 items, there are 2 separators.

❓ lifecycle

intermediate

How many times is the separatorBuilder called in this ListView.separated?

Given this code:

ListView.separated(
  itemCount: 5,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => SizedBox(height: 10),
)

How many times will separatorBuilder be called during build?

Flutter

ListView.separated(
  itemCount: 5,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => SizedBox(height: 10),
)

A 5 times

B 1 time

C 6 times

D 4 times

💡 Hint

Separators appear only between items, not after the last item.

For 5 items, separators appear between them, so 4 separators total.

📝 Syntax

advanced

What error does this ListView.separated code produce?

Analyze this Flutter code snippet:

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Text('Separator'),
  itemBuilder: (context, index) => Text('Duplicate'),
)

What error will occur?

Flutter

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Text('Separator'),
  itemBuilder: (context, index) => Text('Duplicate'),
)

A Runtime error: separatorBuilder called twice

B SyntaxError: Duplicate named parameter 'itemBuilder'

C No error, runs fine showing duplicate itemBuilder widgets

D TypeError: itemBuilder must return a Widget

💡 Hint

Check the parameters passed to the constructor carefully.

Flutter constructors cannot have duplicate named parameters. Here, itemBuilder is given twice, causing a syntax error.

❓ navigation

advanced

How to preserve scroll position when navigating back to a ListView.separated?

You have a ListView.separated inside a screen. When you navigate to another screen and come back, the list resets to the top. How to keep the scroll position?

A Set <code>itemCount</code> to null to preserve state

B Wrap ListView.separated with a <code>SingleChildScrollView</code>

C Use a ScrollController and keep it alive with a StatefulWidget

D Use <code>Navigator.pushReplacement</code> instead of <code>push</code>

💡 Hint

Think about how Flutter remembers scroll positions.

Using a ScrollController stored in a StatefulWidget preserves scroll position when navigating back.

🧠 Conceptual

expert

Why does ListView.separated improve performance over ListView.builder with manual dividers?

Consider two Flutter lists:

• One uses ListView.builder with manual dividers inside itemBuilder.
• The other uses ListView.separated with a separatorBuilder.

Why is ListView.separated often more efficient?

A Because it builds separators only when needed and optimizes widget reuse

B Because it caches all items and separators in memory upfront

C Because it disables scrolling to improve performance

D Because it uses a different rendering engine than ListView.builder

💡 Hint

Think about how Flutter builds widgets lazily and reuses them.

ListView.separated separates item and separator building, allowing Flutter to optimize and reuse widgets better than manual dividers inside itemBuilder.