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'.