[012] 플러터 (Flutter) 배우기 - Center (중앙 정렬)

안녕하세요~ totally 개발자입니다.

 

Center

 

저번 시간의 Align 위젯에 이어 이번 시간에도 정렬 위젯인 Center에 대하여 다룹니다. Align에서는 다양한 방향에 대한 정렬이었다면 Center는 오직 중앙 정렬을 위해 사용되는 위젯으로서 Align보다도 사용법이 더 간단하니 바로 예제로 들어가겠습니다.

 

Center 위젯 예시

위의 예제를 보면 Center 위젯을 사용하고 child만 배치해주면 바로 중앙에 Container가 배치된 것을 확인할 수 있습니다. 다만 이 Center 위젯의 속성에 widthFactor과 heightFactor이 존재하는데 widthFactor는 child 위젯의 길이 * factor만큼 Center 위젯의 길이(width)를 지정해주며 heightFactor 역시 child 위젯의 높이 * factor만큼 Center 위젯의 높이를 지정해줍니다. 예를 들어 widthFactor가 1.5라면 Center 위젯의 width(길이)는 child 위젯 컨테이너의 길이 200 * 1.5 = 300이 되고 heightFactor가 2.0이라면 child 위젯 컨테이너의 길이 200 * 2.0 = 400이 되는 방식입니다. 그 예제는 아래와 같습니다.

 

정렬 위치가 widthFactor, heightFactor에 따라 변경된 모습

위의 예제처럼 widthFactor와 heightFactor에 어떤 값을 부여했는지에 따라 Center 위젯의 넓이가 달라져 중앙 정렬 위치가 달라지는 것을 알 수 있고 이 속성들은 child의 width와 height를 이용하기 때문에 child의 크기에 유의하셔야 합니다. 다음 시간에는 AlertDialog에 대해 알아보겠습니다. 감사합니다.

 

[전체 소스 코드]