map으로 데이터에서 위젯 만들기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 15번째.

목록의 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);
}