Elementi dell’elenco

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 2 di 33.

La maggior parte delle righe di un elenco si assomiglia: una riga principale, a volte una riga più piccola sotto, magari un’icona a ciascuna estremità. ListTile è quella riga, già pronta, con dimensioni e spaziatura adeguate.

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

title è la riga principale. subtitle va sotto, più piccolo e con un colore più tenue. Entrambi accettano un widget, di solito un Text.

Un ListTile è largo quanto il suo elenco e si espande per contenere due righe quando ha un sottotitolo. Inseriscine diversi in un ListView e avrai un elenco di contatti.

Sfida

Facile

La riga di Ada è già un ListTile. Trasforma gli altri due testi in riquadri come il suo:

Alan Turing con il sottotitolo +1 555 0102
Grace Hopper con il sottotitolo +1 555 0103

Provalo tu

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