Виджеты из данных с помощью map

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 15 из 33.

Метод map списка создаёт новый список, применяя функцию к каждому элементу. Так список данных превращается в список виджетов:

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

(book) => ListTile(...) — это короткая функция: она принимает один book и возвращает плитку после стрелки. map вызывает её для каждой книги по порядку.

map пока не возвращает List, поэтому завершите вызов методом .toList(): для children: нужен список. Цикл коллекции for выполняет ту же задачу. Используйте тот вариант, который вам легче читать; в настоящих приложениях встречаются оба.

map также преобразует данные в другие данные: books.map((book) => book.title).toList() — это List<String> с названиями книг.

Задание

Легко

В списке пять книг, но на экране отображаются три плитки, написанные вручную. Замени три плитки на books.map(...).toList(), чтобы для каждой книги отображалась плитка с её названием и автором в качестве подзаголовка.

Попробуйте сами

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