ListTile widget in Flutter

Introduction

The ListTile widget helps you create a simple row with text and icons. It is easy to use for lists or menus.

Showing a list of contacts with names and pictures

Creating a settings menu with options and icons

Displaying a list of messages with titles and subtitles

Making a clickable item in a list that leads to details

Syntax

Flutter

ListTile(
  leading: Widget?,
  title: Widget?,
  subtitle: Widget?,
  trailing: Widget?,
  onTap: void Function()?,
)

leading is a widget shown at the start, often an icon or image.

title is the main text, usually a Text widget.

Examples

A simple ListTile with an icon and a title.

Flutter

ListTile(
  leading: Icon(Icons.person),
  title: Text('John Doe'),
)

A ListTile with a title, a trailing arrow icon, and a tap action.

Flutter

ListTile(
  title: Text('Settings'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () { print('Tapped settings'); },
)

A ListTile with avatar, title, subtitle, and trailing icon.

Flutter

ListTile(
  leading: CircleAvatar(child: Text('A')),
  title: Text('Alice'),
  subtitle: Text('Online'),
  trailing: Icon(Icons.message),
)

Sample App

This app shows a list with three ListTile widgets. Each tile has different icons and text to show how ListTile can be used.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ListTile Example')),
        body: ListView(
          children: const [
            ListTile(
              leading: Icon(Icons.person),
              title: Text('John Doe'),
              subtitle: Text('Developer'),
              trailing: Icon(Icons.arrow_forward),
            ),
            ListTile(
              leading: CircleAvatar(child: Text('A')),
              title: Text('Alice'),
              subtitle: Text('Online'),
              trailing: Icon(Icons.message),
            ),
            ListTile(
              title: Text('Settings'),
              trailing: Icon(Icons.settings),
            ),
          ],
        ),
      ),
    );
  }
}

Important Notes

The ListTile widget automatically arranges its parts horizontally with proper spacing.

Use onTap to make the tile respond to taps, like opening a new screen.

ListTile is efficient for long lists because it works well inside ListView.

Summary

ListTile creates a simple row with optional leading, title, subtitle, and trailing widgets.

It is perfect for lists, menus, and clickable items.

Use onTap to handle user taps on the tile.