Flutter 배치 관련 위젯
Row : 수평으로 자식 위젯들을 배치함.
Column : 수직으로 자식 위젯들을 배치함.
Stack : 자식 위젯들을 겹쳐서 배치함.
Wrap : 자식 위젯들을 가로 또는 세로로 감싸며, 공간이 부족할 경우 다음 줄로 넘어감.
Expanded : 자식 위젯이 사용 가능한 공간을 최대한 차지하도록 설정함.
Flexible : 자식 위젯이 사용 가능한 공간을 차지하도록 하되, 비율을 설정할 수 있음.
Align : 자식 위젯을 특정 위치에 정렬함.
Center : 자식 위젯을 부모 위젯의 중앙에 배치함.
Positioned Stack : 내에서 자식 위젯의 위치를 지정함.
Spacer : 남는 공간을 차지하여 자식 위젯 간의 간격을 조정함.
SizedBox : 고정된 크기의 상자를 만들어 공간을 조절함.
IntrinsicHeight : 자식 위젯의 최소 높이에 맞게 크기를 조정함.
IntrinsicWidth : 자식 위젯의 최소 너비에 맞게 크기를 조정함.
정렬 위젯 MainAxisAlignment
주축방향(가로 or 세로) 로 자식 위젯을 어떻게 정렬할지 정함
주축은 row에서는 가로이며 column에서는 세로임
목차
MainAxisAlignment.start 자식 위젯을 주축의 시작 부분에 정렬함.
MainAxisAlignment.end 자식 위젯을 주축의 끝 부분에 정렬함.
MainAxisAlignment.center 자식 위젯을 주축의 중앙에 정렬함.
MainAxisAlignment.spaceBetween 자식 위젯 사이에 가능한 모든 공간을 고르게 분배함.
MainAxisAlignment.spaceAround 자식 위젯 사이에 고르게 공간을 분배하되, 양 끝에 여백이 있음.
MainAxisAlignment.spaceEvenly 자식 위젯 사이에 동일한 간격을 두고 여백을 설정함.
정렬 위젯 CrossAxisAlignment
CrossAxisAlignment.start 자식 위젯을 교차축의 시작 부분에 정렬함.
CrossAxisAlignment.end 자식 위젯을 교차축의 끝 부분에 정렬함.
CrossAxisAlignment.center 자식 위젯을 교차축의 중앙에 정렬함.
CrossAxisAlignment.stretch 자식 위젯을 교차축의 공간을 가득 차게 만듦.
CrossAxisAlignment.baseline 자식 위젯을 베이스라인에 맞춰 정렬함.
Flexible 위젯
자식 위젯이 사용할 수 있는 공간을 제어함.
통상 Row/Column/Flex 내부에서 자주 사용되며 자식 위젯이 남은 공간을 얼마나 차지할지 설정
flex 자식 위젯이 사용할 공간의 비율을 설정함. 기본값은 1임.
fit 자식 위젯의 크기를 어떻게 조정할지를 결정함. (예: FlexFit.tight, FlexFit.loose)
child Flexible 위젯 내부에 포함될 자식 위젯을 설정함.
key 위젯의 고유 키를 설정함. (상태 관리 또는 위젯 트리에서 식별용)
flex는 남은 공간을 차지할 비율을 의미하며 값을 제공하지 않으면 기본값은 1.
Row(
children: [
Flexible(
flex: 2, // 2배의 비율로 공간을 차지함
child: Container(
color: Colors.red,
height: 100,
),
),
Flexible(
flex: 1, // 1배의 비율로 공간을 차지함
child: Container(
color: Colors.blue,
height: 100,
),
),
],
);