Créer des widgets à partir de données avec map

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 15 sur 33.

Le map d’une liste crée une nouvelle liste en appliquant une fonction à chaque élément. C’est ainsi que tu transformes une liste de données en une liste de widgets :

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

(book) => ListTile(...) est une fonction courte : elle prend un book et renvoie la tuile après la flèche. map l’appelle pour chaque livre, dans l’ordre.

map ne renvoie pas encore une List, alors termine par .toList() : children: a besoin d’une liste. Un for de collection fait la même chose. Utilise celui que tu trouves le plus facile à lire ; tu verras les deux dans de vraies applications.

map transforme aussi des données en d’autres données : books.map((book) => book.title).toList() est une List<String> contenant les titres.

Défi

Facile

La liste contient cinq livres, mais l’écran affiche trois tuiles écrites à la main. Remplace les trois tuiles par books.map(...).toList(), afin que chaque livre ait une tuile avec son titre et son auteur en sous-titre.

Essayez vous-même

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);
}