Inizio e fine

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 3 di 33.

Un ListTile ha uno spazio a ciascuna estremità. leading: va prima del titolo, di solito un avatar o un'icona. trailing: va all'estremità della riga, di solito un'icona o un breve testo, come un orario.

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

La tessera allinea ogni elemento al posto giusto: il widget iniziale si trova a sinistra, il titolo e il sottotitolo occupano la parte centrale e il widget finale viene spinto verso il bordo destro. Non scrivi né una Row né un SizedBox.

Sfida

Facile

La riga di Ada ha un avatar con le sue iniziali e un'icona del telefono. Aggiungi lo stesso alle altre due righe:

un leading: CircleAvatar con le iniziali AT e GH
un trailing: Icon(Icons.call)

Provalo tu

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