[flutter] 플러터에서의 레이아웃 구성 방법

30 Nov 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 플랫폼 간에 동일한 코드로 네이티브 앱을 만들 수 있습니다. 이러한 플랫폼에서 사람들이 흔히 하는 작업 중 하나는 UI 요소의 레이아웃을 구성하는 것입니다. 이 블로그 포스트에서는 Flutter에서의 레이아웃 구성 방법에 대해 알아보겠습니다.

1. Container를 사용한 레이아웃

Flutter에서 가장 기본적인 레이아웃 구성 요소는 Container입니다. Container는 크기와 배경색, 여백 등을 지정할 수 있습니다. 다음은 Container를 사용하여 레이아웃을 구성하는 간단한 예제입니다.

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(8),
  child: Text("Hello, Flutter!"),
),

위의 코드에서는 Container의 속성으로 width와 height를 지정하여 크기를 설정하고, color를 지정하여 배경색을 변경합니다. margin과 padding을 사용하여 여백을 주고, child로 Text 위젯을 추가합니다.

2. Row와 Column을 사용한 레이아웃

여러 UI 요소를 가로 또는 세로로 배열하려면 Row와 Column을 사용할 수 있습니다. Row는 수평으로, Column은 수직으로 요소를 배치합니다. 다음은 Row와 Column을 사용한 레이아웃 구성 예제입니다.

Column(
  children: [
    Text("Title"),
    SizedBox(height: 16),
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    SizedBox(height: 16),
    RaisedButton(
      onPressed: () {},
      child: Text("Button"),
    ),
  ],
),

위의 코드에서는 Column의 children 속성에 여러 요소를 추가하여 수직으로 배열합니다. 각 요소는 Text, SizedBox, Container, RaisedButton과 같은 다양한 위젯입니다. SizedBox는 공간을 나누는 데 사용됩니다.

3. Expanded와 Flex를 사용한 레이아웃

Expanded와 Flex는 Row와 Column에서 사용되며, 비율에 따라 UI 요소의 크기를 조절할 수 있습니다. Expanded는 자식 요소가 가질 수 있는 추가적인 공간을 채우며, Flex는 Expanded를 사용하여 자식 요소를 정렬하는 데 사용됩니다. 다음은 Expanded와 Flex를 사용한 레이아웃 구성 예제입니다.

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

위의 코드에서는 Expanded의 flex 속성을 사용하여 비율을 설정합니다. 첫 번째 Expanded는 1의 비율로 설정되어 있으며, 두 번째 Expanded는 2의 비율로 설정되어 있습니다. 이렇게 하면 두 번째 컨테이너가 첫 번째와 세 번째 컨테이너보다 두 배 더 넓게 표시됩니다.

정리

Flutter에서의 레이아웃 구성은 Container, Row, Column, Expanded, Flex와 같은 요소를 조합해 사용할 수 있습니다. 각 요소의 속성을 이용하여 크기, 배경색, 여백, 수평/수직 배열 등을 설정할 수 있습니다. 플러터는 이러한 레이아웃 구성 방법을 통해 유연하고 멋진 사용자 인터페이스를 설계할 수 있습니다.

Reference: