Container 위젯

Flutter 레이아웃의 기본, Container 위젯을 이해하자

 

Flutter에서 Container 위젯은 레이아웃을 구성하는 데 가장 기본적이면서도 강력한 도구입니다. 이를 비유하자면, 빈 상자(Box) 또는 캔버스처럼 생각할 수 있습니다. 이 빈 캔버스 위에 원하는 스타일, 정렬, 크기 등을 적용해 다양한 레이아웃을 구성할 수 있습니다.

---

1. Container란 무엇인가?

 

Container 위젯은 Flutter에서 레이아웃을 꾸미고 배치하는 데 사용되는 다목적 위젯입니다. 주요 기능은 다음과 같습니다:

• 크기 조절: width, height를 통해 크기를 조정할 수 있습니다.

• 스타일링: color, decoration을 사용해 배경색, 테두리, 그림자 등을 추가할 수 있습니다.

• 배치: 내부 여백(padding), 외부 여백(margin), 정렬(alignment) 등을 설정할 수 있습니다.

 

2. Container의 주요 속성

 

Container는 다양한 속성을 제공하며, 이를 통해 위젯을 쉽게 커스터마이징할 수 있습니다.

속성	설명
width / height	컨테이너의 너비와 높이를 설정합니다.
color	컨테이너의 배경색을 지정합니다.
padding	내부 여백을 설정하여 컨테이너 내부의 자식 위젯이 테두리로부터 얼마나 떨어져야 하는지 결정합니다.
margin	외부 여백을 설정하여 컨테이너와 주변 위젯 간의 간격을 조정합니다.
decoration	배경, 테두리, 그림자, 둥근 모서리 등의 복잡한 스타일을 설정할 수 있습니다. color와 함께 사용하지 못하며, 둘 중 하나만 사용 가능합니다.
alignment	자식 위젯의 배치를 컨테이너 내부에서 조정합니다.
constraints	컨테이너의 최소 및 최대 크기를 설정합니다.
child	Container 내부에 들어갈 다른 위젯 설정(모든 위젯에 자식 위젯을 지정할 수 있음)

 

---

3. 실제 예제 코드로 이해하기

 

기본적인 Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue, // 단순 배경색 설정
)

여백과 정렬 추가

Container(
  margin: EdgeInsets.all(20), // 외부 여백
  padding: EdgeInsets.all(10), // 내부 여백
  color: Colors.orange,
  child: Text('Hello Flutter!'), // 자식 위젯
)

스타일링과 둥근 테두리

Container(
  width: 150,
  height: 150,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(15), // 둥근 모서리
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        spreadRadius: 2,
        blurRadius: 5,
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Styled Box',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

 

 

4. Container의 한계

 

Container를 지나치게 남용하면 성능에 영향을 미칠 수 있습니다. Flutter는 레이아웃을 효율적으로 구성하기 위해 더 간단한 위젯(예: Padding, SizedBox, Align)을 사용할 수 있습니다. 따라서 Container를 사용할 때 꼭 필요한 경우에만 활용하는 것이 좋습니다.