flutter stack 위젯

 

 

Stack 위젯은 Flutter에서 여러 자식 위젯을 서로 겹쳐서 배치할 수 있도록 하는 레이아웃 위젯입니다. Stack 위젯은 Positioned 위젯과 함께 사용하여 자식 위젯의 위치를 지정할 수 있으며, 이를 통해 복잡한 레이아웃을 쉽게 구성할 수 있습니다.

 

주요 속성

 

• alignment: Stack 내에서 자식 위젯을 정렬하는 방법을 지정합니다. 기본값은 AlignmentDirectional.topStart입니다.

• fit: 자식 위젯이 Stack의 크기에 어떻게 맞춰질지 지정합니다. StackFit.loose(기본값), StackFit.expand, StackFit.passthrough 등이 있습니다.

• overflow: 자식 위젯이 Stack의 경계를 넘을 때 어떻게 처리할지 지정합니다. Overflow.clip(기본값), Overflow.visible 등이 있습니다.

 

주요 사용 사례

 

1. 단순 겹침

2. 정확한 위치 지정

 

body: Container(
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 200,
        color: Colors.red,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 50, left: 50),
        color: Colors.blue,
      )
    ],
  ),
)

두번때 container 에 margin 을 위 50 좌 50 을 주는 코드입니다. 

stack 을 활용한 도형 겹치기 실습입니다. 

body: Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  color: Colors.yellow,
  child: Stack(
    children: [
      Container(
        width: 150,
        height: 200,
        color: Colors.red,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 50, left: 50),
        color: Colors.blue,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 100, left: 100),
        color: Colors.green,
      ),
      Container(
        width: 150,
        height: 200,
        margin: const EdgeInsets.only(top: 150, left: 150),
        color: Colors.orange,
      ),
    ],
  ),
)

 

positioned 위젯으로도 같은 내용을 표현 가능합니다.

Container(
  width: 150,
  height: 200,
  color: Colors.red,
),
Container(
  width: 150,
  height: 200,
  margin: const EdgeInsets.only(top: 50, left: 50),
  color: Colors.blue,
),
Positioned(
  left: 100,
  top: 100,
  // right: 10,
  // bottom: 10,
  child: Container(
    width: 150,
    height: 200,
    color: Colors.green,
  ),
),
Container(
  width: 150,
  height: 200,
  margin: const EdgeInsets.only(top: 150, left: 150),
  color: Colors.orange,
),

 

• Stack 위젯 문서: https://api.flutter.dev/flutter/widgets/Stack-class.html

• Positioned 위젯 문서: https://api.flutter.dev/flutter/widgets/Positioned-class.html