Widgets From a List

Part of the Your First App section of Coddy's Flutter journey. Lesson 29 of 32.

Writing one Text per item gets long, and it breaks when the list changes. Dart can build the widgets for you, with a for inside the list:

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

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

Read it as: for each color in colors, add a Text(color). The column gets three texts, and if you add a fourth color to the list, a fourth text appears on its own.

Challenge

Easy

The column shows only the first two planets. Show all four, in order, with one for over the planets list instead of the two Text lines.

Try it yourself

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