Éléments de liste

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

La plupart des lignes d’une liste se ressemblent : une ligne principale, parfois une ligne plus petite en dessous, et peut-être une icône à chaque extrémité. ListTile est cette ligne, déjà prête, avec les bonnes dimensions et les bons espacements intérieurs.

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

Le title est la ligne principale. Le subtitle se place en dessous, dans une taille plus petite et une couleur plus douce. Les deux prennent un widget, généralement un Text.

Un ListTile est aussi large que sa liste et s’agrandit pour afficher deux lignes lorsqu’il a un sous-titre. Place-en plusieurs dans un ListView et tu obtiens une liste de contacts.

Défi

Facile

La ligne d’Ada est déjà une ListTile. Transforme les deux autres textes en éléments comme le sien :

Alan Turing avec le sous-titre +1 555 0102
Grace Hopper avec le sous-titre +1 555 0103

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