mapでデータからウィジェットを作る

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 15/33。

リストのmapは、各アイテムに関数を実行して新しいリストを作ります。データのリストをウィジェットのリストに変換する方法です。

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

(book) => ListTile(...)は短い関数です。1つのbookを受け取り、矢印の後にあるタイルを返します。mapは各本に対して、順番にこの関数を呼び出します。

mapはまだListを返さないので、最後に.toList()を付けます。children:にはリストが必要です。コレクションforでも同じことができます。読みやすいと思うほうを使ってください。実際のアプリではどちらも使われています。

mapはデータを別のデータに変換することもできます。books.map((book) => book.title).toList()は、タイトルのList<String>です。

チャレンジ

簡単

リストには5冊の本がありますが、画面には手書きで作成されたタイルが3つ表示されています。この3つのタイルを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);
}