Flutter layout & align (레이아웃 및 정렬)
Flutter에서 레이아웃을 구성할 때 유용한 위젯들인 `Align`, `Padding`, `Center`, `Expanded`, `Spacer`에 대해 각각 설명하겠습니다.
▶ Align
`Align` 위젯은 자식 위젯을 정렬하는 데 사용됩니다. 부모 위젯 내에서 자식 위젯의 위치를 지정할 수 있습니다.
– 속성
– `alignment`: 자식 위젯의 위치를 지정하는 속성입니다. `Alignment` 클래스의 값을 사용합니다.
– `widthFactor` 및 `heightFactor`: 자식 위젯의 너비와 높이를 조정할 때 사용하는 배율 값입니다. 설정하지 않으면 자식 위젯의 크기에 맞춰집니다.
– 예제
Align(
alignment: Alignment.topRight,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
)위 예제는 컨테이너를 부모 위젯의 오른쪽 상단에 배치합니다.
▶ Padding
`Padding` 위젯은 자식 위젯 주위에 패딩(여백)을 추가하는 데 사용됩니다.
– 속성
– `padding`: `EdgeInsets` 클래스를 사용하여 각 방향에 대한 패딩 값을 지정합니다.
– 예제
Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello, World!'),
)
위 예제는 텍스트 주위에 16픽셀의 패딩을 추가합니다.
▶ Center
`Center` 위젯은 자식 위젯을 부모 위젯의 중앙에 배치하는 데 사용됩니다.
– 예제
Center(
child: Text(‘Hello, World!’),
)
위 예제는 텍스트를 부모 위젯의 중앙에 배치합니다.
▶ Expanded
`Expanded` 위젯은 자식 위젯이 가능한 한 많은 공간을 차지하도록 확장하는 데 사용됩니다. 보통 `Row`, `Column`, `Flex`와 같은 부모 위젯 내에서 사용됩니다.
– 속성
– `flex`: 공간 분배 비율을 지정합니다. 기본값은 1입니다.
– 예제
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
height: 100,
),
),
Container(
width: 100,
color: Colors.blue,
height: 100,
),
],
)
위 예제는 빨간색 컨테이너가 가능한 한 많은 가로 공간을 차지하고, 파란색 컨테이너는 고정된 너비(100픽셀)를 가집니다.
▶ Spacer
`Spacer` 위젯은 `Expanded`의 특별한 경우로, 두 위젯 사이에 일정한 공간을 추가하는 데 사용됩니다. `Row`, `Column`, `Flex` 위젯 내에서 사용됩니다.
– 속성
– `flex`: 공간 분배 비율을 지정합니다. 기본값은 1입니다.
– 예제
Row(
children: <Widget>[
Container(
width: 100,
color: Colors.red,
height: 100,
),
Spacer(),
Container(
width: 100,
color: Colors.blue,
height: 100,
),
],
)
위 예제는 빨간색 컨테이너와 파란색 컨테이너 사이에 가능한 한 많은 가로 공간을 추가합니다.
▶ 요약
– Align: 부모 위젯 내에서 자식 위젯의 위치를 정렬합니다.
– Padding: 자식 위젯 주위에 여백을 추가합니다.
– Center: 자식 위젯을 부모 위젯의 중앙에 배치합니다.
– Expanded: 자식 위젯이 가능한 한 많은 공간을 차지하도록 확장합니다.
– Spacer: 두 위젯 사이에 공간을 추가합니다.
이 위젯들은 Flutter에서 레이아웃을 구성할 때 자주 사용되며, 조합하여 다양한 레이아웃을 만들 수 있습니다.