ListView basics in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical ListView with three Text widgets.

Flutter

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    [1]('Item 3'),
  ],
)

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

AContainer

BColumn

CRow

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using a layout widget like Row or Column inside children instead of Text.

Forgetting to wrap the string in a Text widget.

The ListView children must be widgets. To show text, use the Text widget.

2fill in blank

medium

Complete the code to create a ListView that scrolls horizontally.

Flutter

ListView(
  scrollDirection: [1],
  children: [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

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

AAxis.horizontal

BAxis.vertical

CScrollDirection.horizontal

DScrollDirection.vertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong enum like ScrollDirection instead of Axis.

Setting scrollDirection to a string instead of an enum value.

To make a ListView scroll horizontally, set scrollDirection to Axis.horizontal.

3fill in blank

hard

Fix the error in the ListView builder code to correctly create 5 items.

Flutter

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

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

A'5'

Bindex

C5

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the number, making it a string.

Using null or a variable that is not defined.

The itemCount must be an integer number, not a string or null.

4fill in blank

hard

Fill both blanks to create a ListView with 3 colored Containers stacked vertically.

Flutter

ListView(
  children: [
    Container(color: [1], height: 50),
    Container(color: [2], height: 50),
    Container(color: Colors.blue, height: 50),
  ],
)

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

AColors.red

BColors.green

CColors.yellow

DColors.black

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names as strings instead of Colors.colorName.

Using the same color for both containers.

The first two Containers need colors red and green to show different colors in the list.

5fill in blank

hard

Fill all three blanks to create a ListView.builder that shows 4 items with text and index.

Flutter

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

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

A4

Bcontext

Cindex

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names in itemBuilder.

Setting itemCount to a string or wrong variable.

The itemCount is 4 to show four items. The itemBuilder takes context and index as parameters.