Container, Padding, SizedBox — 간격과 크기 조절

레이아웃을 잡을 때 위젯 사이의 간격이나 크기 조절은 매일 하는 작업입니다. Flutter에서는 이 역할을 담당하는 위젯들이 따로 있습니다.

SizedBox — 고정 크기 & 간격

가장 가볍고 간단한 간격 위젯입니다. 위젯 사이에 빈 공간을 넣을 때 주로 사용합니다.

DART

Column(
  children: const [
    Text('첫 번째'),
    SizedBox(height: 16),  // 세로 간격 16px
    Text('두 번째'),
    SizedBox(height: 8),   // 세로 간격 8px
    Text('세 번째'),
  ],
)

Row(
  children: const [
    Icon(Icons.star),
    SizedBox(width: 8),    // 가로 간격 8px
    Text('즐겨찾기'),
  ],
)

SizedBox의 다양한 활용

DART

// 고정 크기 지정
SizedBox(
  width: 200,
  height: 100,
  child: Card(child: Text('고정 크기 카드')),
)

// 가능한 최대 크기로 확장
SizedBox.expand(
  child: Container(color: Colors.blue),
)

// 크기 0으로 축소 (조건부 렌더링에 활용)
SizedBox.shrink()

Padding — 내부 여백

자식 위젯의 안쪽에 여백을 추가합니다. CSS의 padding과 동일한 개념입니다.

DART

Padding(
  padding: const EdgeInsets.all(16),  // 상하좌우 16px
  child: Text('패딩이 적용된 텍스트'),
)

// EdgeInsets의 다양한 생성자
Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: 24,  // 좌우
    vertical: 12,    // 상하
  ),
  child: Text('비대칭 패딩'),
)

Padding(
  padding: const EdgeInsets.only(
    top: 8,
    left: 16,
    right: 16,
    bottom: 24,
  ),
  child: Text('개별 지정'),
)

// fromLTRB: 왼쪽, 위, 오른쪽, 아래 순서
Padding(
  padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
  child: Text('LTRB 순서'),
)

Container — 만능 위젯

Container는 크기, 여백, 패딩, 배경색, 테두리, 그림자 등 다양한 속성을 한 번에 지정할 수 있습니다.

DART

Container(
  width: 200,
  height: 100,
  margin: const EdgeInsets.all(16),     // 바깥 여백
  padding: const EdgeInsets.all(12),    // 안쪽 여백
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(
      color: Colors.grey.shade300,
      width: 1,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 8,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: const Text('스타일이 적용된 컨테이너'),
)

Container의 속성들

속성	역할
`width`, `height`	크기 지정
`margin`	바깥 여백 (다른 위젯과의 간격)
`padding`	안쪽 여백 (자식과의 간격)
`color`	배경색 (`decoration`과 동시 사용 불가)
`decoration`	테두리, 그라데이션, 그림자 등
`alignment`	자식 위젯 정렬
`constraints`	최소/최대 크기 제약
`transform`	회전, 이동 등 변환

decoration vs color

DART

// 이렇게 하면 에러!
Container(
  color: Colors.blue,
  decoration: BoxDecoration(...),  // color와 동시 사용 불가
)

// 올바른 방법: decoration 안에 color 지정
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  ),
)

Container vs 단일 목적 위젯

Container는 편리하지만 무겁습니다. 단순한 용도에는 전용 위젯을 쓰는 것이 성능에 좋습니다.

DART

// 비효율적: Container로 패딩만 주기
Container(
  padding: const EdgeInsets.all(16),
  child: Text('텍스트'),
)

// 효율적: Padding 위젯 사용
Padding(
  padding: const EdgeInsets.all(16),
  child: Text('텍스트'),
)

// 비효율적: Container로 크기만 지정
Container(
  width: 100,
  height: 100,
)

// 효율적: SizedBox 사용
SizedBox(width: 100, height: 100)

// 비효율적: Container로 정렬만
Container(
  alignment: Alignment.center,
  child: Text('중앙'),
)

// 효율적: Center 또는 Align 사용
Center(child: Text('중앙'))

면접 포인트: Container는 내부적으로 여러 위젯을 조합한 편의 위젯(convenience widget) 입니다. 성능을 신경 쓴다면 단일 목적 위젯을 우선 사용하세요.

DecoratedBox — 장식만 필요할 때

크기나 여백 없이 배경/테두리만 필요하면 DecoratedBox가 더 가볍습니다.

DART

DecoratedBox(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(16),
  ),
  child: const Padding(
    padding: EdgeInsets.all(24),
    child: Text(
      '그라데이션 배경',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

ConstrainedBox와 UnconstrainedBox

DART

// 최소/최대 크기 제약
ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 200,
  ),
  child: Text('제약이 있는 위젯'),
)

// 부모의 제약을 무시 (오버플로우 주의)
UnconstrainedBox(
  child: Container(
    width: 500,  // 부모보다 클 수 있음
    height: 100,
    color: Colors.red,
  ),
)

실전 팁: 간격 상수화

DART

// 앱 전체에서 일관된 간격 사용
abstract class AppSpacing {
  static const double xs = 4;
  static const double sm = 8;
  static const double md = 16;
  static const double lg = 24;
  static const double xl = 32;
}

// 사용
Padding(
  padding: const EdgeInsets.all(AppSpacing.md),
  child: Column(
    children: const [
      Text('제목'),
      SizedBox(height: AppSpacing.sm),
      Text('내용'),
    ],
  ),
)

정리

간격만 필요하면 SizedBox, 패딩만 필요하면 Padding 을 사용하세요
Container 는 여러 속성을 한 번에 지정할 때 유용하지만 무겁습니다
color와 decoration은 동시에 사용할 수 없습니다
성능을 위해 단일 목적 위젯을 우선 사용하는 습관을 들이세요
간격 값은 상수로 관리하면 일관성 있는 디자인을 유지할 수 있습니다