Align

Flutter에서 UI를 구성할 때 위젯의 정렬은 매우 중요한 요소이다.

이때 사용할 수 있는 유용한 위젯 중 하나가 바로 Align 위젯이다.

 

 

Align 위젯이란?

Align 위젯은 자식 위젯의 정렬을 지정하는 데 사용되는 단일 자식 위젯이다.

Align을 사용하면 부모 위젯 내에서 자식 위젯의 위치를 쉽게 조정할 수 있다.

 

Align의 주요 속성은 다음과 같습니다:

• alignment: 자식 위젯의 정렬 위치를 지정한다. (기본값: Alignment.center)
• widthFactor, heightFactor: 부모의 크기에 대한 자식 위젯의 크기 비율을 지정한다. (기본값: null)

 

 

Align 위젯 사용 예시

실행 결과: 

위 코드에서는 빨간색 Container 안에 FlutterLogo 위젯을 Align을 사용해 우측 상단에 정렬했다.

alignment 속성을 이용해 손쉽게 위치를 지정할 수 있다.

 

 

Alignment 변수

Align 위젯에서 자주 사용되는 Alignment 변수는 다음과 같다:

 

• Alignment.topLeft: 상단 좌측 정렬
• Alignment.topCenter: 상단 중앙 정렬
• Alignment.topRight: 상단 우측 정렬

 

• Alignment.centerLeft: 중앙 좌측 정렬
• Alignment.center: 중앙 정렬
• Alignment.centerRight: 중앙 우측 정렬

 

• Alignment.bottomLeft: 하단 좌측 정렬
• Alignment.bottomCenter: 하단 중앙 정렬
• Alignment.bottomRight: 하단 우측 정렬

이 외에도 Alignment(double x, double y) 생성자를 사용해 -1.0에서 1.0 사이의 값으로 정밀한 정렬 위치를 지정할 수 있다.