Tạo widget từ dữ liệu bằng map

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 15 trên 33.

Phương thức map của một danh sách tạo danh sách mới bằng cách chạy một hàm trên từng phần tử. Đây là cách chuyển danh sách dữ liệu thành danh sách widget:

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

(book) => ListTile(...) là một hàm ngắn: hàm nhận một book và trả về ô sau mũi tên. map gọi hàm này cho từng cuốn sách theo thứ tự.

map chưa trả về một List, nên hãy kết thúc bằng .toList(): children: cần một danh sách. Vòng lặp for trong tập hợp cũng làm được việc tương tự. Bạn có thể dùng cách nào dễ đọc hơn; bạn sẽ thấy cả hai cách trong các ứng dụng thực tế.

map cũng chuyển dữ liệu thành dạng dữ liệu khác: books.map((book) => book.title).toList() là một List<String> chứa các tiêu đề sách.

Thử thách

Dễ

Danh sách có năm cuốn sách, nhưng màn hình hiển thị ba ô được viết thủ công. Thay ba ô đó bằng books.map(...).toList() để mỗi cuốn sách có một ô với tiêu đề và tên tác giả làm phụ đề.

Tự làm thử

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