ListView.builder in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a ListView using ListView.builder.

Flutter

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return Text('Item ${index}');
  },
  [1]: true,
)

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

Aprimary

BscrollDirection

Creverse

DshrinkWrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using scrollDirection instead of shrinkWrap here.

Forgetting to set shrinkWrap when nesting ListView.

The shrinkWrap property tells the ListView to size itself based on its children. Setting it to true is common when ListView is inside another scrollable widget.

2fill in blank

medium

Complete the code to set the scroll direction of the ListView to horizontal.

Flutter

ListView.builder(
  itemCount: 5,
  itemBuilder: (context, index) => Text('Item ${index}'),
  [1]: Axis.horizontal,
)

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

AscrollDirection

Breverse

CshrinkWrap

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using reverse instead of scrollDirection to change scroll direction.

Not importing Axis enum.

The scrollDirection property controls the direction in which the ListView scrolls. Setting it to Axis.horizontal makes the list scroll sideways.

3fill in blank

hard

Fix the error in the itemBuilder function to correctly return a ListTile widget.

Flutter

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return [1](
      title: Text('Title ${index}'),
    );
  },
)

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

ATextField

BContainer

CListTile

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a Container without child widgets.

Using TextField which is for input, not list items.

The itemBuilder must return a widget. Here, ListTile is the correct widget to display a title in a list.

4fill in blank

hard

Fill both blanks to create a ListView.builder that shows 4 items with a blue background color.

Flutter

ListView.builder(
  itemCount: [1],
  itemBuilder: (context, index) {
    return Container(
      color: [2],
      child: Text('Item ${index}'),
    );
  },
)

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

A4

BColors.red

CColors.blue

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Setting itemCount to 5 instead of 4.

Using red color instead of blue.

The itemCount should be 4 to show four items. The color property is set to Colors.blue to give a blue background.

5fill in blank

hard

Fill all three blanks to create a ListView.builder that shows uppercase item titles with 6 items and a green background.

Flutter

ListView.builder(
  itemCount: [1],
  itemBuilder: (context, index) {
    return Container(
      color: [2],
      child: Text('Item ${index}'.[3]()),
    );
  },
)

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

A6

BColors.green

CtoUpperCase

DtoLowerCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using toLowerCase instead of toUpperCase.

Setting itemCount to wrong number.

Set itemCount to 6 to show six items. The container color is Colors.green. The text is converted to uppercase using toUpperCase().