Elementy listy

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

Większość wierszy na liście wygląda podobnie: główny wiersz, czasem mniejszy wiersz pod nim, być może ikona na każdym końcu. ListTile to gotowy wiersz o odpowiednich rozmiarach i odstępach.

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

title to główny wiersz. subtitle znajduje się pod nim, jest mniejszy i ma delikatniejszy kolor. Oba przyjmują widget, zwykle Text.

ListTile ma taką samą szerokość jak lista i zwiększa wysokość, aby pomieścić dwa wiersze, gdy ma podtytuł. Umieść kilka takich elementów w ListView, a otrzymasz listę kontaktów.

Wyzwanie

Łatwy

Wiersz Ady jest już elementem ListTile. Zamień dwa pozostałe teksty na kafelki takie jak jej:

Alan Turing z podtytułem +1 555 0102
Grace Hopper z podtytułem +1 555 0103

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