Flutter Container 위젯 완벽 가이드

Container 위젯이란?

Container는 Flutter에서 가장 많이 사용되는 기본 위젯 중 하나로, 자식 위젯을 담는 박스 역할을 합니다. 레이아웃, 스타일링, 위치 지정 등 다양한 기능을 제공하는 편리한 위젯입니다.

주요 속성들

1. 크기 관련 속성

• width: 너비 지정
• height: 높이 지정
• constraints: BoxConstraints로 최소/최대 크기 제한

2. 여백 관련 속성

• padding: 내부 여백 (자식 위젯과 Container 경계 사이)
• margin: 외부 여백 (Container와 외부 요소 사이)

3. 스타일 관련 속성

• color: 배경색
• decoration: 더 복잡한 스타일링 (BoxDecoration 사용)
• foregroundDecoration: 자식 위젯 위에 그려지는 장식

4. 정렬 및 변형

• alignment: 자식 위젯의 정렬 위치
• transform: Matrix4를 이용한 회전, 이동, 크기 변형

5. 자식 위젯

• child: Container 안에 들어갈 위젯

기본 사용 예제

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: Text('Hello Container'),
)

다양한 활용 예제

1. Padding과 Margin 사용

Container(
  margin: EdgeInsets.all(20),  // 외부 여백 20
  padding: EdgeInsets.symmetric(
    horizontal: 16,  // 좌우 16
    vertical: 8,     // 상하 8
  ),
  color: Colors.green,
  child: Text('Padding & Margin'),
)

2. BoxDecoration으로 스타일링

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),  // 모서리 둥글게
    border: Border.all(
      color: Colors.red,
      width: 3,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Center(child: Text('Styled Box')),
)

3. 그라디언트 배경

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.blue, Colors.pink],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: BorderRadius.circular(15),
  ),
  child: Center(
    child: Text(
      'Gradient',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
)

4. 정렬(Alignment) 사용

Container(
  width: 200,
  height: 200,
  color: Colors.amber,
  alignment: Alignment.bottomRight,  // 우측 하단 정렬
  child: Text('Aligned Text'),
)

5. Transform 사용 (회전)

Container(
  width: 100,
  height: 100,
  color: Colors.red,
  transform: Matrix4.rotationZ(0.2),  // Z축 기준 회전
  child: Center(child: Text('Rotated')),
)

6. 이미지 배경

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
)

7. 복합적인 예제 - 카드 스타일

Container(
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: Offset(0, 5),
      ),
    ],
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.star, size: 50, color: Colors.amber),
      SizedBox(height: 10),
      Text(
        '프리미엄 카드',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      SizedBox(height: 5),
      Text('이것은 카드 스타일의 Container 예제입니다.'),
    ],
  ),
)

중요한 동작 특성

크기 결정 순서:

1. constraints 제약 조건 확인
2. width와 height 적용
3. 자식 위젯 크기에 맞춤 (위 속성들이 없을 때)
4. 부모 위젯 크기에 맞춤 (자식도 없을 때)

주의사항:

• color와 decoration을 동시에 사용할 수 없습니다. decoration 내부의 color를 사용해야 합니다.
• decoration을 사용하면 더 다양한 스타일링이 가능합니다.

EdgeInsets 옵션

// 모든 방향 동일
EdgeInsets.all(16)

// 상하좌우 개별 지정
EdgeInsets.only(left: 10, top: 20, right: 10, bottom: 20)

// 상하/좌우 대칭
EdgeInsets.symmetric(horizontal: 16, vertical: 8)

// LTRB (Left, Top, Right, Bottom)
EdgeInsets.fromLTRB(10, 20, 10, 20)

마무리

Container는 매우 유연하고 강력한 위젯이므로, 이러한 속성들을 조합해서 원하는 UI를 구현할 수 있습니다. 실제 프로젝트에서 가장 자주 사용하게 될 위젯 중 하나입니다!