Widget da un elenco

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 29 di 32.

Scrivere un Text per elemento diventa lungo e il codice smette di funzionare quando l’elenco cambia. Dart può creare i widget per te, con un for all’interno dell’elenco:

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

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

Leggilo così: per ogni color in colors, aggiungi un Text(color). La colonna contiene tre testi e, se aggiungi un quarto colore all’elenco, compare automaticamente un quarto testo.

Sfida

Facile

La colonna mostra solo i primi due pianeti. Mostrali tutti e quattro, nell'ordine, con un for sull'elenco planets invece delle due righe Text.

Provalo tu

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