[Flutter] Stack과 Positioned

Stack이란?

우선 Stack은 여러 Widget을 겹쳐서 배치할 수 있는 위젯을 의미한다.
즉, 하위 위젯들끼리 z축으로 쌓는 형태로 구성할 수 있다.

HTML로 비유하면 postion: absolute와 유사하다.

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue), // 1
    Container(width: 100, height: 100, color: Colors.red), 	// 2
  ],
)

파란색 사각형 위에 빨간색 사각형이 겹쳐져서 표시된다.

Positioned란?

Stack 안에서만 사용 가능하며, 정확한 위치를 지정해서 배치할 수 있게 도와주는 위젯이다.

Positioned(
	bottom: 0,
    right: 0,
    child:
    	Container(width: 200, height: 200, color: Colors.blue)), // 1
Positioned(
	top: 0,
    left: 0,
    child:
    	Container(width: 100, height: 100, color: Colors.red)), // 2