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.