[Flutter] 14. StoreApp (13) Image

서회정

May 22, 2025

Contents

1. Image 위젯 1. 에셋 디렉토리 생성 2. pubspec.yaml에 경로 등록 3. 이미지 위젯 등록 2. Image 위젯 속성 1. 이미지 위젯 속성 추가

1. Image 위젯

💡

이미지 로딩과 관련된 다양한 속성을 제공한다.

1. 에셋 디렉토리 생성

2. pubspec.yaml에 경로 등록

✅ 이미지를 모두 등록하는 것 보다 경로 자체를 등록하는 편이 편리함


  assets:
    - assets/

3. 이미지 위젯 등록

기존에 PlaceHolder가 있던 자리에 이미지 에셋을 추가한다.


Expanded(child: Image.asset("assets/cloth.jpeg")),
                SizedBox(height: 8),
                Expanded(child: Image.asset("assets/bag.jpeg"))

2. Image 위젯 속성

💡

Image 위젯의 다양한 속성 중에서도 fit 속성은 이미지 비율과 화면에 보여주는 방식을 설정할 수 있다.

속성	타입	설명
`width`	`double`	이미지의 너비
`height`	`double`	이미지의 높이
`fit`	`BoxFit`	이미지를 박스에 어떻게 맞출지 지정 (`cover`, `contain`, `fill`, `fitWidth`, `fitHeight`, `none`, `scaleDown`)
`alignment`	`Alignment`	이미지 정렬 위치 (기본: `center`)
`color`	`Color`	이미지에 색을 입힘 (예: 흑백 처리 등)
`colorBlendMode`	`BlendMode`	`color`와 이미지 색상을 어떻게 섞을지 지정
`repeat`	`ImageRepeat`	이미지 반복 여부 (`repeat`, `repeatX`, `repeatY`, `noRepeat`)
`matchTextDirection`	`bool`	텍스트 방향에 따라 이미지 반전 여부
`filterQuality`	`FilterQuality`	이미지 필터 품질 (`low`, `none`, `medium`, `high`)
`isAntiAlias`	`bool`	안티앨리어싱 적용 여부 (곡선 등 선명하게)
`gaplessPlayback`	`bool`	이미지 변경 시 깜빡임 방지
`semanticLabel`	`String`	접근성(스크린 리더)용 텍스트 설명
`excludeFromSemantics`	`bool`	접근성 요소에서 제외 여부

✅ Fit 속성 종류

cover 📌

- 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤. 비율을 유지할 순 있지만 지정된 크기를 벗어나면 이미지가 잘리는 단점이 있음.

contain 📌

- 원본사진의 가로 세로 비율 변화 없음.

fill 📌

- 원본사진의 비율ㅇㄹ 무시하고 지정한 영역에 사진을 맞춤.

fitWidth

fitHeight

none

scaleDown