Flutter 레이아웃 위젯: Row, Column, Stack 활용 방법
Flutter는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 뛰어난 위젯 시스템 덕분에 UI를 손쉽게 구성할 수 있습니다. 이 블로그 글에서는 레이아웃을 구성하는 기초적인 위젯인 Row, Column, Stack을 살펴보겠습니다. 이들 위젯은 다양한 화면 크기와 비율에 맞춰 유연하게 UI를 조정하는 데 매우 유용합니다.
Row: 수평 레이아웃 구성하기
Row 위젯은 자식 위젯들을 수평으로 정렬하는 데 사용됩니다. 여러 개의 위젯을 가로 방향으로 배치하고자 할 때 유용합니다. Row의 주요 매개변수로는 mainAxisAlignment, crossAxisAlignment, children이 있습니다.
dart
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.settings),
],
);
이 예제에서 Row 위젯은 세 개의 아이콘을 가로로 배치하며, mainAxisAlignment를 사용해 아이콘들 사이의 공간을 조절합니다.
Column: 수직 레이아웃 구성하기
Column 위젯은 자식 위젯들을 수직으로 정렬하는 데 사용됩니다. Row와 마찬가지로 mainAxisAlignment, crossAxisAlignment, children 매개변수를 통해 레이아웃을 조정할 수 있습니다.
dart
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('안녕하세요!'),
Text('Flutter 레이아웃 공부 중입니다.'),
Text('Column 위젯 예제입니다.'),
],
);
위 예제에서 Column은 세 개의 텍스트 위젯을 세로 방향으로 배치했으며, 모든 텍스트는 왼쪽 정렬되었습니다.
Stack: 겹쳐진 레이아웃 만들기
Stack 위젯은 자식 위젯을 겹쳐서 배치할 수 있게 해줍니다. 이 기능을 통해 독특한 디자인을 구현할 수 있으며, alignment, fit, overflow와 같은 속성을 통해 다양한 조정이 가능합니다.
dart
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(width: 100, height: 100, color: Colors.red),
Container(width: 80, height: 80, color: Colors.green),
Container(width: 60, height: 60, color: Colors.blue),
],
);
이 예에서는 크기가 다른 세 개의 Container가 중앙에 겹쳐 배치됩니다. Stack을 사용하면 복잡한 UI 레이아웃을 효과적으로 구성할 수 있습니다.
레이아웃 위젯 조합 활용하기
Row, Column, Stack은 각각 독립적으로 사용할 수 있지만, 때로는 조합하여 더 복잡한 레이아웃을 구현할 수 있습니다. 예를 들어, Row 안에 Column을 포함시키거나, Stack 안에 Row와 Column을 사용해 다양한 디자인을 생성할 수 있습니다.
dart
Stack(
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.access_alarm),
Icon(Icons.accessible),
],
),
Column(
children: <Widget>[
Text('위에 겹쳐지는 텍스트'),
],
),
],
);
마치며
Flutter의 레이아웃 위젯인 Row, Column, Stack은 매우 유용하며, 각각 특성과 쓰임새가 다르기 때문에 다양한 방법으로 활용할 수 있습니다. 이러한 기본적인 위젯들을 잘 조합하여 나만의 개성 있는 UI를 만들어 보세요.
더 많은 Flutter 관련 정보는 공식 Flutter Documentation에서 확인하실 수 있습니다. 이 외에도 Flutter를 활용한 다양한 프로젝트와 튜토리얼을 통해 보다 심화된 지식을 쌓아보세요!