[Flutter] 이미지 넣기

플러터에서 이미지를 띄울떈 어떻게 해야할까요?

그럴땐 Image 위젯을 사용합니다.

또한, Flutter에서 지원하는 이미지 포맷은 JPEG, PNG, GIF, WebP, BMP, WBMP 입니다.

 

다만, 웹에서 사용하는 img 태그의 경우 src에 네트워크든 로컬이든 상관 없이 경로를 추가하면 끝이였지만

Flutter의 경우 네트워크 이미지와 로컬 이미지를 불러오는 방식이 서로 다릅니다.

그러면 어떻게 불러오는 지 간단하게 알아보겠습니다!

네트워크 이미지 불러오기

Image.network()

Image.network(
          'https://flutter-ko.dev/images/flutter-logo-sharing.png'),

위와 같이 이미지 주소를 입력하면 Flutter가 이미지 파일을 다운로드해서 캐시를 저장하고 화면에 띄웁니다.

다만, 네트워크 이미지의 경우 로컬 이미지보다 로딩이 느릴 수 있습니다.

이때 loadingBuilder를 이용하면 네트워크에서 이미지를 요청할 때 프레임워크를 반복적으로 요청 할 수 있고 사용자에게는 로딩 진행 과정을 보여주어 로딩까지 얼마나 걸리는 지 알려줄 수 있습니다..

Image.network(
    'https://flutter-ko.dev/images/flutter-logo-sharing.png',
    loadingBuilder: (context, child, loadingProgress) {
      return loadingProgress == null
          ? child
          : Center(
              child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded /
                      loadingProgress.expectedTotalBytes!
                  : null,
            ));
    },
),

CircularProgressIndicator-class

로컬 이미지 불러오기

pubspec.yaml 이미지 등록

flutter:

...

  assets:
    - images/logo.png

네트워크 이미지와 다르게 로컬 이미지를 불러올 경우 pubspec.yaml에 이미지를 추가해줘야합니다.

pubspec.yaml은 들여쓰기가 잘못되면 적용이 되지 않으니 주의해주세요.

만약 들여쓰기나 오타가 있지 않았는데 적용이 되지 않는다면 flutter pub get 명령어를 입력해주세요.

Image.asset()

pubspec.yaml에 이미지를 등록했다면 이미지를 추가해보겠습니다.

Image.asset('images/logo.png'),

그 외

네트워크 이미지 / 로컬 이미지외에

사용자의 장치에서 이미지 파일을 띄우려면 Image.file을

메모리에 저장된 이미지를 바이트 배열로 나타내려면 Image.memory사용하면됩니다.

Image 위젯의 Properties

width과 height

Image.asset(
    'images/logo.png',
    width: 200,
    height: 200,
)

폭과 넓이를 지정할 수 있습니다.

fit

Image.asset(
    'images/logo.png',
    fit: BoxFit.contain,
)

fit을 이용하면 원하는 공간에 이미지가 들어맞도록 할 수 있습니다.

fit매개 변수에 전달되는 값은 BoxFit클래스에서 정의된 값으로 할 수 있습니다.

BoxFit클래스에 정의된 enum

contain

플러터 문서 이미지

원본 사진을 그대로 보여줌 (가로, 세로 변화 X)

cover

플러터 문서 이미지

대상 상자를 꽉 채움

fill

플러터 문서 이미지

가로 세로 비율을 왜곡하여 대상 상자를 꽉 채움

fitHeight

플러터 문서 이미지

대상 상자 높이에 맞춰 채워짐

fitWidth

플러터 문서 이미지

대상 상자 폭에 맞춰 채워짐

none (기본 값)

플러터 문서 이미지

원본 크기 그대로 유지하고

대상 상자 내에 소스를 정렬

정렬의 기본 값은 가운데

scaleDown

플러터 문서 이미지

대상 상자내에 소스를 정렬 하고 필요한 경우 소스를 상자 안에 맞게 축소함

축서 되는 경우 contain과 동일하게 적용

정렬의 기본 값은 가운데

colorBlendMode

다양한 색상 효과를 적용할 수 있다.

 

Image.asset(
    'images/logo.png',
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
),

BlendMode의 값은 공식 문서에서 참고해주세요!

semanticLabel

이미지 의미 레이블로 UI에 표시 되지 않지만 앱의 접근성을 향상 시켜준다.

Image.asset(
    'images/logo.png',
    semanticLabel: 'flutter logo'
),