ListTile widget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a ListTile with a title text.

Flutter

ListTile(
  title: Text([1]),
)

Drag options to blanks, or click blank then click option'

AText('Hello World')

BHello World

C'Hello World'

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string.

Passing a plain string instead of a Text widget.

The title property expects a Widget, so we use Text widget with a string inside quotes.

2fill in blank

medium

Complete the code to add a leading icon to the ListTile.

Flutter

ListTile(
  leading: Icon([1]),
  title: Text('Menu'),
)

Drag options to blanks, or click blank then click option'

AIcons.menu

Bmenu

CIcon.menu

DIcons.Menu

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong case like Icons.Menu or Icon.menu.

Passing a string instead of Icons.menu.

The leading icon uses Icons.menu with lowercase 'menu' and capital 'I' in Icons.

3fill in blank

hard

Fix the error in the ListTile to add a subtitle text.

Flutter

ListTile(
  title: Text('Title'),
  subtitle: [1]('Subtitle'),
)

Drag options to blanks, or click blank then click option'

Atext

BSubtitle

CLabel

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'text' instead of 'Text'.

Passing a string directly without Text widget.

The subtitle property also expects a Text widget with the subtitle string.

4fill in blank

hard

Fill both blanks to create a ListTile with a trailing icon and a tap action.

Flutter

ListTile(
  title: Text('Settings'),
  trailing: Icon([1]),
  onTap: () => [2]('Tapped!'),
)

Drag options to blanks, or click blank then click option'

AIcons.settings

Bprint

CIcons.menu

Dalert

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong icon name or case.

Using alert instead of print for onTap.

The trailing icon uses Icons.settings and the onTap action calls print to show a message.

5fill in blank

hard

Fill all three blanks to create a ListTile with a leading icon, title, and a subtitle.

Flutter

ListTile(
  leading: Icon([1]),
  title: Text([2]),
  subtitle: Text([3]),
)

Drag options to blanks, or click blank then click option'

AIcons.account_circle

B'User Name'

C'Active now'

DIcons.user

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong icon name like Icons.user.

Forgetting quotes around title or subtitle strings.

The leading icon is Icons.account_circle, the title is 'User Name', and the subtitle is 'Active now'.

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