목록에서 위젯 만들기

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 29번째.

항목마다 Text를 하나씩 작성하면 코드가 길어지고, 목록이 바뀌면 작동하지 않습니다. Dart에서는 목록 안에 for를 넣어 위젯을 만들 수 있습니다.

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

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

다음과 같이 읽으면 됩니다. colors에 있는 각 color마다 Text(color)를 추가합니다. 열에는 텍스트가 세 개 표시되며, 목록에 네 번째 색을 추가하면 네 번째 텍스트가 저절로 나타납니다.

챌린지

쉬움

열에는 처음 두 행성만 표시됩니다. 두 개의 Text 줄 대신 planets 목록을 순회하는 for 하나를 사용해 네 행성을 모두 순서대로 표시하세요.

직접 해보기

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