Flutter Stack & Positioned 위젯 정리 + 간단 예제

📌 1. Stack 이란?

✅ 개념

• 위젯을 겹쳐서 배치하는 레이아웃
• z-index처럼 앞뒤로 쌓는 구조

👉 쉽게 말하면
포토샵 레이어처럼 위에 겹쳐 올림

---

📌 2. 기본 예제

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

👉 결과:

• 빨강 (맨 아래)
• 초록 (중간)
• 파랑 (맨 위)

---

📌 3. Positioned 이란?

✅ 개념

• Stack 안에서 위젯 위치를 직접 지정

👉 위치 기준:

• top / bottom / left / right

---

📌 4. Positioned 기본 예제

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.grey),

    Positioned(
      top: 10,
      left: 10,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),

    Positioned(
      bottom: 10,
      right: 10,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ],
)

👉 결과:

• 빨강 → 왼쪽 위
• 파랑 → 오른쪽 아래

---

📌 5. 실전 예제 (이미지 + 텍스트 오버레이)

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: StackExample(),
    );
  }
}

class StackExample extends StatelessWidget {
  const StackExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Stack Example")),
      body: Center(
        child: Stack(
          children: [
            // 배경 이미지
            Image.network(
              "https://picsum.photos/300",
              width: 300,
              height: 200,
              fit: BoxFit.cover,
            ),

            // 텍스트 오버레이
            Positioned(
              bottom: 10,
              left: 10,
              child: Container(
                color: Colors.black54,
                padding: const EdgeInsets.all(8),
                child: const Text(
                  "배너 텍스트",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 6. Stack 정렬 옵션

Stack(
  alignment: Alignment.center,
  children: [...],
)

👉 기본 위치를 중앙으로 설정 가능

---

📌 7. 핵심 규칙

항목	설명
Stack	겹치기
Positioned	위치 지정
순서	나중에 쓰면 위로 올라감

---

🚨 자주 하는 실수

❌ Positioned를 Stack 밖에서 사용

Positioned(...) // ❌ 에러

👉 반드시 Stack 안에서만 사용 가능

---

❌ 크기 없이 Stack 사용

👉 부모 크기 없으면 위치 이상해짐

---

🚀 한 줄 핵심

👉 Stack은 겹치고, Positioned는 위치 잡는다

---

🔥 실무 활용

• 이미지 위 텍스트
• 배지 (알림 숫자)
• 카드 UI
• 지도 핀

---