Widgets de una lista

Parte de la sección Tu primera app del Journey de Flutter de Coddy. Lección 29 de 32.

Escribir un Text por elemento lleva mucho tiempo y deja de funcionar cuando cambia la lista. Dart puede crear los widgets por ti, con un for dentro de la lista:

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

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

Léelo así: por cada color en colors, agrega un Text(color). La columna obtiene tres textos y, si agregas un cuarto color a la lista, aparece un cuarto texto por sí solo.

Desafío

Fácil

La columna muestra solo los dos primeros planetas. Muestra los cuatro, en orden, con un for sobre la lista planets en lugar de las dos líneas Text.

Pruébalo tú mismo

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