[004] 플러터 (Flutter) 배우기 - Stack (겹쳐 쌓기)

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

 

Stack Widget

 

오늘 배울 부분은 바로 Stack입니다. Stack Widget은 다양한 component들을 겹쳐서 쌓을 수 있게 도와주는 위젯으로 주어진 공간에 다양한 컴포넌트들을 중첩할 때 사용합니다. 

 

Stack Widget 기본 활용

먼저 기본적인 Stack의 사용법은 Stack안에는 여러가지 component들을 넣을 수 있기 때문에 배열 형태의 [] 대괄호를 넣어주시면 됩니다. 

 

 

Stack에 height를 부여한 뒤 alignment 속성으로 가운데 정렬한 모습

위 이미지를 보면, 34번째 줄에 height 속성을 부여하고, 36번째 줄에 alignment 속성을 이용하여 가운데 배치한 모습입니다. 이렇게 Stack은 기본적으로 정렬 속성도 제공하여 개발자가 원하는 위치로 간단히 정렬을 할 수 있습니다. 

 

 

Stack을 응용한 모습

Stack의 응용을 쉽게 표현하기 위해, 4개의 Container 위젯을 margin으로 위치 변경을 주어 색다르게 표현을 했습니다. 가장 앞에 배치된 Container(연두색)가 맨 밑에 배치되며, 맨 뒤에 배치된 Container(amber색)가 맨 위에 오는 것을 확인할 수 있습니다.

 

[전체 소스 코드]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/0KzEXhk7q9k

마치며...

 

오늘은 Stack에 대하여 같이 살펴보았습니다. 여러 컴포넌트들을 중첩할 때, 유용하게 활용하실 수 있을 것으로 생각하며 다음 시간에는 ListView에 대하여 살펴보도록 하겠습니다. 감사합니다.