플러터에서 Cantainer 와 SizedBox, 언제 어떤 것을 사용해야 할까요?

 

플러터 개발에서 레이아웃을 구성할 때 컨테이너와 사이즈드 박스는 가장 기본적으로 사용되는 위젯입니다.

두 위젯 모두 크기와 위치를 설정하는 데 사용되지만, 약간의 차이점과 장단점이 존재하기 때문에 상황에 따라 적절하게 선택해야 합니다.

이 블로그 글에서는 컨테이너와 사이즈드 박스의 특징과 차이점을 자세히 살펴보고, 언제 어떤 위젯을 사용해야 하는지 명확하게 안내해 드리겠습니다.

 

1. 컨테이너 위젯

 

컨테이너 위젯은 자식 위젯을 감싸고 배경색, 여백, 패딩 등을 설정하여 레이아웃을 구성하는 데 사용됩니다.

또한, decoration 속성을 사용하여 그림자, 테두리, 그라데이션 등 다양한 시각 효과를 추가할 수 있습니다.

 

컨테이너 위젯의 주요 특징

• 자식 위젯을 감싸고 레이아웃을 구성합니다.
• 배경색, 여백, 패딩 등을 설정할 수 있습니다.
• decoration 속성을 사용하여 다양한 시각 효과를 추가할 수 있습니다.
• 다른 위젯들과 함께 사용하여 원하는 레이아웃을 구현할 수 있습니다.

컨테이너 위젯 사용 예시

Container(
  color: Colors.blue, // 배경색 설정
  margin: EdgeInsets.all(16.0), // 여백 설정
  padding: EdgeInsets.all(8.0), // 패딩 설정
  child: Text('플러터 배우기'), // 자식 위젯 설정
),

 

2. 사이즈드 박스 위젯

 

사이즈드 박스 위젯은 자체적으로 아무런 내용도 가지고 있지 않고, 단순히 크기와 위치만을 설정하는 데 사용됩니다.

주로 다른 위젯들 사이에 공간을 만들거나, 특정 크기의 영역을 제한하는 데 사용됩니다.

 

사이즈드 박스 위젯의 주요 특징

• 자체적으로 아무런 내용도 가지고 있지 않습니다.
• 크기와 위치만을 설정할 수 있습니다.
• 다른 위젯들 사이에 공간을 만들거나, 특정 크기의 영역을 제한하는 데 사용됩니다.
• 컨테이너 위젯보다 간단하고 가벼운 위젯입니다.

사이즈드 박스 위젯 사용 예시

SizedBox(
  width: 100.0, // 너비 설정
  height: 200.0, // 높이 설정
),

SizedBox.fromSize(
  size: Size(100.0, 200.0), // 크기 설정
),

 

3. 컨테이너 vs 사이즈드 박스, 언제 어떤 것을 사용해야 할까요?

• 레이아웃 구성 및 시각 효과: 자식 위젯을 감싸고 배경색, 여백, 패딩 등을 설정하여 레이아웃을 구성하고, decoration 속성을 사용하여 다양한 시각 효과를 추가할 때는 컨테이너 위젯을 사용하는 것이 좋습니다.
• 간단한 공간 조정: 다른 위젯들 사이에 간단하게 공간을 만들거나, 특정 크기의 영역을 제한할 때는 사이즈드 박스 위젯을 사용하는 것이 더 효율적입니다.
• 성능: 컨테이너 위젯은 decoration 속성으로 인해 사이즈드 박스 위젯보다 성능적으로 다소 무겁습니다.
• 따라서 성능이 중요한 경우, 간단한 공간 조정에는 사이즈드 박스 위젯을 사용하는 것이 좋습니다.

4. 결론

 

컨테이너 위젯과 사이즈드 박스 위젯은 각각 장단점이 존재하기 때문에 상황에 따라 적절하게 선택해야 합니다.

레이아웃 구성 및 시각 효과가 필요한 경우에는 컨테이너 위젯을, 간단한 공간 조정이나 성능이 중요한 경우에는 사이즈드 박스 위젯을 사용하는 것을 권장합니다.