Widgets aus Daten mit map

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 15 von 33.

Das map einer Liste erstellt eine neue Liste, indem es eine Funktion auf jedes Element anwendet. So wandelst du eine Liste mit Daten in eine Liste mit Widgets um:

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

(book) => ListTile(...) ist eine kurze Funktion: Sie nimmt ein book entgegen und gibt nach dem Pfeil das Kachel-Element zurück. map ruft sie der Reihe nach für jedes Buch auf.

map gibt noch keine List zurück, daher musst du mit .toList() abschließen: children: benötigt eine Liste. Eine Collection-for-Schleife erfüllt dieselbe Aufgabe. Verwende die Variante, die du leichter lesen kannst; in echten Apps wirst du beide sehen.

map wandelt Daten auch in andere Daten um: books.map((book) => book.title).toList() ist eine List<String> mit den Titeln.

Aufgabe

Einfach

Die Liste enthält fünf Bücher, aber auf dem Bildschirm werden drei von Hand geschriebene Kacheln angezeigt. Ersetze die drei Kacheln durch books.map(...).toList(), sodass jedes Buch eine Kachel mit seinem Titel und seinem Autor als Untertitel erhält.

Probier es selbst

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