Al principio y al final

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

Un ListTile tiene un espacio en cada extremo. leading: va antes del título, normalmente un avatar o un icono. trailing: va en el extremo de la fila, normalmente un icono o un texto breve, como una hora.

ListTile(
  leading: CircleAvatar(child: Text('AL')),
  title: Text('Ada Lovelace'),
  trailing: Icon(Icons.call),
)

El elemento lo alinea todo por ti: el widget inicial queda a la izquierda, el título y el subtítulo ocupan el centro, y el widget final se desplaza hasta el borde derecho. No escribes ningún Row ni ningún SizedBox.

Desafío

Fácil

La fila de Ada tiene un avatar con sus iniciales y un icono de teléfono. Haz lo mismo en las otras dos filas:

un leading: CircleAvatar con las iniciales AT y GH
un trailing: Icon(Icons.call)

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(
              leading: CircleAvatar(child: Text('AL')),
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
              trailing: Icon(Icons.call),
            ),
            ListTile(
              title: Text('Alan Turing'),
              subtitle: Text('+1 555 0102'),
            ),
            ListTile(
              title: Text('Grace Hopper'),
              subtitle: Text('+1 555 0103'),
            ),
          ],
        ),
      ),
    );
  }
}