ListTile widget in Flutter - Mini App: Build & Ship

Build: Simple ListTile Screen

This screen shows a list of items using ListTile widgets. Each ListTile has a leading icon, a title, a subtitle, and a trailing icon.

Target UI

-------------------------
| List of Items         |
|-----------------------|
| [icon] Item 1         |
|       Subtitle 1      |
|                 [> ]  |
|-----------------------|
| [icon] Item 2         |
|       Subtitle 2      |
|                 [> ]  |
|-----------------------|
| [icon] Item 3         |
|       Subtitle 3      |
|                 [> ]  |
-------------------------

Use a ListView to show three ListTile widgets stacked vertically.

Each ListTile must have a leading icon (use Icons.star).

Each ListTile must have a title with text 'Item 1', 'Item 2', 'Item 3' respectively.

Each ListTile must have a subtitle with text 'Subtitle 1', 'Subtitle 2', 'Subtitle 3' respectively.

Each ListTile must have a trailing icon (use Icons.arrow_forward).

The screen must have an AppBar with title 'ListTile Example'.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ListTileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListTile Example'),
      ),
      body: ListView(
        children: [
          // TODO: Add three ListTile widgets here
        ],
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class ListTileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListTile Example'),
      ),
      body: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.star),
            title: Text('Item 1'),
            subtitle: Text('Subtitle 1'),
            trailing: Icon(Icons.arrow_forward),
          ),
          ListTile(
            leading: Icon(Icons.star),
            title: Text('Item 2'),
            subtitle: Text('Subtitle 2'),
            trailing: Icon(Icons.arrow_forward),
          ),
          ListTile(
            leading: Icon(Icons.star),
            title: Text('Item 3'),
            subtitle: Text('Subtitle 3'),
            trailing: Icon(Icons.arrow_forward),
          ),
        ],
      ),
    );
  }
}

We use a ListView to stack the ListTile widgets vertically. Each ListTile has a leading icon on the left, a title text, a smaller subtitle text below the title, and a trailing icon on the right. The AppBar shows the screen title. This layout is common for lists where each item has an icon, main text, extra info, and a navigation arrow.

Final Result

Completed Screen

-------------------------
| ListTile Example      |
|-----------------------|
| ★  Item 1             |
|    Subtitle 1         |
|                →      |
|-----------------------|
| ★  Item 2             |
|    Subtitle 2         |
|                →      |
|-----------------------|
| ★  Item 3             |
|    Subtitle 3         |
|                →      |
-------------------------

User can scroll the list if it grows longer.

Tapping a ListTile currently does nothing but can be extended to navigate or show details.

Stretch Goal

Add onTap handlers to each ListTile that show a simple SnackBar with the item name.

💡 Hint

Use the onTap property of ListTile and ScaffoldMessenger.of(context).showSnackBar() to show a message.

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