플러터 children과 child의 차이점

플러터 flutter 다이어그램

플러터에서 UI를 구성할 때 위젯들을 조합하는 과정에서 자주 마주치게 되는 두 가지 매개변수가 있습니다. 바로 'child'와 'children'입니다. 이 두 매개변수는 위젯의 자식 요소를 정의하는 방식에서 명확한 차이가 있습니다.

 

child와 children의 핵심 차이

child

child는 단일 위젯만을 자식으로 받는 매개변수입니다. 한 개의 위젯만 포함할 수 있으며, 주로 Container, Center, Padding 등과 같은 기본 위젯에서 사용됩니다.

Container(
  color: Colors.blue,
  child: Text("단일 위젯"),
)

 

 

child를 사용하는 대표적인 위젯들:

• Container
• Center
• Padding
• SizedBox
• Card
• Scaffold (body, appBar 등의 속성에서)

 

children

children은 여러 위젯을 리스트 형태로 포함할 수 있는 매개변수입니다. 복수의 위젯을 배치할 때 사용되며, Column, Row, Stack, ListView와 같은 복합 위젯에서 주로 사용됩니다.

Column(
  children: [
    Text("첫 번째 위젯"),
    Icon(Icons.star),
    Container(
      color: Colors.red,
      height: 50,
      width: 50,
    ),
  ],
)

 

 

children을 사용하는 대표적인 위젯들:

• Column
• Row
• Stack
• ListView
• GridView
• Wrap

 

실제 사용 예시

child 사용 예시

Center 위젯은 단일 자식만 가질 수 있으므로 child를 사용합니다:

Center(
  child: Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 24),
  ),
)

 

 

 

children 사용 예시

Row 위젯은 여러 자식을 가로로 배치할 수 있으므로 children을 사용합니다:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Icon(Icons.phone),
    Icon(Icons.message),
    Icon(Icons.contact_mail),
  ],
)

 

 

 

위젯 실험용 템플릿

아래는 Flutter의 기본 템플릿으로, child와 children을 모두 사용하는 예제입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter child vs children'),
        ),
        body: Center(
          child: Column(  // Column은 children을 사용
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(  // Container는 child를 사용
                color: Colors.blue,
                padding: EdgeInsets.all(20),
                child: Text(
                  'child 예시',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              SizedBox(height: 20),
              Row(  // Row는 children을 사용
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.star, color: Colors.amber),
                  SizedBox(width: 10),
                  Text('children 예시'),
                  SizedBox(width: 10),
                  Icon(Icons.star, color: Colors.amber),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

 

 

이 템플릿은 MaterialApp과 Scaffold를 사용하여 기본 앱 구조를 만들고, Center 위젯 안에 Column을 배치하여 여러 위젯을 세로로 정렬합니다. Column 내부에는 Container와 Row를 배치하여 각각 child와 children의 사용 예를 보여줍니다.

 

[Flutter] 플러터 children과 child의 차이점

 

Flutter 다수의 자식을 갖는 위젯 총정리: Column부터 ListView까지