ListTile in Flutter

Create professional and highly customizable list items

Download Complete Examples

What is ListTile?

ListTile is a specialized Flutter widget that provides a predefined structure for list items. It's ideal for consistently displaying information in list format with icons, text and actions.

Predefined Structure

Provides a consistent structure for list items

Material Design

Follow the Material Design guidelines

Highly Customizable

You can customize every part of the widget

Basic Structure

leading
title
subtitle
trailing
Main icon Content Action

Basic Syntax:

ListTile(
  leading: Icon(Icons.person),
  title: Text('Juan Pérez'),
  subtitle: Text('Desarrollador Flutter'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    // Acción al hacer tap  },
)

Main Properties

leading

Widget that appears at the start (usually an Icon)

Icon CircleAvatar Image

title

Main text of the tile (required)

Text RichText

subtitle

Secondary text (optional)

Text Row

trailing

Widget that appears at the end

Icon Switch Text

onTap

Function executed when tapped

Function

enabled

Enables or disables the tile

true false

Basic Examples

ListTile Simple

📱
Settings
➡️
ListTile(
  leading: Icon(Icons.settings),
  title: Text('Configuración'),
  trailing: Icon(Icons.arrow_forward),
)

With Subtitle

👤
María García
maria@email.com
📞
ListTile(
  leading: Icon(Icons.person),
  title: Text('María García'),
  subtitle: Text('maria@email.com'),
  trailing: Icon(Icons.phone),
)

With Switch

🔔
Notificaciones
Activar/Desactivar
●
ListTile(
  leading: Icon(Icons.notifications),
  title: Text('Notificaciones'),
  subtitle: Text('Activar/Desactivar'),
  trailing: Switch(
    value: _notifications,
    onChanged: (value) {
      setState(() {
        _notifications = value;
      });
    },
  ),
)

Using ListTile in ListView

🏠
Home
⭐
Favorites
📊
Statistics
⚙️
Settings
ListView(
  children: [
    ListTile(
      leading: Icon(Icons.home),
      title: Text('Home'),
      onTap: () => navigateToHome(),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Favorites'),
      onTap: () => navigateToFavorites(),
    ),
    ListTile(
      leading: Icon(Icons.analytics),
      title: Text('Statistics'),
      onTap: () => navigateToStats(),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('Settings'),
      onTap: () => navigateToSettings(),
    ),
  ],
)

Creator ListTile Interactive

// El código se generará aquí

Advanced Customization

Custom Colors

🎨
Tile con colores
Personalización completa
❤️
ListTile(
  tileColor: Colors.blue[50],
  textColor: Colors.blue[900],
  iconColor: Colors.blue[700],
  leading: Icon(Icons.palette),
  title: Text('Tile con colores'),
  subtitle: Text('Personalización completa'),
  trailing: Icon(Icons.favorite),
)

Shape and Elevation

📐
Tile con sombra
Shape and elevation
ListTile(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  elevation: 4,
  leading: Icon(Icons.shape_line),
  title: Text('Tile con sombra'),
  subtitle: Text('Shape and elevation'),
)

Custom Content

⭐
Calificación
★★★☆☆
4.2
ListTile(
  leading: Icon(Icons.star),
  title: Text('Calificación'),
  subtitle: Row(
    children: [
      Icon(Icons.star, size: 16),
      Icon(Icons.star, size: 16),
      Icon(Icons.star, size: 16),
      Icon(Icons.star_border, size: 16),
      Icon(Icons.star_border, size: 16),
    ],
  ),
  trailing: Text('4.2'),
)

Common Use Cases

📱 Navigation Menus

Perfect for drawers and navigation menus with clear icons and text.

👥 Contact Lists

Ideal for showing contacts with avatars, names and additional information.

⚙️ Settings Screens

Great for settings options with switches, icons and descriptions.

📊 Data Lists

Perfect for showing structured data with multiple lines of information.

Best Practices

🎯 Use subtitles for additional information

The subtitle is ideal for emails, short descriptions or secondary information.

📱 Keep it consistent

Use the same leading and trailing style throughout your application.

⚡ Implement onTap

Whenever possible, add onTap functionality for better UX.

🎨 Consider the density

Use visualDensity to adjust spacing according to your needs.

Exercises to Practice

Exercise 1: Contact List

Create a contact list with circular avatar, name, email and call button.

Hint: Use CircleAvatar in leading and IconButton in trailing

Exercise 2: Settings Menu

Create a settings menu with different types of trailing (switch, icon, text).

Hint: Combine Switch, Icon and Text in the trailing property

Exercise 3: List with States

Create a list where some items are disabled and others have different colors.

Hint: Use the enabled and tileColor properties