[flutter] Container위젯과 DecoratedBox 위젯의 효율적인 사용

앱 개발 도중, Container 위젯에 BoxDecoration을 사용해 스타일링을 하던 중 재미있는 사실을 발견했습니다.

boxShadow의 color 옵션을 설정하면서 withOpacity가 deprecated 되었는지 확인하려고 Flutter 공식 문서를 살펴보았는데,

우연히 Container와 DecoratedBox를 비교한 사례를 접하게 되었습니다.

 

공식 문서의 예시

https://dart.dev/tools/linter-rules/use_decorated_box

use_decorated_box

 

Flutter 공식 문서는 Container를 사용하는 나쁜 예와, 더 효율적인 DecoratedBox를 사용하는 좋은 예를 아래와 같이 제시하고 있습니다:

❌ 나쁜 예:

Widget buildArea() {
  return Container(
    decoration: const BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
    child: const Text('...'),
  );
}

 

✅ 좋은 예:

Widget buildArea() {
  return const DecoratedBox(
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(
        Radius.circular(5),
      ),
    ),
    child: Text('...'),
  );
}

 

왜 Container 대신 DecoratedBox를 사용할까?

공식 문서에 따르면, Container 대신 DecoratedBox를 사용하는 것이 더 효율적이고 성능이 좋다고 합니다. 그 이유를 정리해보았습니다:

1. Container는 불필요한 오버헤드가 있다

Container는 다목적 위젯으로, 다양한 속성을 제공합니다

ex) alignment, padding, margin, constraints, transform 등.

이처럼 다양한 기능을 지원하기 위해 추가적인 계산과 메모리가 사용됩니다.

하지만 단순히 배경, 테두리, 그림자 등 decoration만 필요한 경우라면, Container를 사용하는 것은 과한 선택입니다.

예:

Container(
  decoration: BoxDecoration(color: Colors.blue),
  child: Text('...'),
)

위 코드는 Container의 많은 기능을 전혀 활용하지 않고 있습니다.

 

2. DecoratedBox는 더 가벼운 위젯이다

DecoratedBox는 decoration과 child만 처리하기 때문에 불필요한 기능이 포함되지 않습니다.

또한, DecoratedBox는 const 생성자를 지원하여 다음과 같은 이점이 있습니다:

• 위젯 트리 최적화: Flutter가 불필요한 위젯 재생성을 방지.

• 앱의 메모리 사용량 개선.

 

3. 성능 최적화

Flutter는 가장 단순한 위젯을 사용하는 것이 성능 최적화에 중요하다고 강조합니다.

복잡한 위젯 트리는 렌더링 성능 저하를 초래할 수 있습니다.

따라서, 단순한 작업에는 DecoratedBox를 사용하는 것이 더 효율적입니다.

 

언제 Container를 사용해야 할까?

그렇다면 Container는 언제 사용하는 것이 적합할까요? 다음과 같은 경우에 Container를 사용하는 것이 좋습니다:

1. 여러 속성을 조합해야 할 때

• 예: padding, margin, alignment, constraints를 함께 사용할 때.

2. 복잡한 레이아웃과 스타일링이 필요한 경우

• 예: decoration뿐만 아니라 다른 속성도 필요할 때.

예:

Container(
  alignment: Alignment.center,
  padding: EdgeInsets.all(8.0),
  margin: EdgeInsets.symmetric(vertical: 10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.all(Radius.circular(5)),
  ),
  child: Text('...'),
)

 

정리: DecoratedBox vs. Container 

DecoratedBox : 단순히 배경, 테두리, 그림자 등 decoration만 필요할 때 → 더 가볍고 효율적.

Container : alignment, padding, margin 등의 추가 속성이 필요할 때 → 다목적 위젯으로 사용.

 

결론

단순히 스타일링이 필요하다면 Container 대신 DecoratedBox를 사용하는 것이 Flutter 위젯 트리를 간소화하고 성능을 최적화하는 데 도움이 됩니다. 반면, 여러 기능이 조합된 복잡한 레이아웃에서는 Container를 사용하는 것이 적합합니다.

Flutter 개발에서 이러한 세부적인 차이를 이해하고 올바르게 적용한다면, 더 효율적인 코드와 성능을 갖춘 앱을 개발할 수 있을 것입니다! 😊

이 글이 여러분의 Flutter 개발에 도움이 되길 바랍니다.