Flutter의 레이아웃 위젯 : Row, Column, Stack 위젯 완벽 가이드

728x90

들어가기 전에

Flutter는 다양한 위젯을 이용해 효율적이고 유연한 레이아웃을 구성할 수 있는 강력한 시스템을 제공합니다. 그중에서도 Row, Column, Stack은 가장 기본적이면서도 자주 사용되는 레이아웃 위젯입니다. 이 세 가지 위젯을 이해하면, 복잡한 레이아웃도 쉽게 구현할 수 있습니다. 이 글에서는 Row, Column, Stack의 개념과 주요 속성, 그리고 실전에서의 활용 방법을 자세히 다뤄보겠습니다.

Row와 Column: 수평과 수직 정렬

Row와 Column은 Flutter에서 각각 수평과 수직으로 위젯들을 배치할 때 사용하는 위젯입니다. 이 두 위젯은 자식 위젯들을 일렬로 배치하는 역할을 하며, 다양한 속성을 통해 배치 방식을 세부적으로 조정할 수 있습니다.

Row

Row는 자식 위젯들을 수평으로 배치합니다. 여러 위젯을 가로로 나열하고 싶을 때 사용하며, 자주 사용하는 속성으로는 mainAxisAlignment와 crossAxisAlignment가 있습니다.

mainAxisAlignment: 주축(가로) 방향에서 위젯들의 배치 방식을 설정합니다.
- MainAxisAlignment.start: 왼쪽 정렬
- MainAxisAlignment.center: 가운데 정렬
- MainAxisAlignment.end: 오른쪽 정렬
- MainAxisAlignment.spaceBetween: 위젯들 사이에 동일한 간격을 배치
- MainAxisAlignment.spaceAround: 위젯들 사이와 양 끝에 일정한 간격을 부여
- MainAxisAlignment.spaceEvenly: 위젯들 사이와 양 끝에 동일한 간격을 부여

crossAxisAlignment: 반대 축(세로) 방향에서의 정렬 방식을 설정합니다.
- CrossAxisAlignment.start: 상단 정렬
- CrossAxisAlignment.center: 가운데 정렬
- CrossAxisAlignment.end: 하단 정렬
- CrossAxisAlignment.stretch: 세로로 최대 크기 확장

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star_border, size: 50),
    Icon(Icons.star_half, size: 50),
  ],
)

Column

Column은 자식 위젯들을 수직으로 배치합니다. 화면을 위아래로 나눠 위젯을 배치하고 싶을 때 사용하며, Row와 동일한 mainAxisAlignment와 crossAxisAlignment 속성을 가지고 있습니다. 단, 주축이 세로이고 반대축이 가로라는 차이만 있습니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Flutter Column Example'),
    Text('Hello, World!'),
    Text('Welcome to Flutter'),
  ],
)

Stack

Stack 위젯은 Row와 Column과 달리 자식 위젯들을 겹쳐서 배치할 때 사용합니다. Stack은 화면 위에 여러 위젯을 쌓듯이 배치할 수 있으며, 각 위젯의 위치를 Positioned 위젯을 사용하여 자유롭게 조정할 수 있습니다.

Stack의 주요 속성

alignment: 스택 내에서 위젯들의 기본 정렬 위치를 설정합니다. Alignment.center, Alignment.topLeft 등으로 설정할 수 있습니다.
fit: 스택의 크기와 자식 위젯 간의 크기 관계를 정의합니다. StackFit.loose, StackFit.expand 등으로 설정할 수 있습니다.
overflow: 스택 바깥으로 넘치는 위젯을 어떻게 처리할지 결정합니다. 하지만 최근에는 더 이상 사용되지 않는 속성입니다.

Positioned 위젯

Positioned 위젯을 사용하면 Stack 내부에서 자식 위젯의 위치를 세부적으로 지정할 수 있습니다. top, bottom, left, right 속성을 사용하여 각 위젯의 위치를 지정할 수 있습니다. 다음의 예시와 함께 살펴보시죠.

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Icon(Icons.star, size: 50),
    ),
  ],
)

이 예시에서는 파란색 Container가 먼저 배치되고, 그 위에 빨간색 Container가 겹쳐지며, 마지막으로 별 모양의 아이콘이 스택의 오른쪽 아래에 위치합니다.

Row, Column, Stack을 함께 사용하는 방법

실제 Flutter 앱을 개발할 때는 Row, Column, Stack을 조합하여 복잡한 레이아웃을 만들 수 있습니다. 예를 들어, Row와 Column을 함께 사용하면 수평과 수직 방향으로 위젯을 자유롭게 배치할 수 있으며, Stack을 활용하여 위젯을 겹쳐서 배치할 수도 있습니다.

다음은 Row, Column, Stack을 결합하여 레이아웃을 구성하는 예시입니다.

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Text('Left Text'),
        Text('Right Text'),
      ],
    ),
    Stack(
      children: <Widget>[
        Container(
          width: 150,
          height: 150,
          color: Colors.green,
        ),
        Positioned(
          top: 30,
          left: 30,
          child: Icon(Icons.star, size: 50, color: Colors.yellow),
        ),
      ],
    ),
  ],
)

이 코드에서는 Row로 상단에 텍스트를 좌우에 배치하고, 하단에는 Stack을 이용하여 겹치는 요소를 표현했습니다. 이처럼 Row, Column, Stack을 적절히 사용하면 다양한 레이아웃을 쉽게 구현할 수 있습니다.

결론

Flutter에서 Row, Column, Stack은 레이아웃을 구성하는 데 필수적인 위젯들입니다.

Row는 수평으로, Column은 수직으로, Stack은 위젯을 겹쳐 배치할 수 있는 기능을 제공합니다. 이러한 위젯들을 적절히 활용하면, 복잡한 UI 레이아웃도 손쉽게 구현할 수 있으며, Positioned와 같은 위젯을 이용해 세부적인 배치도 가능합니다. 설명드린 Flutter의 레이아웃 시스템을 제대로 이해하고 활용하면, 더 나은 사용자 경험을 제공하는 애플리케이션을 개발하는 데 도움이 될 것 같습니다. 읽어주셔서 감사합니다.