Crear listas con diferentes tipos de elementos

Cómo implementar una lista que contenga diferentes tipos de recursos (assets).

Es posible que necesites crear listas que muestren diferentes tipos de contenido. Por ejemplo, podrías estar trabajando en una lista que muestra un encabezado seguido de algunos elementos relacionados con el encabezado, seguido de otro encabezado, y así sucesivamente.

Así es como puedes crear una estructura de este tipo con Flutter:

Crear una fuente de datos con diferentes tipos de elementos.
Convertir la fuente de datos en una lista de widgets.

Para representar diferentes tipos de elementos en una lista, define una clase para cada tipo de elemento.

En este ejemplo, crea una aplicación que muestre un encabezado seguido de cinco mensajes. Por lo tanto, crea tres clases: ListItem, HeadingItem, y MessageItem.

dart

/// The base class for the different types of items the list can contain.
abstract class ListItem {
  /// The title line to show in a list item.
  Widget buildTitle(BuildContext context);

  /// The subtitle line, if any, to show in a list item.
  Widget buildSubtitle(BuildContext context);
}

/// A ListItem that contains data to display a heading.
class HeadingItem implements ListItem {
  final String heading;

  HeadingItem(this.heading);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(heading, style: Theme.of(context).textTheme.headlineSmall);
  }

  @override
  Widget buildSubtitle(BuildContext context) => const SizedBox.shrink();
}

/// A ListItem that contains data to display a message.
class MessageItem implements ListItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}

La mayoría de las veces, obtendrías datos de internet o de una base de datos local y convertirías esos datos en una lista de elementos.

Para este ejemplo, genera una lista de elementos para trabajar. La lista contiene un encabezado seguido de cinco mensajes. Cada mensaje tiene uno de los 3 tipos: ListItem, HeadingItem o MessageItem.

dart

final items = List<ListItem>.generate(
  1000,
  (i) => i % 6 == 0
      ? HeadingItem('Heading $i')
      : MessageItem('Sender $i', 'Message body $i'),
);

Para convertir cada elemento en un widget, usa el constructor ListView.builder().

En general, proporciona una función builder que verifique con qué tipo de elemento estás tratando y devuelva el widget apropiado para ese tipo de elemento.

dart

ListView.builder(
  // Let the ListView know how many items it needs to build.
  itemCount: items.length,
  // Provide a builder function. This is where the magic happens.
  // Convert each item into a widget based on the type of item it is.
  itemBuilder: (context, index) {
    final item = items[index];

    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
)

¿Te resultó útil el contenido de esta página?

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.

Crear listas con diferentes tipos de elementos

1. Crear una fuente de datos con diferentes tipos de elementos

Tipos de elementos

Crear una lista de elementos

2. Convertir la fuente de datos en una lista de widgets

Ejemplo interactivo