Align class
자식 위젯을 자기 자신 안에 정렬하고, 자식 위젯의 크기에 따라 위젯 자체의 크기를 선택적으로 조절하는 위젯입니다.
예를 들어, 상자를 오른쪽 하단에 정렬하려면 자식 상자의 자연스러운 크기보다 큰 엄격한 제약 조건을 이 상자에 전달하고 정렬은 Alignment.bottomRight 로 지정합니다.
공식 문서 코드
Align 은 위젯의 위치를 지정해 줄 때 가장 많이 사용되는 위젯? 개념 중에 하나이다. 아주 간단하게 Alignment 의 상수(생성자)로 Alignment.center 해서 그냥 중앙에 배치하게 만들어 줄 수도 있고 좌표값을 넣어서 직접 넣고 싶은 좌표에 넣어 줄수도 있다. 한번 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| child | Widget | – | 정렬할 자식 위젯 |
| alignment | AlignmentGeometry | Alignment.center | 자식 위젯을 부모 위젯 안에서 어느 위치에 정렬할지 결정 |
| widthFactor | double? | null | 자식의 너비에 곱해져 Align 위젯의 너비를 결정하는 배율 |
| heightFactor | double? | null | 자식의 높이에 곱해져 Align 위젯의 높이를 결정하는 배율 |
그냥 alignment 이거 하나만 알면 된다. 이 alignment 라는 것은 진짜 자식을 배치할 수 있는 위젯이라면 거의 가지고 있는 하위 속성 중에 하나인데 이제 alignment 만을 따로 빼서 사용할 수 있게 만든 위젯이 이 Align 이라고 생각하면 된다. 흔히 Alignment 를 사용할 때에는 상수를 사용하는 데 그것을 나열해 보자면 이렇다.
Alignment
| 상수명 | x 축 값 | y 축 값 | 정렬 위치 설명 |
| Alignment.topLeft | -1.0 | -1.0 | 왼쪽 상단 모서리 |
| Alignment.topCenter | 0.0 | -1.0 | 상단 중앙 |
| Alignment.topRight | 1.0 | -1.0 | 오른쪽 상단 모서리 |
| Alignment.centerLeft | -1.0 | 0.0 | 왼쪽 중앙 |
| Alignment.center | 0.0 | 0.0 | 정중앙 |
| Alignment.centerRight | 1.0 | 0.0 | 오른쪽 중앙 |
| Alignment.bottomLeft | -1.0 | 1.0 | 왼쪽 하단 모서리 |
| Alignment.bottomCenter | 0.0 | 1.0 | 하단 중앙 |
| Alignment.bottomRight | 1.0 | 1.0 | 오른쪽 하단 모서리 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
보이는 것처럼 아주 간단하게 위젯의 위치를 정할 수 있다. 그렇다면 상수를 사용하지 않고 좌표로는 어떻게 설정하나?
일단 Align에서 사용하는 좌표 개념을 알아야 하는데 사용하는 좌표계는 Alignment 좌표, 정규화된 좌표계를 사용한다.
즉 실제 픽셀이나 비율이 아닌 -1.0 에서 1.0 사이의 상대적 위치를 기준으로 자식 위젯을 정렬하는 것이다.
위 사진처럼 중앙이 0.0 이고 왼쪽이 -1, 오른쪽이 +1 이라는 것이다. 또한 위는 -1 아래는 +1 이 된다. 이에 맞춰서 범위 내에서 좌표를 지정해 주면 되는 것이다.
alignment: Alignment(0.2, 0.6)이런 값을 입력한다면 결과는 이렇게 된다.
근데 이렇게 좌표입력하는 것이 싫을 수 있다. 그런 당신을 위해 우리가 흔히 아는 왼쪽 상단이 0,0 인 좌표도 사용할 수 있다.
alignment: FractionalOffset(0.2, 0.6)그럴 땐 이런 식으로 FractionalOffest 을 사용해주면 된다. (공식 문서 예제)
이렇게 Align 과 그 정렬방식에 대해서 알아보았다. Alignment 라는 것은 시도 때도 없이 사용하니 알아두면 100% 좋으니 꼭 알아두자. 그럼 도움이 되었길 바라며 마치겠다.
