Flutter에서 SizedBox는 매우 자주 사용하는데요, 일반적으로 Column 또는 Row 내부에서 위젯 사이에 간격을 추가할 때 사용합니다.
실제로는 종종 다음과 같은 코드로 사용합니다.
# Column에서
Column(
children: const [
Text('Spacing is a good idea in UX design.'),
SizedBox(height: 16),
Text('It makes your UI less cluttered.'),
]
)#또는 Row에서
Row(
children: [
const Text('Image Preview:'),
const SizedBox(width: 16),
CachedNetworkImage(imageUrl: product.imageUrl),
]
)
위의 코드에는 아무런 문제가 없습니다.
하지만 필요할 때 const 수정자를 잊어버리기 쉽습니다.
그리고 SizedBox(height: someValue)를 여러 번 반복해서 입력해야 하는 것은 너무 장황(verbose)합니다.
이를 개선하기 위한 작은 팁이 있습니다.
const SizedBox를 위젯으로 정의하기
별도의 파일에서 4픽셀의 배수를 사용하여 필요한 모든 SizedBox를 아래와 같이 compile time constants로 정의할 수 있습니다:
// gaps.dart
const gapW4 = SizedBox(width: Sizes.p4);
const gapW8 = SizedBox(width: Sizes.p8);
const gapW12 = SizedBox(width: Sizes.p12);
...
const gapW64 = SizedBox(width: Sizes.p64);
const gapH4 = SizedBox(height: Sizes.p4);
const gapH8 = SizedBox(height: Sizes.p8);
const gapH12 = SizedBox(height: Sizes.p12);
...
const gapH64 = SizedBox(height: Sizes.p64);
그리고 이렇게 정의한 위젯을 쉽고 간편하게 어디서든 불러올수 있고 앱의 성능도 향상 시킬수 있습니다.
물론 gaps.dart를 import 해서 사용해야겠죠!!ㅎㅎ
Column(
children: const [
Text('Spacing is a good idea in UX design.'),
gapH16,
Text('It makes your UI less cluttered.'),
]
)
Row(
children: [
const Text('Image Preview:'),
gapW16,
CachedNetworkImage(imageUrl: product.imageUrl),
]
)
위의 모든 SizedBox는 compile-time constants로 하드코딩하기 때문에 코드의 성능이 향상됩니다.
그리고 타이핑할 일이 줄어든다는 것은 언제나 좋은 일입니다! 👌
왜 4의 배수인가?
원하는 경우 8의 배수를 사용할 수 있습니다.
중요한 점은 선택할 수 있는 값이 엄격하게 정해져 UI가 더 일관성 있게 보인다는 점입니다.
즐거운 코딩이 되세요!
이 글은 "https://medium.com/@vikranthsalian/flutter-for-better-performance-replace-sizedbox-with-compile-time-constants-e29777942946"의 글을 번역했습니다.
