Widget dari Data dengan map

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 15 dari 33.

map pada list membuat list baru dengan menjalankan fungsi pada setiap item. Dengan cara ini, kamu mengubah list data menjadi list widget:

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

(book) => ListTile(...) adalah fungsi singkat: fungsi ini menerima satu book dan mengembalikan tile setelah tanda panah. map memanggilnya untuk setiap book, secara berurutan.

map belum mengembalikan List, jadi akhiri dengan .toList(): children: membutuhkan list. Collection for melakukan hal yang sama. Gunakan cara yang menurutmu lebih mudah dibaca. Kamu akan melihat keduanya di aplikasi nyata.

map juga mengubah data menjadi data lain: books.map((book) => book.title).toList() adalah List<String> yang berisi judul-judulnya.

Tantangan

Mudah

Daftar ini memiliki lima buku, tetapi layar menampilkan tiga ubin yang ditulis secara manual. Ganti ketiga ubin tersebut dengan books.map(...).toList(), sehingga setiap buku memiliki ubin dengan judul dan penulisnya sebagai subtitel.

Coba sendiri

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