Flutter - Stack, Align, Positioned. 위젯을 겹겹히 쌓아올리기!

위젯을 겹겹히 쌓아올리고싶어요.

 

Stack 사용

스택을 사용하게 되면 children을 쓰게 되어 여러 위젯을 그 안에 넣을 수 있습니다.

Column, Row 위젯과 유사하게 먼저 사용되는 위젯이 가장 뒤로 가게 됩니다. 위의 그림에서는 black컨테이너가 나머지 위젯에 의해 가려진것을 볼 수 있습니다. 

 

이 때 만약 특정 컨테이너의 위치를 바꾸고 싶다면 여러가지 방법이 있습니다

1. margin을 준는 방법입니다. 

 

2. Positioned위젯을 사용하기 입니다. 

 

3. Align위젯을 사용하기 입니다.

 

 Positioned 위젯 사용

위 사진처럼 컨테이너중 하나를 Positioned로 감쌌습니다. 이때 bottom기준 50px, left기준 100px 띄었을때, 그 기준이 되는 bottom과 left는 가장 하위에 있는 컨테이너 위젯인 black 컨테이너입니다! 

그래서 빨간 컨테이너가 화면 하단부터 50px떨어진게 아닌, 검은 컨테이너의 바닥에서 50px떨어진 것을 볼 수 있습니다.

두번째 컨테이너도 마찬가지로 자리 이동이 됩니다.

 

여기서 주의할 점!

Positioned 위젯을 쓸 때 기준이 되는게 이전에 있어야 합니다.

 

만약 제가 바로 위 사진에서 black컨테이너를 Positioned로 감싸면 어떻게 될까요?

 

네. black컨테이너는 사라집니다.

그럼 blue컨테이너도 사라집니다. (black과 blue 함께 사라짐. black부터 순서대로 사라지는것으로 예상됨)

 

green컨테이너는 그대로 있고 red의 position의 기준은 green컨테이너로 바뀝니다!

 

 

 

이렇게 특정 수치로 나누는 방법이 있지만 때로는 한계를 느낄 수 있다. 그럴때 대안이 되는것이 바로

Align 위젯 사용

이렇게 특정 컨테이너를 감싸게 되면 body부분에서의 center로 배치가 된것을 볼 수 있다.

 

이때 Positioned 를 같이 쓰게 된다면?

blue컨테이너를 bottom 100, left 30 띄었는데 그 기준이 최 하단에 있는 black 컨테이너가 아니라 body부분의 화면 기준이 됨을 볼 수 있다. 

-> Stack에서 align이 쓰이는 순간 모든 위치 기준은 화면 전체가 되는것