[Flutter] asset Image 추가하기

1. 추가할 Asset의 경로를 지정해준다.

2. AssetImage 사용하기

3. 크기 지정하기 (feat. BoxFit)

 

#1. 추가할 Asset의 경로를 지정해준다.

이미지를 먼저 추가해보자. ~/assets/image/ 로 폴더를 추가하고 이 밑에다가 image를 추가하려고 한다.
아래와 같이 폴더를 만들어줬다.

 

pubspec.yaml 파일에 에셋의 경로를 지정해줘야 한다.

나의 경로는 assets/images/ 이다.

 

#2. AssetImage 사용하기

이제 이미지를 추가하면 된다.

Image(
  image: AssetImage('assets/images/my_image.png'),
),

 

#3. 크기 지정하기 (feat. BoxFit)

이미지를 원하는 크기를 지정해주려면 width, height를 주면 된다.

Image(
  image: AssetImage('assets/images/my_image.png'),
  width: 40,
  height: 40,
),

 

이미지를 부모 위젯의 크기에 맞춰야 할 경우들이 많을 것이다.
이럴 때 BoxFit을 주자.

1. `BoxFit.fill`: 부모 위젯을 완전히 채우도록 이미지를 늘립니다. 이 방법은 이미지의 원래 비율을 유지하지 않고, 필요에 따라 이미지를 가로나 세로로 늘립니다.
    
2. `BoxFit.contain`: 이미지의 원래 비율을 유지하면서 부모 위젯에 맞춥니다. 이미지가 위젯 공간에 완전히 맞지 않을 수도 있으며, 이 경우 빈 공간이 남을 수 있습니다.
    
3. `BoxFit.cover`: 이미지의 원래 비율을 유지하면서 부모 위젯을 완전히 채웁니다. 이미지가 위젯의 크기를 초과할 수도 있으며, 이 경우 이미지의 일부가 잘릴 수 있습니다.
    
4. `BoxFit.fitWidth`: 이미지의 너비를 부모 위젯의 너비에 맞추고, 비율을 유지하면서 높이를 조정합니다.
    
5. `BoxFit.fitHeight`: 이미지의 높이를 부모 위젯의 높이에 맞추고, 비율을 유지하면서 너비를 조정합니다.
    
6. `BoxFit.none`: 이미지를 조정하지 않고 원래 크기대로 표시합니다. 이미지가 부모 위젯의 크기를 초과할 수 있습니다.
    
7. `BoxFit.scaleDown`: 이미지가 부모 위젯보다 클 경우에만 크기를 줄입니다. `BoxFit.contain`과 유사하지만, 이미지가 부모 위젯보다 작을 때는 아무런 변화가 없습니다.

 

Swift에서 주로 사용되는 Scale to fit, Aspect fit, Aspect fill과 대응되는 BoxFit은 다음과 같다.

Scale to fit == BoxFit.fill

Aspect fit == BoxFit.contain

Aspect fill == BoxFit.cover