ListTile

ListTile en Flutter: El ladrillo de tus listas

El widget ListTile es como el ladrillo fundamental para construir listas en Flutter. Es un elemento visual que típicamente contiene:

• Un icono: Puede ir a la izquierda (leading) o a la derecha (trailing) del texto principal.
• Un título: El texto principal del elemento de la lista.
• Un subtítulo: Un texto secundario que complementa al título.

¿Para qué sirve?

Imagina que estás creando una aplicación de contactos. Cada contacto podría representarse como un ListTile, con una imagen de perfil como icono, el nombre como título y el número de teléfono como subtítulo.

Estructura básica:

Dart

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage('https://i.pravatar.cc/300'),
  ),
  title: Text('John Doe'),
  subtitle: Text('johndoe@example.com'),
)

Personalización:

• isThreeLine: Permite mostrar hasta tres líneas de texto.
• dense: Reduce el espacio entre los elementos para listas más compactas.
• enabled: Habilita o deshabilita la interacción con el ListTile.
• onTap: Define una función que se ejecuta cuando se hace tap en el elemento.
• onLongPress: Define una función que se ejecuta cuando se mantiene pulsado el elemento.

Ejemplo más completo:

Dart

import 'package:flutter/material.dart';

class Contact {
  final String name;
  final String email;
  final String imageUrl;

  Contact(this.name, this.email, this.imageUrl);
}

List<Contact> contacts = [
  Contact('John Doe', 'johndoe@example.com', 'https://i.pravatar.cc/300'),
  // ... más contactos
];

ListView.builder(
  itemCount: contacts.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(contacts[index].imageUrl),
      ),
      title: Text(contacts[index].name),
      subtitle:    Text(contacts[index].email),
      onTap: () {
        // Aquí puedes definir la acción al tocar un contacto
        print('Contact tapped: ${contacts[index].name}');
      },
    );
  },
)

¿Cuándo usar ListTile?

• Listas simples: Para mostrar listas de elementos con una estructura básica.
• Menús: Para crear elementos de menú con iconos y texto.
• Elementos de una tarjeta: Para organizar la información dentro de una tarjeta.

Combinando ListTile con otros widgets:

• ListView: Para crear listas desplazables.
• Drawer: Para crear menús laterales.
• ExpansionTile: Para crear elementos expandibles.

En resumen:

ListTile es un widget versátil que te permite crear elementos de lista personalizados y atractivos. Al comprender sus propiedades y combinarlo con otros widgets, podrás construir interfaces de usuario más ricas y dinámicas en tus aplicaciones Flutter.