Flutter Layout 핵심 위젯: Container / Column / Expanded

📌 1. Container

✅ 개념

• 가장 기본적인 박스 위젯
• 크기, 색상, 여백, 정렬 등을 설정 가능

---

✅ 예제

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: const Center(
    child: Text("Box"),
  ),
)

👉 파란색 100x100 박스 생성

---

✅ 주요 속성

속성	설명
width / height	크기
color	배경색
padding	내부 여백
margin	외부 여백
alignment	내부 정렬

---

📌 2. Column

✅ 개념

• 세로 방향으로 위젯을 쌓는 레이아웃

---

✅ 예제

Column(
  children: [
    Container(height: 50, color: Colors.red),
    Container(height: 50, color: Colors.green),
    Container(height: 50, color: Colors.blue),
  ],
)

👉 위에서 아래로 순서대로 배치됨

---

✅ 정렬 옵션

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 세로 정렬
  crossAxisAlignment: CrossAxisAlignment.center, // 가로 정렬
  children: [...],
)

---

📌 3. Expanded

✅ 개념

• 남은 공간을 자동으로 채우는 위젯
• Column 또는 Row 안에서 사용

---

✅ 핵심

👉 "남은 공간을 나눠서 가져간다"

---

✅ 예제 1 (기본)

Column(
  children: [
    Container(height: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.green),
    ),
  ],
)

👉 빨간색 100px
👉 나머지는 초록색이 전부 차지

---

✅ 예제 2 (비율 나누기)

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
)

👉 화면을 1:2 비율로 나눔

---

📌 4. 종합 예제 (실전 느낌)

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: LayoutExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Layout Example")),
      body: Column(
        children: [
          // 상단 고정 영역
          Container(
            height: 100,
            color: Colors.red,
            child: const Center(child: Text("Header")),
          ),

          // 중간 확장 영역
          Expanded(
            child: Container(
              color: Colors.green,
              child: const Center(child: Text("Content")),
            ),
          ),

          // 하단 고정 영역
          Container(
            height: 80,
            color: Colors.blue,
            child: const Center(child: Text("Footer")),
          ),
        ],
      ),
    );
  }
}

---

📌 실행 결과 구조

[ Header (100px) ]
[ Content (남은 전체) ]
[ Footer (80px) ]

---

📌 5. 핵심 정리

위젯	역할
Container	박스 (디자인/레이아웃)
Column	세로 정렬
Expanded	남은 공간 채우기

---

🚨 자주 하는 실수

❌ Expanded를 Column 밖에서 사용

Expanded(
  child: Container(),
)

👉 에러 발생

---

❌ 높이 충돌

Expanded(
  child: Container(height: 100),
)

👉 의미 없음 (Expanded가 우선)

---

🚀 한 줄 핵심

👉 Column은 쌓고, Container는 꾸미고, Expanded는 채운다

---

📌 flex 비율 예제

Column(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

👉 비율:

빨강 : 초록 : 파랑 = 1 : 2 : 1