Menu
CoddyTech

Widgets a Partir de Dados com map

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 15 de 33.

O map de uma lista cria uma nova lista executando uma função em cada item. É assim que você transforma uma lista de dados em uma lista de widgets:

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

(book) => ListTile(...) é uma função curta: ela recebe um book e retorna o item após a seta. map a chama para cada livro, na ordem.

map ainda não retorna uma List, então termine com .toList(): children: precisa de uma lista. Um for de coleção faz o mesmo trabalho. Use o que achar mais fácil de ler; você verá ambos em aplicativos reais.

map também transforma dados em outros dados: books.map((book) => book.title).toList() é uma List<String> com os títulos.

challenge icon

Desafio

Fácil

A lista tem cinco livros, mas a tela mostra três blocos escritos à mão. Substitua os três blocos por books.map(...).toList(), para que cada livro tenha um bloco com seu título e seu autor como subtítulo.

Experimente você mesmo

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);
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Listas e telas

Pratique por conta própria: Compilador de Flutter online