[flutter] 플러터 Column에서의 크기 조절 및 공백 처리 방법

20 Dec 2023

flutter

플러터에서 Column을 사용할 때, 자식 위젯들의 크기 조절과 간격을 관리하는 것은 매우 중요합니다. 이 글에서는 Column에서의 크기 및 간격을 조절하는 방법을 알아보겠습니다.

1. 자식 위젯의 크기 조절

Column 내부의 자식 위젯의 크기를 조절하는 방법은 간단합니다. 각 자식 위젯에 Expanded나 Flexible 위젯을 사용하여 해당 자식 위젯이 차지할 수 있는 공간을 설정할 수 있습니다.

예를 들어, 다음은 세 개의 자식 위젯이 있고 각각의 크기를 설정하는 예시입니다.

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.green,
        height: 100,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

2. 자식 위젯 간 간격 조절

Column 내의 자식 위젯들 간의 간격을 조절하는 가장 간단한 방법은 SizedBox나 Container를 이용하여 공백을 넣는 것입니다. 또한, mainAxisAlignment 속성을 사용하여 자식 위젯들의 정렬을 조절할 수도 있습니다.

아래의 예시는 자식 위젯 간에 동일한 간격을 주는 방법입니다.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 100,
    ),
    Container(
      color: Colors.green,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      height: 100,
    ),
  ],
)

요약

플러터 Column에서 자식 위젯의 크기와 간격을 조절하는 방법에 대해 알아보았습니다. Expanded와 Flexible을 사용하여 자식 위젯의 크기를 조절하고, SizedBox나 Container를 사용하여 자식 위젯 사이의 간격을 조절할 수 있습니다. 이를 통해 보다 유연하고 예측 가능한 레이아웃을 만들 수 있습니다.

참고 문서: Flutter 공식 문서