[Flutter] BoxFit enum

Image Widget을 비롯한 영역을 채울 때 사용하는 BoxFit 에 대한 포스팅이다.

 

사용방법은 다음과 같습니다. 

Image.asset(
  'assets/img/image_$x.jpeg',
  fit: BoxFit.fill,
),

 

 

 

---

 

 

Constants

values → const List<BoxFit>A constant List of the values in this enum, in order of their declaration.

 

 

BoxFit의 values에는 아래와 같이 7개의 상수값이 있습니다. 이제 그 특징에 대해 알아봅시다.

[fill, contain, cover, fitWidth, fitHeight, none, scaleDown]

 

 

---

 

Values

 

 

1) fill → const BoxFit

Fill the target box by distorting the source's aspect ratio.

 

이미지의 고유한 비율을 무시한채로 박스 크기를 완전히 채우기

 - 유일하게 사진 비율이 바뀌는 value 입니다.

 

 

 

---

 

 

 

2) contain → const BoxFit

As large as possible while still containing the source entirely within the target box.

 

이미지가 완전히 포함된 채로 최대 크기

 - 이미지가 잘리지 않는 선에서 최대한 크게 늘립니다. 이미지가 위치한 부모 위젯이 이미지 크기와 완전 같지 않다면 세로 또는 가로로 여백이 생길 수 있습니다. 

 

 

 

---

 

 

 

3) cover → const BoxFit

As small as possible while still covering the entire target box.

To actually clip the content, use clipBehavior: Clip.hardEdge alongside this in a FittedBox.

 

여백이 없게 덮기

 - 부모 위젯 전체를 덮는 선에서 최소한 크기로 조절합니다. 단, 이미지가 잘릴 수 있습니다.

 

 

 

---

 

 

 

4) fitWidth → const BoxFit

Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

To actually clip the content, use clipBehavior: Clip.hardEdge alongside this in a FittedBox.

 

Width 한놈만 팬다.

 - height 가 넘치던 모자라던 잘리던 상관없이 Width 만 맞추는 value입니다.

 

 

 

---

 

 

 

5) fitHeight → const BoxFit

Make sure the full height of the source is shown, regardless of whether this means the source overflows the target box horizontally.

To actually clip the content, use clipBehavior: Clip.hardEdge alongside this in a FittedBox.

 

Height 한놈만 팬다.

 - width 가 넘치던 모자라던 잘리던 상관없이 height 만 맞추는 value입니다.

 

 

 

---

 

 

 

6) none → const BoxFit

Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.

The source image is not resized.

To actually clip the content, use clipBehavior: Clip.hardEdge alongside this in a FittedBox.

 

그대로 아무것도 하지 않는다. (Defaule Value)

 - 이미지 본연의 크기를 그대로 사용한다. 아무 설정을 지정하지 않으면 none 값이 적용된다.

 

 

 

---

 

 

 

7) scaleDown → const BoxFit

Align the source within the target box (by default, centering) and, if necessary, scale the source down to ensure that the source fits within the box.

This is the same as contain if that would shrink the image, otherwise it is the same as none.

 

소신은 지키되, 죽지는 않겠다.

 - none과 contain의 조합이다.

 - 본연의 이미지 크기와 비율을 지키지만, 공간이 이미지보다 작아지면 그 이미지가 잘리지는 않도록 축소된다.

 

 

 

 

 

 

---

 

 

 

Reference

 

https://api.flutter.dev/flutter/painting/BoxFit.html

BoxFit enum - painting library - Dart API

 

https://link.coupang.com/a/UcBSZ

Must Have 코드팩토리의 플러터 프로그래밍:Dart & Flutter 입문부터 실전에 유용한 10가지 앱 개발과

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."