Elementos de lista

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 2 de 33.

La mayoría de las filas de una lista son parecidas: una línea principal, a veces una línea más pequeña debajo y quizá un icono en cada extremo. ListTile es esa fila, lista para usar, con el tamaño y el relleno adecuados.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

title es la línea principal. subtitle va debajo, en un tamaño más pequeño y con un color más tenue. Ambos reciben un widget, normalmente un Text.

Un ListTile tiene el mismo ancho que su lista y crece para ajustarse a dos líneas cuando tiene un subtítulo. Coloca varios en un ListView y tendrás una lista de contactos.

Desafío

Fácil

La fila de Ada ya es un ListTile. Convierte los otros dos textos en elementos como el suyo:

Alan Turing con el subtítulo +1 555 0102
Grace Hopper con el subtítulo +1 555 0103

Pruébalo tú mismo

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}