SizedBox로 레이아웃에 여백 넣기

SizedBox로 레이아웃에 여백 넣기

레이아웃에 단순히 여백을 추가하고 싶을 때, 굳이 Container를 쓸 필요는 없어요. 크기만 지정하는 용도라면 SizedBox가 훨씬 가볍고 적절하죠. 이 진단은 그런 상황을 잡아내서 더 가벼운 위젯을 쓰도록 안내해 줍니다.

출처: sized_box_for_whitespace

본문

진단 내용

Dart analyzer는 height나 width 인자만 사용해서 만든 Container를 발견하면 이 진단을 내보내요. 크기만 잡아주는 역할이라면 Container가 담당할 일이 많을 필요가 없거든요.

예제

다음 코드는 Container에 width 인자만 사용해서 이 진단이 발생해요:

import 'package:flutter/material.dart';

Widget buildRow() {
  return Row(
    children: [
      const Text('...'),
      Container(width: 4, child: Text('...')),
      const Expanded(child: Text('...')),
    ],
  );
}

고치는 방법

Container를 같은 크기의 SizedBox로 바꿔 주면 돼요:

import 'package:flutter/material.dart';

Widget buildRow() {
  return Row(
    children: [
      Text('...'),
      SizedBox(width: 4, child: Text('...')),
      Expanded(child: Text('...')),
    ],
  );
}

더 알아보기