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.