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.