ListTile widget in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this ListTile code?

Given the following Flutter code snippet, what will be displayed on the screen?

Flutter

ListTile(
  leading: Icon(Icons.star),
  title: Text('Favorite'),
  subtitle: Text('Tap to select'),
  trailing: Icon(Icons.arrow_forward),
)

A A list item with a star icon on the left, title 'Favorite', subtitle 'Tap to select', and an arrow icon on the right.

B A list item with only the title 'Favorite' centered and no icons.

C A list item with the title and subtitle stacked vertically but no icons.

D An error because trailing icon is not allowed in ListTile.

💡 Hint

Think about what each property (leading, title, subtitle, trailing) does in ListTile.

The ListTile widget arranges leading icon on the left, title and subtitle stacked vertically in the center, and trailing icon on the right.

❓ ui_behavior

intermediate

What happens when you tap a ListTile with onTap set?

Consider this ListTile: ListTile( title: Text('Click me'), onTap: () { print('Tapped'); }, ) What happens when the user taps this ListTile?

A The app crashes because onTap requires a return value.

B Nothing happens because onTap is not a valid property.

C The text 'Tapped' is printed to the console and the ListTile shows a ripple effect.

D The ListTile disappears from the screen.

💡 Hint

onTap is a callback for tap gestures.

When onTap is set, tapping the ListTile triggers the callback and shows a ripple effect by default.

📝 Syntax

advanced

Which option causes a syntax error in ListTile usage?

Identify the option that will cause a syntax error when used in Flutter code.

A ListTile(title: Text('Hello'), onTap: () => print('Tapped'))

B ListTile(title: Text('Hello'), subtitle: Text('Subtitle'))

C ListTile(title: Text('Hello'), leading: Icon(Icons.home))

D ListTile(title: Text('Hello'), trailing Icon(Icons.arrow_forward))

💡 Hint

Check for missing colons between property names and values.

Option D is missing a colon after 'trailing', causing a syntax error.

❓ ui_behavior

advanced

What is the effect of wrapping ListTile with InkWell?

If you wrap a ListTile inside an InkWell widget with an onTap handler, what changes in behavior or appearance occur?

A There is no visual or functional change; both ripple effects appear simultaneously.

B The ListTile loses its default ripple effect and only InkWell's ripple is shown on tap.

C The ListTile's onTap stops working and InkWell's onTap is ignored.

D The app crashes because ListTile cannot be wrapped by InkWell.

💡 Hint

Nested interactive Material widgets like InkWell and ListTile both respond to taps.

Wrapping ListTile with InkWell results in both widgets handling the tap: both onTap callbacks fire (if set) and both ripple effects are visible simultaneously.

🔧 Debug

expert

Does this ListTile show the subtitle?

Given this code: ListTile( title: Text('Title'), subtitle: Text('Subtitle'), isThreeLine: false, ) Is the subtitle visible on the screen?

A Because isThreeLine is false, subtitle is hidden unless isThreeLine is true.

B Because subtitle is always shown regardless of isThreeLine value.

C Because isThreeLine false means subtitle is shown only if title is empty.

D Because subtitle requires isThreeLine to be true to display below title.

💡 Hint

isThreeLine affects layout height and line count, but not whether subtitle is displayed.

Option B is correct. The subtitle is always displayed below the title if provided, regardless of isThreeLine. When false, it uses a two-line layout; when true, up to three lines.

Practice

1. What is the primary purpose of the ListTile widget in Flutter?

easy

A. To handle network requests asynchronously.

B. To create a simple row with optional leading, title, subtitle, and trailing widgets.

C. To manage app state across multiple widgets.

D. To create animations and transitions.

Solution

1. Step 1: Understand ListTile's role

   The ListTile widget is designed to create a row layout with optional leading, title, subtitle, and trailing widgets.

2. Step 2: Compare with other options

   The other options describe functionalities like handling network requests, managing app state, and creating animations, which are unrelated to ListTile.

3. Final Answer:

   To create a simple row with optional leading, title, subtitle, and trailing widgets. -> Option B

4. Quick Check:

   ListTile purpose = simple row layout [OK]

Hint: Remember ListTile builds rows with icons and text [OK]

Common Mistakes:

• Confusing ListTile with state management widgets
• Thinking ListTile handles animations
• Assuming ListTile manages network calls

2. Which of the following is the correct way to add a tap handler to a ListTile?

easy

A. ListTile(onTap: () { print('Tapped'); })

B. ListTile(onPressed: () { print('Tapped'); })

C. ListTile(onClick: () { print('Tapped'); })

D. ListTile(onPressedTap: () { print('Tapped'); })

Solution

1. Step 1: Identify the correct tap callback property

   The ListTile widget uses the onTap property to handle taps.

2. Step 2: Check other options

   The other options use incorrect property names like onPressed, onClick, and onPressedTap, which are not recognized by ListTile.

3. Final Answer:

   ListTile(onTap: () { print('Tapped'); }) -> Option A

4. Quick Check:

   Tap handler property = onTap [OK]

Hint: Use onTap for tap events on ListTile [OK]

Common Mistakes:

• Using onPressed instead of onTap
• Using onClick which is not a Flutter property
• Misspelling the callback property

3. What will be displayed when this Flutter code runs?

ListTile(
  leading: Icon(Icons.star),
  title: Text('Favorite'),
  subtitle: Text('Tap to select'),
  trailing: Icon(Icons.arrow_forward),
)

medium

A. A row with a star icon on left, 'Favorite' title, 'Tap to select' subtitle below title, and an arrow icon on right.

B. Only the title 'Favorite' centered on screen.

C. A column with star icon, title, subtitle, and arrow stacked vertically.

D. An error because trailing cannot be an icon.

Solution

1. Step 1: Understand ListTile layout

   ListTile arranges leading, title, subtitle, and trailing horizontally in a row with subtitle below title.

2. Step 2: Analyze given widgets

   Leading is a star icon, title is 'Favorite', subtitle is 'Tap to select', trailing is arrow icon, so all appear in one row with subtitle under title.

3. Final Answer:

   A row with a star icon on left, 'Favorite' title, 'Tap to select' subtitle below title, and an arrow icon on right. -> Option A

4. Quick Check:

   ListTile layout = row with leading, title+subtitle, trailing [OK]

Hint: ListTile shows leading left, title/subtitle center, trailing right [OK]

Common Mistakes:

• Thinking ListTile stacks widgets vertically
• Assuming trailing cannot be an icon
• Ignoring subtitle placement below title

4. Identify the error in this ListTile code snippet:

ListTile(
  leading: Icon(Icons.home),
  title: Text('Home'),
  onTap: print('Tapped'),
)

medium

A. ListTile cannot have an onTap property.

B. The leading icon is not allowed in ListTile.

C. The onTap property should be a function, not a function call.

D. The title must be a String, not a Text widget.

Solution

1. Step 1: Check onTap usage

   The onTap property expects a function to call when tapped, but print('Tapped') is a function call executed immediately.

2. Step 2: Correct usage

   It should be onTap: () { print('Tapped'); } to pass a function, not call it.

3. Final Answer:

   The onTap property should be a function, not a function call. -> Option C

4. Quick Check:

   onTap needs a function, not immediate call [OK]

Hint: Pass a function to onTap, not call it directly [OK]

Common Mistakes:

• Calling print inside onTap instead of passing a function
• Thinking leading icon is invalid
• Confusing Text widget with String

5. You want to create a clickable list item with a user avatar on the left, the user's name as the title, their email as the subtitle, and a right arrow on the right. Which ListTile code correctly implements this?

hard

A. ListTile(
leading: CircleAvatar(child: Icon(Icons.person)),
title: Text('Alice'),
subtitle: Text('[e-mail]'),
trailing: Icon(Icons.arrow_forward),
onTap: print('User tapped'),
)

B. ListTile(
leading: Icon(Icons.person),
title: Text('Alice'),
subtitle: '[e-mail]',
trailing: Icon(Icons.arrow_forward),
onTap: print('User tapped'),
)

C. ListTile(
leading: CircleAvatar(child: Text('A')),
title: 'Alice',
subtitle: Text('[e-mail]'),
trailing: Icon(Icons.arrow_forward),
onTap: () => print('User tapped'),
)

D. ListTile(
leading: CircleAvatar(child: Icon(Icons.person)),
title: Text('Alice'),
subtitle: Text('[e-mail]'),
trailing: Icon(Icons.arrow_forward),
onTap: () { print('User tapped'); },
)

Solution

1. Step 1: Check widget types for each property

   Leading uses CircleAvatar with an Icon, title and subtitle use Text widgets, trailing uses Icon, and onTap is a function.

2. Step 2: Validate onTap and subtitle types

   ListTile( leading: CircleAvatar(child: Icon(Icons.person)), title: Text('Alice'), subtitle: Text('[e-mail]'), trailing: Icon(Icons.arrow_forward), onTap: () { print('User tapped'); }, ) correctly uses onTap: () { print('User tapped'); } and subtitle as Text widget. Some options incorrectly pass onTap as a function call. ListTile( leading: CircleAvatar(child: Text('A')), title: 'Alice', subtitle: Text('[e-mail]'), trailing: Icon(Icons.arrow_forward), onTap: () => print('User tapped'), ) uses title as a String, which is invalid.

3. Final Answer:

   ListTile( leading: CircleAvatar(child: Icon(Icons.person)), title: Text('Alice'), subtitle: Text('[e-mail]'), trailing: Icon(Icons.arrow_forward), onTap: () { print('User tapped'); }, ) -> Option D

4. Quick Check:

   Correct widget types and onTap function = ListTile( leading: CircleAvatar(child: Icon(Icons.person)), title: Text('Alice'), subtitle: Text('[e-mail]'), trailing: Icon(Icons.arrow_forward), onTap: () { print('User tapped'); }, ) [OK]

Hint: Use Text widgets for title/subtitle and pass function to onTap [OK]

Common Mistakes:

• Passing onTap as a function call instead of a function
• Using String instead of Text widget for title or subtitle
• Not wrapping avatar icon inside CircleAvatar