Bagian Awal dan Akhir

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 3 dari 33.

ListTile memiliki slot di setiap ujungnya. leading: berada sebelum judul, biasanya avatar atau ikon. trailing: berada di ujung baris, biasanya ikon atau teks pendek seperti waktu.

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

tile mengatur semuanya agar sejajar untukmu: widget leading berada di sebelah kiri, judul dan subtitle mengisi bagian tengah, lalu widget trailing didorong ke tepi kanan. Kamu tidak perlu menulis Row atau SizedBox.

Tantangan

Mudah

Baris Ada memiliki avatar dengan inisialnya dan ikon telepon. Buat dua baris lainnya sama seperti itu:

leading: berupa CircleAvatar dengan inisial AT dan GH
trailing: berupa Icon(Icons.call)

Coba sendiri

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