[Flutter] 이미지 크기 조절 fit 옵션 (BoxFit)

이미지 크기를 설정할 때 width, height 값을 주면 되고,

BoxFit 클래스를 이용하면 설정한 크기 안에서 이미지 크기를 조절할 수 있다.

 

Image.asset(
	'test.png',
	width: 500,
	height: 250,
	fit: BoxFit.cover
),

 

 

Boxfit.fill, Boxfit.contain, Boxfit.cover, Boxfit.fitWidth, Boxfit.fitHeight,  Boxfit.none

각각의 차이를 비교해 보면 아래와 같다.

 

1. Boxfit.fill

설정한 크기에 맞게 비율이 변경되어 채워진다.

 

 

2. Boxfit.contain

설정한 크기 이내에서 비율이 변경되지 않고 가능한 한 크게 한다.

 

 

3. Boxfit.cover

비율이 변경되지 않고 설정한 크기를 덮으며 일부 이미지가 잘릴 수 있다.

 

 

 

4. Boxfit.fitWidth

설정한 너비에 맞게 표시되며 일부 이미지가 잘릴 수 있다.

 

 

5. Boxfit.fitHeight

설정한 높이에 맞게 표시되며 일부 이미지가 잘릴 수 있다.

 

 

 

6. Boxfit.none

원본 이미지의 크기가 조정되지 않으며 원본 이미지가 설정한 크기보다 크면 나머지는 잘라낸다.

기본적으로 중앙 정렬한다.

 

 

 

references

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