ListView basics in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this ListView display?

Consider this Flutter code snippet. What will the ListView show on the screen?

Flutter

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

A A blank screen because Text widgets need to be wrapped in Containers

B A horizontal list showing the words: Apple, Banana, Cherry

C An error because ListView needs a builder, not children

D A vertical list showing the words: Apple, Banana, Cherry

💡 Hint

ListView by default scrolls vertically and accepts children widgets.

ListView with children shows them vertically by default. No error occurs. Text widgets display their text.

📝 Syntax

intermediate

Which option correctly creates a ListView with 3 items using builder?

Choose the correct Flutter code to create a ListView with 3 Text items: 'One', 'Two', 'Three' using ListView.builder.

A

ListView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return Text(['One', 'Two', 'Three'][index]);
  },
)

B

ListView.builder(
  itemCount: 3,
  itemBuilder: (index, context) {
    return Text(['One', 'Two', 'Three'][index]);
  },
)

C

ListView.builder(
  itemCount: 3,
  builder: (context, index) {
    return Text(['One', 'Two', 'Three'][index]);
  },
)

D

ListView.builder(
  count: 3,
  itemBuilder: (context, index) {
    return Text(['One', 'Two', 'Three'][index]);
  },
)

💡 Hint

The itemBuilder function parameters are (BuildContext, int). The property is itemCount, not count.

Option A uses correct parameter order and property names. Others have wrong parameter order, property names, or missing itemBuilder.

❓ lifecycle

advanced

What happens if you update the list data but forget to call setState() in a StatefulWidget?

In a StatefulWidget, you update the list used by ListView but do not call setState(). What is the visible effect?

A The ListView does not update and still shows old data.

B The ListView updates immediately to show the new data.

C The app crashes with a runtime error.

D The ListView shows a blank screen.

💡 Hint

setState() tells Flutter to redraw the widget with new data.

Without setState(), Flutter does not know data changed, so UI stays the same.

❓ navigation

advanced

How to navigate to a new screen when tapping a ListView item?

You want to open a new screen when a user taps an item in ListView. Which code snippet correctly does this?

A

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

B

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
      onPressed: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => DetailScreen()));
      },
    );
  },
)

C

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
      onTap: () {
        Navigator.push(context, MaterialPageRoute(builder: (context) => DetailScreen()));
      },
    );
  },
)

D

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
      onTap: () => Navigator.pop(context),
    );
  },
)

💡 Hint

Use onTap for ListTile tap events and Navigator.push to go to a new screen.

Option C uses onTap and Navigator.push correctly. B uses wrong event onPressed. A and C pop the current screen instead of pushing a new one.

🔧 Debug

expert

Why does this ListView cause a vertical overflow error?

This code causes a vertical overflow error when run. Why?

Flutter

Column(
  children: [
    Text('Header'),
    ListView(
      shrinkWrap: true,
      children: List.generate(50, (index) => Text('Item $index')),
    ),
  ],
)

A Text widgets inside ListView cause overflow because they are too large.

B ListView inside Column has infinite height and causes overflow because it is not wrapped in a widget with fixed height.

C Column cannot have more than 10 children, so overflow occurs.

D ListView must be replaced with ListView.builder to avoid overflow.

💡 Hint

ListView tries to expand infinitely inside a Column without height constraints.

ListView inside Column needs a fixed height or to be wrapped in Expanded/Flexible to avoid overflow.

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