ListTile en Flutter

Crea elementos de lista profesionales y altamente personalizables

Descargar Ejemplos Completos

¿Qué es ListTile?

ListTile es un widget especializado de Flutter que proporciona una estructura predefinida para elementos de lista. Es ideal para mostrar información en formato de lista con iconos, texto y acciones de manera consistente.

Estructura Predefinida

Ofrece una estructura consistente para elementos de lista

Material Design

Sigue las guidelines de Material Design

Altamente Personalizable

Puedes personalizar cada parte del widget

Estructura Básica

leading
title
subtitle
trailing
Icono principal Contenido Acción

Sintaxis Básica:

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
  },
)

Propiedades Principales

leading

Widget que aparece al inicio (normalmente un Icon)

Icon CircleAvatar Image

title

Texto principal del tile (requerido)

Text RichText

subtitle

Texto secundario (opcional)

Text Row

trailing

Widget que aparece al final

Icon Switch Text

onTap

Función que se ejecuta al hacer tap

Function

enabled

Habilita o deshabilita el tile

true false

Ejemplos Básicos

ListTile Simple

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

Con Subtítulo

👤
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),
)

Con 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;
      });
    },
  ),
)

Usando ListTile en ListView

🏠
Inicio
⭐
Favoritos
📊
Estadísticas
⚙️
Configuración
ListView(
  children: [
    ListTile(
      leading: Icon(Icons.home),
      title: Text('Inicio'),
      onTap: () => navigateToHome(),
    ),
    ListTile(
      leading: Icon(Icons.star),
      title: Text('Favoritos'),
      onTap: () => navigateToFavorites(),
    ),
    ListTile(
      leading: Icon(Icons.analytics),
      title: Text('Estadísticas'),
      onTap: () => navigateToStats(),
    ),
    ListTile(
      leading: Icon(Icons.settings),
      title: Text('Configuración'),
      onTap: () => navigateToSettings(),
    ),
  ],
)

Creador de ListTile Interactivo

// El código se generará aquí

Personalización Avanzada

Colores Personalizados

🎨
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),
)

Forma y Elevación

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

Contenido Personalizado

⭐
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'),
)

Casos de Uso Comunes

📱 Menús de Navegación

Perfecto para drawers y menús de navegación con iconos y texto claros.

👥 Listas de Contactos

Ideal para mostrar contactos con avatares, nombres y información adicional.

⚙️ Pantallas de Configuración

Excelente para opciones de configuración con switches, iconos y descripciones.

📊 Listas de Datos

Perfecto para mostrar datos estructurados con múltiples líneas de información.

Mejores Prácticas

🎯 Usa subtítulos para información adicional

El subtítulo es ideal para emails, descripciones cortas o información secundaria.

📱 Mantén la consistencia

Usa el mismo estilo de leading y trailing en toda tu aplicación.

⚡ Implementa onTap

Siempre que sea posible, añade funcionalidad onTap para mejor UX.

🎨 Considera la densidad

Usa visualDensity para ajustar el espaciado según tus necesidades.

Ejercicios para Practicar

Ejercicio 1: Lista de Contactos

Crea una lista de contactos con avatar circular, nombre, email y botón de llamada.

Pista: Usa CircleAvatar en leading y IconButton en trailing

Ejercicio 2: Menú de Configuración

Crea un menú de configuración con diferentes tipos de trailing (switch, icon, text).

Pista: Combina Switch, Icon y Text en la propiedad trailing

Ejercicio 3: Lista con Estados

Crea una lista donde algunos items estén deshabilitados y otros tengan diferentes colores.

Pista: Usa las propiedades enabled y tileColor