Vorne und hinten

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 3 von 33.

Ein ListTile hat an jedem Ende einen Platz. leading: steht vor dem Titel, normalerweise für einen Avatar oder ein Symbol. trailing: steht ganz am Ende der Zeile, normalerweise für ein Symbol oder einen kurzen Text wie eine Uhrzeit.

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

Die Kachel richtet alles für dich aus: Das führende Widget steht links, Titel und Untertitel füllen die Mitte, und das abschließende Widget wird an den rechten Rand geschoben. Du brauchst weder eine Row noch eine SizedBox.

Aufgabe

Einfach

Adas Zeile hat einen Avatar mit ihren Initialen und ein Telefonsymbol. Gib den beiden anderen Zeilen dasselbe:

ein leading: CircleAvatar mit den Initialen AT und GH
ein trailing: Icon(Icons.call)

Probier es selbst

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