Why lists display dynamic data in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a ListView that shows items from a list called items.

Flutter

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Text(items[1]);
  },
)

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

A(index)

B{index}

C<index>

D[index]

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of square brackets to access list elements.

Using curly braces which are for sets or maps.

Use square brackets to access list elements by index in Dart.

2fill in blank

medium

Complete the code to wrap each item in a ListTile widget inside the ListView.

Flutter

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return [1](
      title: Text(items[index]),
    );
  },
)

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

AListTile

BRow

CColumn

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container which does not provide list item styling.

Using Column or Row which are layout widgets but not list items.

ListTile is a common widget to display a single fixed-height row in a list.

3fill in blank

hard

Fix the error in the code to correctly update the list when new data arrives.

Flutter

setState(() {
  items.[1](newItem);
});

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

AinsertAt

Bappend

Cadd

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using append which is a Python list method, not Dart.

Using push which is from JavaScript arrays.

In Dart, the method to add an element to a list is add().

4fill in blank

hard

Fill both blanks to create a list of widgets from a list of strings called items.

Flutter

Column(
  children: items.[1]((item) => Text(item)).[2](),
)

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

Amap

Bfilter

CtoList

Dreduce

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter which is for selecting elements, not transforming.

Using reduce which combines elements into one value.

Use map() to transform each item, then toList() to convert the result to a list of widgets.

5fill in blank

hard

Fill all three blanks to build a dynamic ListView with a separator between items.

Flutter

ListView.separated(
  itemCount: items.length,
  itemBuilder: (context, index) => Text(items[1]),
  separatorBuilder: (context, index) => [2](height: [3]),
)

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

A[index]

BSizedBox

C8.0

DDivider

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of square brackets for list access.

Using Divider which draws a line, not empty space.

Using a string instead of a number for height.

Access list elements with [index], use SizedBox for spacing, and set height to 8.0 for space.