Flutter Row 위젯 정리 (가로 레이아웃)

📌 1. Row란?

✅ 개념

• 가로 방향(→)으로 위젯을 배치하는 레이아웃
• Column의 가로 버전

👉 쉽게 말하면
Column = 세로 쌓기 / Row = 가로 쌓기

---

📌 2. 기본 예제

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

👉 결과:
[ 빨강 ][ 초록 ][ 파랑 ] → 가로로 나열

---

📌 3. 정렬 옵션 (핵심)

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

---

✅ mainAxisAlignment (가로 정렬)

값	설명
start	왼쪽 정렬
center	가운데
end	오른쪽
spaceBetween	양 끝 + 사이 균등
spaceAround	주변 여백 포함
spaceEvenly	완전 균등

---

✅ crossAxisAlignment (세로 정렬)

값	설명
start	위쪽
center	중앙
end	아래쪽
stretch	높이 꽉 채움

---

📌 4. Expanded / Flexible 함께 사용

✅ 남은 공간 채우기

Row(
  children: [
    Container(width: 100, color: Colors.red),

    Expanded(
      child: Container(color: Colors.green),
    ),

    Container(width: 50, color: Colors.blue),
  ],
)

👉 결과:

• 빨강: 100px
• 파랑: 50px
• 초록: 나머지 전부 차지

---

✅ 비율 나누기 (flex)

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

👉 결과:
1 : 2 비율로 가로 공간 분할

---

✅ Flexible 사용

Row(
  children: [
    Flexible(
      child: Container(
        color: Colors.orange,
        child: const Text("Flexible"),
      ),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

👉 Flexible → 내용 기반
👉 Expanded → 꽉 채움

---

📌 5. 실전 예제 (앱 UI 느낌)

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Row Example")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            // 프로필 이미지
            Container(
              width: 60,
              height: 60,
              color: Colors.grey,
            ),

            const SizedBox(width: 10),

            // 텍스트 영역
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text("상품 제목", style: TextStyle(fontSize: 18)),
                  Text("가격: 10,000원"),
                ],
              ),
            ),

            // 버튼
            ElevatedButton(
              onPressed: () {},
              child: const Text("구매"),
            ),
          ],
        ),
      ),
    );
  }
}

👉 실제 쇼핑앱 리스트 느낌 UI

---

📌 6. 실행 구조

[ 이미지 ] [ 텍스트 영역 (Expanded) ] [ 버튼 ]

---

🚨 자주 하는 실수

❌ overflow 에러 (오른쪽 넘침)

Row(
  children: [
    Text("엄청 긴 텍스트..."),
    Text("또 긴 텍스트..."),
  ],
)

👉 해결 👇

Expanded(
  child: Text(
    "엄청 긴 텍스트...",
    overflow: TextOverflow.ellipsis,
  ),
)

---

📌 7. 핵심 정리

위젯	역할
Row	가로 정렬
Expanded	남은 공간 채우기
Flexible	유연한 공간 사용

---

🚀 한 줄 핵심

👉 Row는 가로 배치, Expanded로 공간 컨트롤

---

Flutter Row + Expanded + Flexible + flex 조합 예제

📌 목표

• Row에서 Expanded / Flexible / flex를 같이 사용하는 방법 이해
• 가로 공간을 비율로 나누는 구조 익히기

---

✅ 핵심 예제 코드

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Row + Expanded + Flexible")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            // 🔴 고정 영역
            Container(
              width: 60,
              height: 60,
              color: Colors.red,
              child: const Center(child: Text("A")),
            ),

            const SizedBox(width: 10),

            // 🟢 Expanded (flex: 2)
            Expanded(
              flex: 2,
              child: Container(
                height: 60,
                color: Colors.green,
                child: const Center(child: Text("Expanded (2)")),
              ),
            ),

            const SizedBox(width: 10),

            // 🟠 Flexible (flex: 1)
            Flexible(
              flex: 1,
              child: Container(
                height: 60,
                color: Colors.orange,
                child: const Center(child: Text("Flexible (1)")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 레이아웃 구조

[ A (고정 60px) ] [ Expanded (2) ] [ Flexible (1) ]

---

📌 동작 원리

1️⃣ 고정 영역

Container(width: 60)

👉 무조건 60px 차지

---

2️⃣ Expanded (flex: 2)

Expanded(flex: 2)

👉 남은 공간 중 2 비율을 가져감
👉 무조건 꽉 채움 (tight)

---

3️⃣ Flexible (flex: 1)

Flexible(flex: 1)

👉 남은 공간 중 1 비율을 가져감
👉 하지만 내용 기반 + 유연하게 사용 (loose)

---

📌 실제 비율 계산

전체 가로 길이에서:

고정 영역 제외 → 남은 공간 = 3 비율 (2 + 1)

👉 Expanded : Flexible = 2 : 1

---

📌 Expanded vs Flexible 차이 (중요)

구분	Expanded	Flexible
공간 사용	무조건 채움	유연하게 채움
fit	tight	loose
추천 상황	꽉 채워야 할 때	자연스럽게

---

🚨 실무 팁

• 텍스트 영역 → Expanded
• 버튼/아이콘 → Flexible 또는 고정 크기
• 레이아웃 비율 조절 → flex

---

🚀 한 줄 핵심

👉 Row에서 남은 공간은 flex 비율로 나눠 먹는다

---