[Flutter] Expanded 위젯 설명 및 사용 방법

Flutter에서 레이아웃을 구성할 때 Expanded 위젯은 Row, Column, Flex 위젯 내에서 자식 위젯들이 남은 공간을 차지하도록 확장할 수 있게 해주는 중요한 위젯입니다. Expanded는 주어진 공간을 유연하게 배분하며, 레이아웃을 동적으로 조정하는 데 유용합니다.

---

Expanded 위젯이란?

Expanded 위젯은 부모 위젯(Row, Column, Flex)이 갖고 있는 남은 공간을 차지하도록 자식 위젯을 확장하는 역할을 합니다. 즉, Expanded로 감싼 위젯은 가능한 최대 크기로 확장되며, 여러 개의 Expanded 위젯이 있을 경우 비율을 조정할 수도 있습니다.

📌 주요 특징

• Row, Column, Flex 위젯 내에서만 사용할 수 있음
• 자식 위젯이 가용 가능한 공간을 최대로 차지하도록 확장됨
• 여러 개의 Expanded가 있을 경우 flex 값을 이용해 비율을 조절할 수 있음

---

🛠 기본 사용법

아래 예제는 Expanded를 사용하여 화면을 균등하게 나누는 방법을 보여줍니다.

✅ 예제 1: Expanded를 이용한 균등한 공간 분배

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Expanded 위젯 예제')),
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
                child: const Center(child: Text('1번 영역', style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                child: const Center(child: Text('2번 영역', style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                child: const Center(child: Text('3번 영역', style: TextStyle(color: Colors.white))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

🎨 결과

Column 내부에 있는 Expanded 위젯들이 화면을 세 부분으로 동일하게 나눠 각 영역이 1/3씩 차지합니다.

---

✅ 예제 2: flex 값으로 공간 비율 조정

여러 개의 Expanded 위젯을 사용할 때 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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Expanded flex 예제')),
        body: Column(
          children: [
            Expanded(
              flex: 1, // 전체 공간의 1/6 차지
              child: Container(
                color: Colors.red,
                child: const Center(child: Text('1번 (1/6)', style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(
              flex: 2, // 전체 공간의 2/6 (1/3) 차지
              child: Container(
                color: Colors.green,
                child: const Center(child: Text('2번 (2/6)', style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(
              flex: 3, // 전체 공간의 3/6 (1/2) 차지
              child: Container(
                color: Colors.blue,
                child: const Center(child: Text('3번 (3/6)', style: TextStyle(color: Colors.white))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

🎨 결과

• 빨간색 영역이 전체 공간의 1/6
• 초록색 영역이 전체 공간의 2/6
• 파란색 영역이 전체 공간의 3/6

각 영역이 flex 값에 비례하여 확장됩니다.

---

✅ 예제 3: Row에서 Expanded 사용

아래 예제는 Row에서 Expanded를 사용하여 가로 너비를 균등하게 배분하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Row에서 Expanded 사용')),
        body: Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.orange,
                child: const Center(child: Text('왼쪽 (2/3)', style: TextStyle(color: Colors.white))),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.purple,
                child: const Center(child: Text('오른쪽 (1/3)', style: TextStyle(color: Colors.white))),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

🎨 결과

• 왼쪽(주황색) 박스는 2/3을 차지
• 오른쪽(보라색) 박스는 1/3을 차지

---

📌 Expanded vs Flexible

비슷한 기능을 하는 Flexible 위젯도 있지만, 차이가 있습니다.

위젯	차이점
Expanded	가능한 모든 공간을 차지하려고 함
Flexible	필요한 만큼만 공간을 차지함

 

즉, Expanded는 최대한 확장하지만, Flexible은 자식 위젯 크기에 따라 공간을 확보하는 점에서 차이가 있습니다.

✅ Flexible 예제

Flexible(
  child: Container(
    color: Colors.blue,
    height: 100, // 필요한 높이만 차지
  ),
)

위 코드는 Expanded와 다르게 100px 높이만 차지하고 더 확장되지 않습니다.

---

 

• Expanded는 Row, Column, Flex 내부에서만 사용 가능
• Expanded는 남은 공간을 최대한 확장하려 함
• flex 값을 사용하면 공간 비율을 조절 가능
• Flexible과의 차이점: Expanded는 무조건 확장, Flexible은 필요한 만큼만 사용