יצירת Widgets מנתונים באמצעות 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);
}