플러터 강좌, 7.4 Column 위젯 내에 자식 위젯 배치하기

플러터는 구글이 개발한 UI 툴킷으로, 모바일, 웹, 데스크톱 애플리케이션을 손쉽게 제작할 수 있도록 도와줍니다. 이번 글에서는 플러터의 핵심 위젯 중 하나인 Column 위젯에 대해 자세히 알아보고, 이를 통해 어떻게 자식 위젯들을 배치할 수 있는지에 대해 설명하겠습니다.

1. Column 위젯 소개

Column 위젯은 플러터에서 수직 방향으로 자식 위젯을 배치할 때 사용하는 기본적인 레이아웃 위젯입니다. 이 위젯은 여러 자식 위젯들을 세로로 나열하며, 자식 위젯들의 위치는 주어진 레이아웃에 따라 자동적으로 정렬됩니다. Column 위젯은 매우 유용하며, 여러 종류의 자식 위젯을 포함할 수 있습니다. 예를 들어, 텍스트, 이미지, 버튼 등 다양한 위젯을 세로로 나열할 수 있습니다.

2. Column 위젯의 기본 사용법

Column 위젯은 다음과 같은 형식으로 정의할 수 있습니다:

Column(
  children: [
    Text('첫 번째 위젯'),
    Text('두 번째 위젯'),
    Icon(Icons.star),
  ],
)

위 코드에서 볼 수 있듯이, Column 위젯의 children 속성에 자식 위젯 리스트를 전달합니다. 이러한 자식 위젯들은 위에서 아래로 나열됩니다.

3. Column 위젯의 주요 속성

Column 위젯을 사용할 때, 다음과 같은 주요 속성을 활용할 수 있습니다:

mainAxisAlignment: 주 축(수직 방향)의 정렬 방법을 지정합니다. 예를 들어, 중앙 정렬, 시작 정렬, 종료 정렬 등을 설정할 수 있습니다.
crossAxisAlignment: 교차 축(수평 방향)의 정렬 방법을 설정합니다. 자식 위젯들의 가로 정렬을 조정하는 데 사용됩니다.
mainAxisSize: Column의 높이를 조정할 때 사용합니다. MainAxisSize.min을 설정하면 이 위젯이 자식 위젯의 높이에 맞추어 최소한의 공간만 차지합니다.

4. 예제: 기본 Column 위젯 사용하기

간단한 예제를 통해 기본적인 Column 위젯 사용법을 알아보겠습니다. 다음은 두 개의 텍스트와 아이콘을 포함한 간단한 Column 위젯입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column 위젯 사용 예')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('첫 번째 위젯', style: TextStyle(fontSize: 24)),
            Text('두 번째 위젯', style: TextStyle(fontSize: 24)),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    );
  }
}

위 코드를 실행하면, 기기 화면의 중앙에 두 개의 텍스트와 하나의 아이콘이 세로로 나열된 모습을 볼 수 있습니다.

5. 자식 위젯 정렬하기

mainAxisAlignment와 crossAxisAlignment 속성을 사용하여 자식 위젯의 정렬을 조정할 수 있습니다. 예를 들어, 모든 자식 위젯을 중앙에 정렬하고 싶다면, mainAxisAlignment를 MainAxisAlignment.center로 설정합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('첫 번째 위젯', style: TextStyle(fontSize: 24)),
    Text('두 번째 위젯', style: TextStyle(fontSize: 24)),
    Icon(Icons.star, size: 50),
  ],
)

위 코드를 실행하면, 모든 자식 위젯이 화면의 중앙에 정렬되며, 텍스트는 왼쪽 정렬됩니다.

6. Column 위젯에 Padding 적용하기

Padding 위젯을 사용하여 Column 위젯에 여백을 추가할 수 있습니다. 여백을 추가하면 각 자식 위젯 간의 간격을 벌려 더 깔끔한 레이아웃을 만들 수 있습니다.

Padding(
  padding: EdgeInsets.all(16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('첫 번째 위젯', style: TextStyle(fontSize: 24)),
      Text('두 번째 위젯', style: TextStyle(fontSize: 24)),
      Icon(Icons.star, size: 50),
    ],
  ),
)

위 코드에서는 전체 Column 위젯에 16픽셀의 여백을 추가했습니다. 이를 통해 자식 위젯 간의 간격을 유지하면서도 안정적인 레이아웃을 구현할 수 있습니다.

7. Column 안에 다른 위젯 추가하기

Column 위젯에는 다른 Row, Container 등의 위젯을 자식으로 추가할 수 있습니다. 이 경우에는 자식 위젯들이 Column의 규칙을 따릅니다. 다음은 Column 안에 여러 Row를 포함하는 예제입니다:

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Row 1 - 위젯 1'),
        Text('Row 1 - 위젯 2'),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Row 2 - 위젯 1'),
        Text('Row 2 - 위젯 2'),
      ],
    ),
  ],
)

위 코드는 두 개의 Row를 Column 안에 배치한 예제입니다. 각 Row는 텍스트 위젯을 수평으로 나열합니다.

8. Column과 Expanded 위젯

자식 위젯의 공간을 보다 유동적으로 조절하고 싶을 때는 Expanded 위젯을 사용합니다. Expanded 위젯은 자식 위젯이 차지할 수 있는 남은 공간을 모두 소모하도록 허용합니다. 다음은 Column과 Expanded를 함께 사용하는 예입니다:

Column(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

이 코드를 사용하면, 화면이 세 개의 동일한 높이의 Container로 나뉘어져, 각 Container는 빨강, 초록, 파랑의 색상을 나타냅니다.

9. Column을 활용한 예제 애플리케이션

이제 Column 위젯을 활용하여 간단한 애플리케이션을 만들어보겠습니다. 다음은 기대하는 UI를 구현하는 전체 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column 위젯 예제')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('플러터 Column 위젯', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
              Expanded(child: Container(color: Colors.red)),
              Expanded(child: Container(color: Colors.green)),
              Expanded(child: Container(color: Colors.blue)),
              RaisedButton(onPressed: () {}, child: Text('버튼')),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드를 실행하면, 상단에 제목 텍스트와 중앙의 세 개의 색상이 다른 컨테이너, 하단에 버튼이 배치된 화면이 나타납니다. 이러한 레이아웃은 Column 위젯을 효과적으로 활용한 사례입니다.

10. 결론

이번 포스팅에서는 Column 위젯에 대해 자세히 알아보았습니다. Column 위젯은 플러터에서 매우 유용한 도구로, 수직으로 자식 위젯을 배치할 때 널리 사용됩니다. mainAxisAlignment, crossAxisAlignment와 같은 속성을 적용하여 레이아웃을 세밀하게 조정할 수 있으며, 다른 위젯과 조합하여 다양한 UI를 구현할 수 있습니다.

플러터에서 위젯을 조합하는 법을 익히면 더 복잡한 레이아웃을 쉽게 만들 수 있습니다. 앞으로도 다양한 플러터 위젯에 대한 강좌를 통해 더 많은 정보와 도움을 드리겠습니다. 감사합니다!