📦 Flutter 위젯 완전 정복 – Column, Row, Container 이해하기

Flutter에서는 모든 것이 **위젯(Widget)**입니다.
텍스트, 버튼, 이미지뿐 아니라 여백, 배경, 정렬까지 모든 화면 요소를 위젯으로 표현합니다.

이번 글에서는 Flutter UI의 기본이 되는 세 가지 핵심 위젯,
Column, Row, Container를 하나씩 직접 예제를 통해 배워보겠습니다.

---

✅ 위젯이란?

위젯은 Flutter 앱의 UI를 구성하는 작은 부품입니다.
우리가 눈으로 보는 모든 UI 요소 = 위젯입니다.

예를 들어…

• Text("안녕하세요") → 텍스트 위젯
• Image.asset('logo.png') → 이미지 위젯
• Column([...]) → 수직으로 위젯을 배치하는 위젯
• Container() → 박스(배경, 여백, 테두리 등 가능)

---

📐 Column 위젯 – 세로로 쌓기

💡 Column이란?

• 여러 위젯을 **수직 방향(세로)**으로 나열할 때 사용
• 내부 요소는 children 배열로 넣습니다

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...]
)

⚙️ 주요 속성

• mainAxisAlignment: 세로 방향 정렬 (start, center, end, spaceBetween 등)
• crossAxisAlignment: 가로 방향 정렬

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...]
)

---

📏 Row 위젯 – 가로로 나열하기

💡 Row이란?

• 여러 위젯을 가로 방향으로 나열할 때 사용

Row(
  children: [
    Icon(Icons.star),
    Text('별 아이콘 옆 텍스트'),
  ],
)

⚙️ 주요 속성

• mainAxisAlignment: 가로 방향 정렬
• crossAxisAlignment: 세로 방향 정렬

📌 Row와 Column은 서로 반대 방향입니다.
화면에 요소를 정렬하려면 반드시 이 둘을 자유자재로 다룰 수 있어야 해요.

---

📦 Container 위젯 – 박스처럼 감싸기

💡 Container란?

Container는 여백, 배경색, 패딩, 테두리, 크기 지정 등을 위한 범용 박스 위젯입니다.
다른 위젯을 감싸서 꾸밀 수 있어요.

Container(
  width: 200,
  height: 100,
  color: Colors.amber,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(horizontal: 20),
  child: Text('이건 컨테이너 안에 있는 텍스트'),
)

⚙️ 자주 쓰는 속성

속성설명

width, height	크기 지정
color	배경 색상
padding	내부 여백
margin	외부 여백
child	내부에 표시할 위젯

 

📌 Container는 Flutter에서 디자인 커스터마이징의 핵심입니다.

---

💻 실습 예제 – Column + Row + Container 함께 사용하기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 위젯 예제')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('위쪽 텍스트'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                  child: Center(child: Text('왼쪽')),
                ),
                SizedBox(width: 10),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                  child: Center(child: Text('오른쪽')),
                ),
              ],
            ),
            Text('아래쪽 텍스트'),
          ],
        ),
      ),
    );
  }
}

🧾 결과 설명

• Column으로 위-가운데-아래 구성
• 가운데는 Row로 두 개의 Container를 나란히 배치
• 색상과 텍스트로 확인 가능

---

🧠 마무리 요약

위젯기능 요약

Column	수직 방향으로 위젯 정렬
Row	수평 방향으로 위젯 정렬
Container	배경, 여백, 크기, 꾸미기 전용 박스 위젯

 

이 세 가지 위젯만 잘 다뤄도 Flutter의 거의 모든 레이아웃을 구성할 수 있습니다.