5. Flutter 핵심 위젯 정리

1. 레이아웃 (UI 구조의 뼈대)

Flutter는 거의 전부가 레이아웃 싸움이다. 이걸 못하면 아무것도 못 만든다.

1️⃣ Column / Row

1) 개념

• Column → 세로 배치

• Row → 가로 배치

2) 핵심 옵션

3) 예시

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("A"),
    Text("B"),
  ],
)

4) 핵심 포인트 (중요)

• Column은 세로로 무한히 늘어나려고 함 → overflow 발생

• 그래서 반드시 아래 중 하나 필요:
• Expanded
• Flexible
• SingleChildScrollView

2️⃣ Expanded / Flexible

1) 개념

• 남은 공간을 비율로 나눠 먹는 위젯

2) 옵션

3) 예시

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

4) 언제 쓰냐

• 화면 꽉 채우기

• 반응형 레이아웃

3️⃣ Container

1) 개념

• 박스 UI (padding, margin, 색, 크기 등)

2) 핵심 옵션

3) 예시

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
)

4) 주의

• 단순 스타일만이면 Container 대신 Padding, SizedBox로 분리하는 게 더 명확

4️⃣ SizedBox

1) 개념

• 크기 지정 or 간격용

2) 사용

SizedBox(height: 20)

3) 언제 쓰냐

• margin 대신 spacing

• 고정 크기

5️⃣ Padding

4) 개념

• 내부 여백 전용 위젯

Padding(
  padding: EdgeInsets.all(16),
  child: Text("Hello"),
)

2. 스크롤 & 리스트

1️⃣ ListView

1) 개념

• 스크롤 가능한 리스트

2) 옵션

3) 예시 (실무)

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Text("Item $index");
  },
)

4) 핵심

• 대부분 builder 사용

• 대량 데이터 → builder 필수

2️⃣ SingleChildScrollView

1) 개념

• 전체를 스크롤 가능하게

SingleChildScrollView(
  child: Column(...)
)

2) 언제 쓰냐

• Column overflow 해결

• 폼 화면

3. 텍스트 & 입력

1️⃣ Text

1) 개념

• 텍스트 출력

2) 옵션

2️⃣ TextField

1) 개념

• 사용자 입력

2) 핵심 옵션

3) 예시

TextField(
  controller: TextEditingController(),
  decoration: InputDecoration(
    labelText: "이메일",
    border: OutlineInputBorder(),
  ),
)

4) 핵심 포인트

• 입력값 관리 → controller 필수

4. 버튼 & 인터랙션

1️⃣ ElevatedButton

1) 개념

• 기본 버튼

2) 옵션

ElevatedButton(
  onPressed: () {},
  child: Text("클릭"),
)

2️⃣ GestureDetector

1) 개념

• 모든 터치 이벤트 감지

2) 옵션

GestureDetector(
  onTap: () {},
  child: Container(...)
)

3) 언제 쓰냐

• 버튼이 아닌 UI 클릭 처리

5. 화면 구조

1️⃣ Scaffold

1) 개념

• 앱 화면 기본 틀

2) 옵션

Scaffold(
  appBar: AppBar(title: Text("제목")),
  body: Center(child: Text("내용")),
)

2️⃣ AppBar

1) 개념

• 상단 네비게이션

2) 옵션

6. 정렬 & 위치

1️⃣ Center / Align

1) 개념

• 위치 조정

Center(child: Text("중앙"))

Align(
  alignment: Alignment.topRight,
  child: Text("오른쪽 위"),
)

2️⃣ Stack

1) 개념

• 겹치기 UI

2) 옵션

Stack(
  children: [
    Container(color: Colors.red),
    Positioned(
      top: 10,
      left: 10,
      child: Text("위에 표시"),
    )
  ],
)

🔥 핵심 요약 (이건 반드시 기억)

1. 레이아웃 핵심 4개

• Column / Row

• Expanded

• Container

• SizedBox

2. 실전 필수 패턴

• 스크롤 → ListView.builder

• 입력 → TextField + controller

• 화면 → Scaffold

3. 초보가 가장 많이 틀리는 것

• Column overflow

• Expanded 안 쓰고 레이아웃 깨짐

• ListView 성능 문제 (children 남용)