[Flutter] Align //배치위젯

 

 

 

 

Align

 

부모의 위젯 안에서 자식 위젯을 배치시킬 수 있는 위젯.

 

 

 

생성자

Align({Key? key, AlignmentGeometry alignment = Alignment.center, double? widthFactor, double? heightFactor, Widget? child})

 

 

 

속성

 

alignment  
자식을 배치시키는 방법.

 

heightFactor -> double

자식을 기준으로 가상의 높이를 가진 부모를 만들어 그 안에 배치.

 

widthFactor -> double

자식을 기준으로 가상의 넓이를 가진 부모를 만들어 그 안에 배치.

 

 

 

 

 

Align 사용해보기.

 

 

 

 

100*100 사이즈의 빨간 Container 를 생성했습니다. 

이 Container를 중앙으로 위치하게 하고 싶으면 어떻게 해야 할까요?

가장 간단한 방법은 Container를 Center 로 감싸는 겁니다.

 

하지만 Center 는 부모를 기준으로 정중앙 으로만 갈 수 있습니다.

좌측상단이나, 우측상단, 좌측하단, 우측하단 또는 원하는 곳에 배치 하려면 Align 을 사용하여야 합니다.

 

코드에서 보시다시피 Container을 Align 으로 감싼 후에 배치를 하는 속성인 alignment 를 사용해 우측 상단에 위치하게 만들었습니다.

 

alignment : Alignment.topLeft  =  좌측상단 배치

alignment : Alignment.topCenter  =  중앙상단 배치
alignment : Alignment.topRight  =  우측상단 배치

alignment : Alignment.centerLeft  =  좌측중앙 배치
alignment : Alignment.center  =  중앙 배치
alignment : Alignment.centerRight  =  우측중앙 배치

 

alignment : Alignment.bottomLeft  =  좌측하단 배치
alignment : Alignment.bottomCenter  =  중앙하단 배치
alignment : Alignment.bottomRight  =  우측하단 배치

 

이렇게 배치 되는 이유는 align 위젯이 자기의 부모를 기준으로 자기 자식을 배치시키기 때문입니다.

현재 코드상에서는 Scaffod의 body가 align의 부모이기 때문에 body전체를 기준으로 배치 시키기 때문입니다.

이를 확인하기 위해 align을 Container로 감싸 색상을 주어 확인해 보겠습니다.

 

 

 

Align을 Container로 감싸 Align의 잡고있는 범위를 확인하니 Scaffold의 body전체를 잡고 있는것을 확인할 수 있습니다.

 

그런데 여기서 깊게 고민하시는 분은 헷갈리실만한 게 하나 있는데요.

 

Align은 자기부모를 기준으로 자식을 배치시킨다고 하였는데, 현재 Align의 부모는 크기가 없는 Container 입니다.
어떻게 저렇게 배치가 가능했던걸까요?.

 

Container의 width, height 값을 주지않으면 확장 하는 성격을 가지고 있기 때문에 body의 사이즈로 확장한 것 입니다.

그래서 Align 은 body영역전부를 잡고 자식을 배치 시킬 수 있습니다.

 

 

그 외 다양한 배치 방법.

 

 

alignment: AlignMent(double, double),
중앙(0,0)을 기준으로 설정한 위치에 배치.

 

 

 

 

alignment: FractionalOffset(double, double),
좌측상단(0,0) 을 기준으로 설정한 위치에 배치.

 

 

 

 

 

 

heightFactor / widthFactor

Align 위젯의 속성에는 alignment말고 heightFactor / widthFactor 라는 속성이 추가로 있습니다.

간단하게 설명하자면 Align 위젯은 부모를 기준으로 자식을 배치시킨다고 하였습니다.

그 기준이 되는 부모를 자식을 기준으로 가상의 사이즈를 주어서 그 안에서 배치를 시킵니다.

 

widthFactor: 2 를 주었더니 빨간Container의 width를 기준으로 2배가 커진 가상의부모가 만들어졌습니다.

(이해하기쉽게 색상을 주려고 Container로 감싼겁니다. 감싸지 않아도 똑같은 위치에 배치됩니다)

이 안에서 alignment: Alignment.centerLeft 로 중앙 좌측 배치를 한 것입니다.

 

가상의 부모에 width는 주었으나 height값은 주지 않았기에 아까 설명했듯이 사이즈가 없는 height은 자식의 height 사이즈를 가져왔습니다.

 

 

 

 

heightFactor : 2   // 설명은 위랑 동일

 

 

 

heightFactor : 2
widthFactor : 2 

를 준 결과.. 이해가 가시나요??. 

틀린 점이나 궁금한 점이 있으면 댓글 작성해 주세요. 봐주셔서 감사합니다.