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.

Practice

1. What is the main purpose of a ListView in Flutter?

easy

A. To create a fixed grid layout

B. To display a scrollable list of widgets

C. To handle user input forms

D. To manage app navigation

Solution

1. Step 1: Understand ListView's role

   ListView is designed to show multiple widgets in a scrollable list.

2. Step 2: Compare with other widgets

   Grid layouts or navigation are handled by other widgets, not ListView.

3. Final Answer:

   To display a scrollable list of widgets -> Option B

4. Quick Check:

   ListView = scrollable list [OK]

Hint: ListView always scrolls vertically by default [OK]

Common Mistakes:

• Confusing ListView with GridView
• Thinking ListView manages navigation
• Assuming ListView is for fixed layouts

2. Which of the following is the correct way to create a ListView with three Text widgets as children?

easy

A. ListView(children: Text('One'), Text('Two'), Text('Three'))

B. ListView(items: [Text('One'), Text('Two'), Text('Three')])

C. ListView(list: [Text('One'), Text('Two'), Text('Three')])

D. ListView(children: [Text('One'), Text('Two'), Text('Three')])

Solution

1. Step 1: Identify correct property for children

   The ListView uses the children property to accept a list of widgets.

2. Step 2: Check syntax correctness

   ListView(children: [Text('One'), Text('Two'), Text('Three')]) correctly uses children: [ ... ] with a list of Text widgets.

3. Final Answer:

   ListView(children: [Text('One'), Text('Two'), Text('Three')]) -> Option D

4. Quick Check:

   Use children property with a list [OK]

Hint: Use children: [widget1, widget2] for ListView items [OK]

Common Mistakes:

• Using wrong property like items or list
• Not wrapping widgets in a list
• Passing widgets without brackets

3. What will be the visible output when running this Flutter code?

ListView(
  children: [
    Text('Apple'),
    Text('Banana'),
    Text('Cherry')
  ],
)

medium

A. Only the first Text widget 'Apple' is shown

B. A horizontal scrollable list showing Apple, Banana, Cherry

C. A vertical scrollable list showing Apple, Banana, Cherry

D. An error because ListView needs a scrollDirection

Solution

1. Step 1: Understand default scroll direction

   ListView scrolls vertically by default, so children appear stacked vertically.

2. Step 2: Check children widgets

   Three Text widgets will appear in order: Apple, Banana, Cherry.

3. Final Answer:

   A vertical scrollable list showing Apple, Banana, Cherry -> Option C

4. Quick Check:

   Default scrollDirection = vertical [OK]

Hint: ListView scrolls vertically unless scrollDirection changes [OK]

Common Mistakes:

• Assuming horizontal scroll by default
• Thinking scrollDirection is required
• Expecting only one child visible

4. Identify the error in this ListView code snippet:

ListView(
  children: Text('Hello'),
)

medium

A. children expects a list of widgets, not a single widget

B. Text widget cannot be used inside ListView

C. ListView requires a scrollDirection property

D. Missing a comma after Text widget

Solution

1. Step 1: Check children property type

   The children property requires a list of widgets, e.g., [Text('Hello')].

2. Step 2: Identify the mistake

   Passing a single widget without brackets causes a type error.

3. Final Answer:

   children expects a list of widgets, not a single widget -> Option A

4. Quick Check:

   children = list of widgets [OK]

Hint: Always wrap children widgets in square brackets [OK]

Common Mistakes:

• Passing single widget without list brackets
• Forgetting children needs a list
• Adding unnecessary properties

5. You want to display a list of 100 numbers efficiently using ListView. Which approach is best?

hard

A. Use ListView.builder with itemCount and itemBuilder

B. Use ListView with 100 children widgets listed manually

C. Use a Column with 100 Text widgets inside a SingleChildScrollView

D. Use ListView without children or builder

Solution

1. Step 1: Understand performance with many items

   Manually listing 100 widgets wastes memory and slows app.

2. Step 2: Use ListView.builder for efficiency

   ListView.builder creates widgets on demand, improving performance.

3. Final Answer:

   Use ListView.builder with itemCount and itemBuilder -> Option A

4. Quick Check:

   ListView.builder = efficient large lists [OK]

Hint: Use ListView.builder for long or infinite lists [OK]

Common Mistakes:

• Listing all items manually in children
• Using Column for large scrollable lists
• Not specifying itemCount in builder