플러터 레이아웃(Layout) 간단하게 이해하기

개요

Flutter는 빠르게 성장하는 모바일 앱 개발 프레임워크로서, 독특하고 유연한 레이아웃 시스템을 제공한다. 이 글에서는 Flutter에서 레이아웃을 구성하는 다양한 방법과 기본 위젯에 대해 간단히 알아볼 예정이다.

Flutter 레이아웃의 핵심 개념

Flutter의 레이아웃은 주로 위젯을 사용하여 구성된다. 레이아웃을 이해하기 위해서는 먼저 '위젯'이라는 핵심 개념을 이해해야 한다. 위젯은 Flutter UI의 기본 구성 단위이며, 레이아웃은 이러한 위젯들의 조합으로 이루어진다.

위젯의 종류

상태 없는 위젯 (`StatelessWidget`): 한 번 그려지면 변경되지 않는 UI 요소
상태 있는 위젯 (`StatefulWidget`): 사용자의 인터랙션에 따라 상태가 변경되는 UI 요소

레이아웃 위젯

Container

`Container`는 가장 기본적인 레이아웃 위젯 중 하나로, 단일 자식을 갖는다. 다양한 스타일링 옵션을 제공하며, margin, padding, 배경색 등을 설정할 수 있다.

Container(
  margin: const EdgeInsets.all(8.0),
  color: Colors.blue,
  width: 48.0,
  height: 48.0,
)

Row와 Column

`Row`와 `Column`은 여러 자식을 가질 수 있는 레이아웃 위젯이다. `Row`는 자식 위젯을 가로 방향으로, `Column`은 세로 방향으로 배치한다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Hello,'),
    Text(' World!')
  ],
)

Stack

`Stack` 위젯은 자식 위젯을 겹치게 배치한다. `Positioned` 위젯을 사용하여 각 자식의 위치를 지정할 수 있다.

Stack(
  alignment: Alignment.center,
  children: [
    Container(color: Colors.red, width: 300, height: 300),
    Positioned(
      top: 10,
      left: 10,
      child: Container(color: Colors.green, width: 50, height: 50),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(color: Colors.blue, width: 50, height: 50),
    ),
  ],
)

레이아웃 알고리즘

Flutter 레이아웃의 알고리즘은 부모와 자식 위젯 간에 레이아웃 제약을 교환하면서 작동한다. 즉, 부모 위젯은 자식 위젯에게 어떤 크기로 그려져야 하는지 제약을 주고, 자식 위젯은 그 제약에 따라 크기와 위치를 결정한다.

Flutter 레이아웃의 장점

유연성: 다양한 위젯과 속성을 조합하여 복잡한 레이아웃을 손쉽게 구현할 수 있다.
성능: 레이아웃 엔진이 매우 효율적으로 동작하여 높은 프레임 레이트를 유지한다.
재사용성: 작성한 레이아웃 코드는 다양한 환경과 디바이스에서 재사용이 가능하다.

마무리

Flutter에서의 레이아웃은 위젯을 중심으로 구성되며, 유연하고 성능이 뛰어나다. 이 글에서는 기본 위젯과 레이아웃 알고리즘을 통해 Flutter의 레이아웃 시스템을 간단히 알아보았다. 추가적으로 확인하려면 아래 flutter 공식사이트에서 제공하는 layout 문서를 참고해도 좋을 것 같다.

👉 참고. Layout - Flutter Docs