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

플러터 flutter 다이어그램

Flutter에서는 여러 자식 위젯을 효율적으로 배치하기 위한 다양한 위젯을 제공합니다. 이러한 위젯들은 UI 구성의 기본 요소로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해 줍니다.

Row와 Column 위젯

Column 위젯

Column 위젯은 자식 위젯들을 세로 방향으로 배치합니다. 주축은 세로축이고, 교차축은 가로축입니다.

Column(
  children: [
    Text("첫 번째 텍스트"),
    Text("두 번째 텍스트"),
    Text("세 번째 텍스트"),
  ],
)

 

Row 위젯

Row 위젯은 자식 위젯들을 가로 방향으로 배치합니다. 주축은 가로축이고, 교차축은 세로축입니다.

Row(
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

 

 

정렬 속성

MainAxisAlignment

주축(Row의 경우 가로, Column의 경우 세로)에서의 정렬 방식을 설정합니다:

• MainAxisAlignment.start: 시작점에 정렬
• MainAxisAlignment.center: 중앙에 정렬
• MainAxisAlignment.end: 끝점에 정렬
• MainAxisAlignment.spaceBetween: 첫 위젯과 마지막 위젯은 양 끝에 배치하고 나머지는 균등 간격으로 배치
• MainAxisAlignment.spaceAround: 모든 위젯 주변에 균등한 공간 배치(양 끝은 절반 공간)
• MainAxisAlignment.spaceEvenly: 모든 위젯 사이와 양 끝에 균등한 공간 배치

CrossAxisAlignment

교차축(Row의 경우 세로, Column의 경우 가로)에서의 정렬 방식을 설정합니다:

• CrossAxisAlignment.start: 시작점에 정렬
• CrossAxisAlignment.center: 중앙에 정렬(기본값)
• CrossAxisAlignment.end: 끝점에 정렬
• CrossAxisAlignment.stretch: 교차축을 따라 위젯을 최대한 늘림

 

크기 조절 위젯

Expanded 위젯

Expanded 위젯은 Row나 Column 내에서 가능한 모든 공간을 차지하도록 자식 위젯을 확장합니다. flex 속성으로 공간 비율을 조정할 수 있습니다.

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(color: Colors.green),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.yellow),
    ),
  ],
)

 

 

Flexible 위젯

Flexible 위젯은 Expanded와 유사하지만, 자식이 필요한 공간만큼만 차지하도록 합니다. 남은 공간이 있을 때만 확장됩니다.

 

기타 다중 자식 위젯

Stack 위젯

Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치합니다. 마지막에 추가된 위젯이 가장 위에 표시됩니다.

ListView 위젯

ListView는 스크롤 가능한 목록을 만들 때 사용됩니다. 화면에 표시되지 않는 항목은 메모리에서 제거되어 효율적입니다.

ListView(
  children: [
    ListTile(title: Text("아이템 1")),
    ListTile(title: Text("아이템 2")),
    ListTile(title: Text("아이템 3")),
  ],
)

 

 

Flutter의 다중 자식 위젯들은 복잡한 UI를 구현하는 데 필수적인 도구입니다. Row와 Column을 기본으로 하여 다양한 정렬 속성과 크기 조절 위젯을 조합하면 거의 모든 레이아웃을 구현할 수 있습니다.

 

마무리

Flutter의 다중 자식 위젯들은 복잡한 UI를 구현하는 데 필수적인 요소입니다. Column과 Row를 통해 세로와 가로 방향으로 레이아웃을 구성하고, Flexible과 Expanded를 사용하여 공간을 효율적으로 관리할 수 있습니다. Stack은 겹치는 레이아웃을 쉽게 구현하며, ListView는 스크롤 가능한 리스트를 제공합니다. 이러한 위젯들을 적절히 활용하면 사용자 친화적인 인터페이스를 개발할 수 있습니다.

 

[Flutter] 플러터 다수의 자식을 갖는 대표적인 위젯

 

Flutter의 단일 자식 위젯 총정리