Widget từ danh sách

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 29 trên 32.

Viết một Text cho mỗi phần tử sẽ khiến đoạn code dài và bị lỗi khi danh sách thay đổi. Dart có thể tạo các widget giúp bạn bằng cách đặt for bên trong danh sách:

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

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

Hãy đọc như sau: với mỗi color trong colors, thêm một Text(color). Cột sẽ có ba phần tử văn bản. Nếu bạn thêm màu thứ tư vào danh sách, một phần tử văn bản thứ tư sẽ tự xuất hiện.

Thử thách

Dễ

Cột chỉ hiển thị hai hành tinh đầu tiên. Hãy hiển thị cả bốn hành tinh theo đúng thứ tự, dùng một vòng lặp for duyệt qua danh sách planets thay cho hai dòng Text.

Tự làm thử

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