Baş ve Son

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 3 / 33.

Bir ListTile'ın her iki ucunda birer yuvası vardır. leading: başlıktan önce gelir; genellikle bir avatar ya da simgedir. trailing: satırın en ucunda yer alır; genellikle bir simge ya da saat gibi kısa bir metindir.

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

Karo, her şeyi senin için hizalar: leading bileşeni solda, başlık ve alt başlık ortada yer alır, trailing bileşeni ise sağ kenara itilir. Row ya da SizedBox yazmana gerek yok.

Görev

Kolay

Ada'nın satırında baş harflerini gösteren bir avatar ve telefon simgesi var. Diğer iki satıra da aynısını ekle:

AT ve GH baş harflerini içeren bir leading: CircleAvatar
bir trailing: Icon(Icons.call)

Kendin dene

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