Widget dai dati con map

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

Il metodo map di una lista crea una nuova lista applicando una funzione a ogni elemento. È il modo in cui trasformi una lista di dati in una lista di widget:

ListView(
  children: books.map((book) => ListTile(title: Text(book.title))).toList(),
)

(book) => ListTile(...) è una funzione breve: prende un book e restituisce il riquadro dopo la freccia. map la chiama per ogni libro, nell'ordine.

map non restituisce ancora una List, quindi termina con .toList(): children: ha bisogno di una lista. Anche un for di una collezione svolge lo stesso compito. Usa quello che trovi più facile da leggere; nelle app reali vedrai entrambi.

map trasforma anche i dati in altri dati: books.map((book) => book.title).toList() è una List<String> dei titoli.

Sfida

Facile

L'elenco contiene cinque libri, ma sullo schermo vengono mostrate tre tessere scritte a mano. Sostituisci le tre tessere con books.map(...).toList(), così ogni libro avrà una tessera con il titolo e l'autore come sottotitolo.

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) {
    final List<Book> books = [
      Book('Dune', 'Frank Herbert'),
      Book('Emma', 'Jane Austen'),
      Book('Ulysses', 'James Joyce'),
      Book('Coraline', 'Neil Gaiman'),
      Book('Beloved', 'Toni Morrison'),
    ];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Books')),
        body: ListView(
          children: [
            ListTile(
              title: Text(books[0].title),
              subtitle: Text(books[0].author),
            ),
            ListTile(
              title: Text(books[1].title),
              subtitle: Text(books[1].author),
            ),
            ListTile(
              title: Text(books[2].title),
              subtitle: Text(books[2].author),
            ),
          ],
        ),
      ),
    );
  }
}

class Book {
  final String title;
  final String author;

  Book(this.title, this.author);
}