Flutter 레이아웃 구성 - Container, Column, Row
Container
Flutter에서 가장 기본적이고 자주 사용되는 위젯 중 하나로, 다양한 시각적 속성을 설정할 수 있는 박스 형태의 위젯이다. 다른 위젯을 감싸고, 크기, 색상, 패딩, 마진 등을 조절하는 데 사용된다.
Container 속성
- child: Container 내부에 포함할 자식 위젯을 설정한다. 이 속성은 필수적이지 않지만, Container의 주요 내용을 구성한다.
- width / height: Container의 너비와 높이를 설정한다. 이 값을 지정하지 않으면 자식 위젯의 크기에 따라 자동으로 조정된다.
- decoration: BoxDecoration을 사용하여 배경 색상, 테두리, 그림자 등을 설정한다. color, border, borderRadius, boxShadow 등의 속성을 포함할 수 있다.
Container 특징
- 단일 자식 위젯: Container는 하나의 자식 위젯을 가질 수 있다.
- 시각적 속성: 배경 색상, 여백, 테두리, 그림자 등을 설정할 수 있다.
- 정렬 기능: 자식 위젯의 정렬 방식을 설정할 수 있다.
Column
여러 자식 위젯을 수직으로 정렬하는 레이아웃 위젯으로, 각 자식 위젯은 위에서 아래로 쌓인다. 주로 세로 방향의 레이아웃을 구성할 때 사용된다.
Column 속성
- children: 수직으로 정렬할 자식 위젯의 목록을 설정한다. List 타입으로 여러 위젯을 포함할 수 있다.
- mainAxisAlignment: 자식 위젯의 주 축(세로 방향) 정렬 방식을 설정한다.
- crossAxisAlignment: 자식 위젯의 교차 축(가로 방향) 정렬 방식을 설정한다.
Column 특징
- 자식 위젯 정렬: 자식 위젯이 수직으로 정렬된다.
- MainAxisAlignment: 자식 위젯의 주 축(세로 방향) 정렬 방식을 설정할 수 있다.
- CrossAxisAlignment: 자식 위젯의 교차 축(가로 방향) 정렬 방식을 설정할 수 있다.
Row
여러 자식 위젯을 수평으로 정렬하는 레이아웃 위젯으로, 각 자식 위젯은 왼쪽에서 오른쪽으로 배치된다. 주로 가로 방향의 레이아웃을 구성할 때 사용된다.
Row 속성
- children: 수평으로 정렬할 자식 위젯의 목록을 설정한다. List 타입으로 여러 위젯을 포함할 수 있다.
- mainAxisAlignment: 자식 위젯의 주 축(가로 방향) 정렬 방식을 설정한다.
- crossAxisAlignment: 자식 위젯의 교차 축(세로 방향) 정렬 방식을 설정한다.
Row 특징
- 자식 위젯 정렬: 자식 위젯이 수평으로 정렬된다.
- MainAxisAlignment: 자식 위젯의 주 축(가로 방향) 정렬 방식을 설정할 수 있다.
- CrossAxisAlignment: 자식 위젯의 교차 축(세로 방향) 정렬 방식을 설정할 수 있다.
