flutter - 위젯 배치

 

[위젯 배치]

 

 

 

[결과 화면]

 

 

 

 

 

- 기존 코드에서 패딩을 지웠더니 text가 정중앙으로 이동한다.

 

 

[결과]

 

 

 

- 일반적으로 center 위젯을 정 중앙에 배치한다.

 

- 하지만 center 위젯과 column 위젯이 만나게 되면 결과가 달라진다.

 

- column 위젯은 자식 위젯들에게 세로축 관련해서 높의의 제약이 전혀 없으니 마음대로 확장해도 되도록 전달한다.

   -> 가로축 상으로는 넓이에 대한 확실한 제약을 두지만 세로축 상으로는 아무런 제약이 없다.

 

- 그래서 center 위젯과 column 위젯이 만나면 center 위젯은 column 위젯의 자식들에 대한 세로축 위치는 관여하지 않고, 대신 현재 컬럼 위젯의 자식 위젯 세로축 높의에 자동으로 fix가 되어 버린다.

 

 

[기존 코드에서 MainAxisAlignment 속성을 주석 처리했을 때 결과 화면]

-> center 위젯이 column 위젯의 자식 위젯들의 세로축 위치를 관여하지 않는다.

 

 

 

 

 

- 즉 column 위젯을 가로축 상으로 정중앙에 위치시키려면 center 위젯을 사용하고, 세로축으로 정중앙에 위치시키려면 컬럼 위젯 내에서 MainAxisAlignment 속성을 사용한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(유튜버 코딩쉐프 님의 영상을 보고 학습한 내용 정리입니다.)