Item Daftar

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

Sebagian besar baris dalam list terlihat serupa: ada baris utama, terkadang baris yang lebih kecil di bawahnya, dan mungkin ikon di setiap ujungnya. ListTile adalah baris seperti itu, siap digunakan, dengan ukuran dan padding yang tepat.

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

title adalah baris utama. subtitle berada di bawahnya, dengan ukuran lebih kecil dan warna yang lebih lembut. Keduanya menerima widget, biasanya Text.

Lebar ListTile mengikuti lebar list-nya dan bertambah tinggi agar muat dua baris jika memiliki subtitle. Masukkan beberapa ListTile ke dalam ListView dan kamu akan mendapatkan daftar kontak.

Tantangan

Mudah

Baris Ada sudah berupa ListTile. Ubah dua teks lainnya menjadi tile seperti miliknya:

Alan Turing dengan subtitle +1 555 0102
Grace Hopper dengan subtitle +1 555 0103

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