Début et fin

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 3 sur 33.

Un ListTile dispose d’un emplacement à chaque extrémité. leading: se place avant le titre, généralement avec un avatar ou une icône. trailing: se place à l’extrémité opposée de la ligne, généralement avec une icône ou un texte court, comme une heure.

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

L’élément aligne tout pour toi : le composant de début se place à gauche, le titre et le sous-titre occupent le milieu, et le composant de fin est repoussé jusqu’au bord droit. Tu n’as besoin d’écrire ni Row ni SizedBox.

Défi

Facile

La ligne d’Ada comporte un avatar avec ses initiales et une icône de téléphone. Ajoute la même chose aux deux autres lignes :

un leading: CircleAvatar avec les initiales AT et GH
un trailing: Icon(Icons.call)

Essayez vous-même

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