[Flutter 트랙] 앱개발 종합반 2-11 - Stack & Positioned

이번 시간에는 Stack과 Positioned 위젯에 대해 살펴보겠습니다.

Stack 위젯은 **위젯을 겹쳐서 배치할 때** 사용됩니다. 여러 개의 위젯을 레이어 형태로 배치할 수 있으며, 이를 통해 프로필 이미지 위에 아이콘을 배치하는 등의 UI를 만들 수 있습니다.

1. Stack 기본 사용

Stack 위젯을 사용하면 **자식 위젯들을 위로 쌓아 올릴 수 있습니다.**

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

➡️ **위 코드에서는 빨간색 컨테이너가 파란색 컨테이너 위에 겹쳐서 배치됩니다.**

2. Stack의 Fit 속성

Stack에는 fit 속성이 있으며, 두 가지 주요 옵션을 사용할 수 있습니다.

• StackFit.loose (기본값): 자식 위젯의 크기를 유지함
• StackFit.expand: 부모의 크기만큼 확장함

Stack(
  fit: StackFit.expand,
  children: [
    Container(color: Colors.green),
    Text("Hello"),
  ],
)

➡️ **fit: StackFit.expand**를 사용하면, 내부 위젯들이 부모 크기를 따라가게 됩니다.

3. Positioned을 활용한 정밀 배치

Positioned 위젯을 사용하면, **Stack 내에서 특정 위치에 위젯을 배치**할 수 있습니다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
  ],
)

➡️ **빨간색 박스가 파란색 컨테이너의 우측 하단에 배치됩니다.**

4. Positioned 속성

• top: 위쪽 기준으로 위치 설정
• bottom: 아래쪽 기준으로 위치 설정
• left: 왼쪽 기준으로 위치 설정
• right: 오른쪽 기준으로 위치 설정

Positioned(
  left: 20,
  top: 30,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.orange,
  ),
)

➡️ **오렌지색 박스가 Stack 내에서 왼쪽 20, 위쪽 30의 위치에 배치됩니다.**

5. Positioned을 활용한 전체 확장

Positioned를 사용하면 전체 영역을 차지하도록 설정할 수도 있습니다.

Positioned(
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  child: Container(
    color: Colors.yellow,
  ),
)

➡️ **위 코드는 Stack 내에서 전체를 채우는 컨테이너를 생성합니다.**

6. Stack + Positioned 활용 예제

아래 예제는 **프로필 이미지 위에 카메라 아이콘을 배치**하는 UI를 만드는 방법입니다.

Stack(
  children: [
    CircleAvatar(
      radius: 50,
      backgroundImage: AssetImage('assets/profile.jpg'),
    ),
    Positioned(
      bottom: 5,
      right: 5,
      child: Icon(
        Icons.camera_alt,
        color: Colors.white,
        size: 20,
      ),
    ),
  ],
)

➡️ **프로필 사진 우측 하단에 카메라 아이콘이 배치됩니다.**

7. 정리

• Stack을 사용하면 여러 위젯을 겹쳐서 배치할 수 있습니다.
• Positioned를 사용하면 정확한 위치 조정이 가능합니다.
• fit 속성을 활용하면 부모 크기를 따라가도록 설정할 수 있습니다.
• 다양한 UI에서 자주 사용되므로 익숙해질 필요가 있습니다.

➡️ **다음 강의에서는 기능성 위젯을 살펴보겠습니다.**