📦 Flutter Container 위젯 완전 정복

Container는 Flutter에서 가장 많이 쓰이는 레이아웃 위젯 중 하나입니다.
크기, 색상, 패딩, 마진, 테두리 등 모든 레이아웃의 기본이 되는 위젯이에요.

---

📌 기본 사용법

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Hello Container'),
)

→ 가로 200, 세로 100의 파란 박스 안에 텍스트가 출력됩니다.

---

🎨 스타일 속성 살펴보기

Container 주요 속성들:

• width, height: 크기 지정
• padding: 안쪽 여백
• margin: 바깥쪽 여백
• color: 배경 색
• decoration: 테두리, 그림자 등
• alignment: 내부 child 정렬

---

💡 예제: 스타일 적용

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 12),
  alignment: Alignment.center,
  width: 300,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Text(
    'Styled Container!',
    style: TextStyle(color: Colors.white, fontSize: 18),
  ),
)

---

🧱 Container vs SizedBox

구분	Container	SizedBox
레이아웃 제어	크기 + 스타일 가능	크기만 제어
스타일 속성	가능 (색상, 패딩 등)	불가 (단순 간격/크기)

---

📌 마무리

• 모든 UI의 기초가 되는 위젯
• 레이아웃 구성 연습할 땐 Container부터 시작!
• BoxDecoration 조합으로 카드 UI, 버튼 등 다양한 디자인 가능

---