ListView.separated in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a ListView with separators using ListView.separated.

Flutter

ListView.separated(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Text('Item $index');
  },
  separatorBuilder: (context, index) => [1],
)

Drag options to blanks, or click blank then click option'

ADivider()

BContainer()

CSizedBox()

DText('sep')

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container() without size or color shows nothing.

Using SizedBox() without height shows no visible separator.

The separatorBuilder requires a widget to separate items. Divider() is the standard separator widget.

2fill in blank

medium

Complete the code to set the number of items in the ListView.separated.

Flutter

ListView.separated(
  itemCount: [1],
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Divider(),
)

Drag options to blanks, or click blank then click option'

A10

B0

C5

D-1

Attempts:

3 left

💡 Hint

Common Mistakes

Setting itemCount to 0 shows no items.

Negative itemCount causes errors.

itemCount must be a positive integer representing how many items to show. 5 means 5 items.

3fill in blank

hard

Fix the error in the separatorBuilder to properly return a widget.

Flutter

ListView.separated(
  itemCount: 3,
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) [1] Divider(),
)

Drag options to blanks, or click blank then click option'

A{ return

B=>

C:

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using ':' causes syntax errors.

Using '=' alone is invalid for function body.

separatorBuilder is a function that returns a widget. Using '=>' returns the Divider() widget correctly.

4fill in blank

hard

Fill both blanks to create a ListView.separated with 4 items and a blue divider.

Flutter

ListView.separated(
  itemCount: [1],
  itemBuilder: (context, index) => Text('Item $index'),
  separatorBuilder: (context, index) => Divider(color: [2]),
)

Drag options to blanks, or click blank then click option'

A4

B5

CColors.blue

DColors.red

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong color like Colors.red when blue is asked.

Setting itemCount to 5 shows one extra item.

itemCount is 4 to show four items. Divider color is set to Colors.blue for a blue line.

5fill in blank

hard

Fill all three blanks to create a ListView.separated with 3 items, a green divider, and item text showing index + 1.

Flutter

ListView.separated(
  itemCount: [1],
  itemBuilder: (context, index) => Text('Item $[2]'),
  separatorBuilder: (context, index) => Divider(color: [3]),
)

Drag options to blanks, or click blank then click option'

A3

Bindex + 1

CColors.green

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'index' shows zero-based numbering starting at 0.

Using wrong color like Colors.red instead of green.

itemCount is 3 for three items. Text shows index + 1 to start counting from 1. Divider color is green.