Początek i koniec

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 3 z 33.

Element ListTile ma miejsce na każdym końcu. leading: znajduje się przed tytułem, zwykle jest to awatar lub ikona. trailing: znajduje się na samym końcu wiersza, zwykle jest to ikona lub krótki tekst, na przykład godzina.

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

Element sam wszystko wyrównuje: widżet leading znajduje się po lewej stronie, tytuł i podtytuł wypełniają środek, a widżet trailing jest przesunięty do prawej krawędzi. Nie musisz pisać Row ani SizedBox.

Wyzwanie

Łatwy

Wiersz Ady zawiera awatar z jej inicjałami i ikonę telefonu. Zrób to samo w pozostałych dwóch wierszach:

leading: z CircleAvatar zawierającym inicjały AT i GH
trailing: z Icon(Icons.call)

Spróbuj swoich sił

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