Início e fim

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 3 de 33.

Um ListTile tem um espaço em cada extremidade. leading: fica antes do título, geralmente com um avatar ou um ícone. trailing: fica na extremidade da linha, geralmente com um ícone ou um texto curto, como um horário.

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

O bloco alinha tudo para você: o widget inicial fica à esquerda, o título e o subtítulo ocupam o meio, e o widget final é levado até a borda direita. Você não precisa escrever nenhum Row nem SizedBox.

Desafio

Fácil

A linha de Ada tem um avatar com as iniciais dela e um ícone de telefone. Faça o mesmo nas outras duas linhas:

um leading: CircleAvatar com as iniciais AT e GH
um trailing: Icon(Icons.call)

Experimente você mesmo

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