Itens da lista

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

A maioria das linhas de uma lista é parecida: uma linha principal, às vezes uma linha menor abaixo dela, talvez um ícone em cada extremidade. ListTile é essa linha, pronta para usar, com os tamanhos e o espaçamento adequados.

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

O title é a linha principal. O subtitle fica abaixo dela, menor e em uma cor mais suave. Ambos recebem um widget, geralmente um Text.

Um ListTile tem a mesma largura que sua lista e cresce para caber em duas linhas quando tem um subtítulo. Coloque vários em um ListView e você terá uma lista de contatos.

Desafio

Fácil

A linha de Ada já é um ListTile. Transforme os outros dois textos em itens como o dela:

Alan Turing com o subtítulo +1 555 0102
Grace Hopper com o subtítulo +1 555 0103

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(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}