[Flutter] Stack 위젯

 

Stack

 

stack은 가장 먼저 들어온 객체가 가장 아래에 쌓이는 구조이다.

 

stack 위젯 역시 children에 나열한 여러 위젯을 순서대로 겹치게 한다.

children 프로퍼티에 정의한 순서대로 쌓이기 때문에, 가장 먼저 정의한 자식 위젯이 가장 아래에 놓인다.

 

Stack(
	children: <Widget>[
		Container(
			color: Colors.red,
			width: 100,
			height: 100,
			margin: const EdgeInsets.all(8.0)
		),
		Container(
			color: Colors.green,
			width: 80,
			height: 80,
			margin: const EdgeInsets.all(8.0)
		),
		Container(
			color: Colors.blue,
			width: 60,
			height: 60,
			margin: const EdgeInsets.all(8.0)
		)
	]
)

 

 

위의 코드는 차례대로 빨강, 초록, 파랑 위젯을 선언했다.

 

따라서 실행 시켜보면 다음과 같이 빨랑, 초록, 파랑의 순서대로 차곡차곡 쌓여 있는 것을 볼 수 있다.

 

 

[실행 결과]