[Flutter] Basic Widget 기본 개념 (Child와 Children)

플러터는 위젯 아래에 계속 위젯이 입력되는 형태로 '위젯 트리'를 구성하며 UI를 제작함

`child`파라미터와 `children`파라미터는 위젯에 하위 위젯을 추가할 때 사용함.

• `child`파라미터 : 위젯 하나만 추가 가능
• `children`파라미터 : 위젯 여러개 추가 가능

대부분의 위젯은 `child` 또는 `children` 파라미터 하나만 제공함. 두개의 파라미터를 동시에 입력받는 위젯은 존재하지 않음.

아래 코드에서 `child`와 `children`파라미터의 차이를 알아보겠음

// child 사용
import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          // 하나의 위젯만 가능
          child: Text("Lee Doseo"),
        ),
      ),
    ),
  );
}

child사용 화면

---

`child`파라미터에는 단 하나의 위젯만 입력할 수 있음. `Center`위젯은 `child`파라미터에 입력된 위젯을 가운데 정렬해주는 기능을 갖고 있기 떄문에 `Text`위젯을 가운데 정렬해줌.

---

반면 `children`파라미터는 여러 위젯을 리스트에 입력할 수 있음.

위젯을 세로로 배치할 수 있는 위젯인 `Column`위젯을 사용하여 `children`파라미터를 보겠음

import "package:flutter/material.dart";

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
          
          // 여러 위젯을 Column 위젯에 입력 가능
            children: [
              Text("Lee"),
              Text("Doseo"),
            ],
          ),
        ),
      ),
    ),
  );
}

Children사용 화면

---

`children`파라미터는 리스트를 입력받고 리스트 안에는 원하는 만큼 위젯을 입력할 수 있음. "Lee"라는 글자를 입력한 `Text`위젯으 먼저 입력됐고, 이어서 "Doseo"가 입력된 `Text`위젯이 입력됐으니 2행에 걸쳐 "Lee Doseo"라는 글자가 화면에 그려진 것임

 

https://github.com/Leedoseo/Flutter_WidgetStudy

GitHub - Leedoseo/Flutter_WidgetStudy

 

출처 : 코드팩토리의 플러터 프로그래밍