`use_decorated_box` 린트 규칙: DecoratedBox 사용하기

use_decorated_box 린트 규칙: DecoratedBox 사용하기

use_decorated_box는 Container가 장식(Decoration)만 가지고 있을 때 DecoratedBox를 쓰도록 알려주는 린트 규칙이에요. use_colored_box와 비슷한 결의 가벼운 위젯을 권장하는 규칙이에요.

출처: use_decorated_box

본문

설명

Container가 오직 Decoration만 가질 때는 DecoratedBox를 사용하세요. Container는 DecoratedBox보다 무거운 위젯이에요. 여기서도 보너스로 DecoratedBox가 const 생성자를 가지고 있어서 상수로 만들 수 있어요.

BAD:

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

Container에 decoration만 넣고 있어요. Container는 여러 레이아웃·페인팅 작업을 지원하는 무거운 위젯이라 장식 하나만 쓰기엔 과해요.

GOOD:

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

DecoratedBox로 바꾸니 훨씬 가볍고 const 생성자도 쓸 수 있어요.

활성화하기

use_decorated_box 규칙을 켜려면 analysis_options.yaml 파일의 linter > rules에 use_decorated_box를 추가해요.

linter:
  rules:
    - use_decorated_box

YAML 맵 문법을 쓴다면 linter > rules 아래에 use_decorated_box: true를 넣으면 돼요.

linter:
  rules:
    use_decorated_box: true

더 알아보기