Menu
CoddyTech

Widgets a partir de uma lista

Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 29 de 32.

Escrever um Text para cada item fica demorado e deixa de funcionar quando a lista muda. O Dart pode criar os widgets para você, com um for dentro da lista:

List<String> colors = ['red', 'green', 'blue'];

Column(
  children: [
    for (String color in colors) Text(color),
  ],
)

Leia assim: para cada color em colors, adicione um Text(color). A coluna recebe três textos e, se você adicionar uma quarta cor à lista, um quarto texto aparece automaticamente.

challenge icon

Desafio

Fácil

A coluna mostra apenas os dois primeiros planetas. Mostre os quatro, em ordem, usando um for sobre a lista planets em vez das duas linhas Text.

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) {
    List<String> planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(planets[0]),
              Text(planets[1]),
            ],
          ),
        ),
      ),
    );
  }
}
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 Seu primeiro app

Pratique por conta própria: Compilador de Flutter online