Flutter Image 위젯 완벽 가이드 #2

Flutter에서 이미지를 표시하는 것은 앱 개발의 기본이자 필수적인 요소입니다. 이번 포스트에서는 Flutter의 Image 위젯을 사용하는 다양한 방법을 알아보겠습니다.

Image 위젯이란?

Image 위젯은 Flutter에서 이미지를 화면에 표시하기 위해 사용하는 위젯입니다. 로컬 파일, 네트워크, 앱 에셋 등 다양한 소스로부터 이미지를 불러올 수 있습니다.

1. 네트워크 이미지 표시하기

인터넷에서 이미지를 불러올 때는 Image.network()를 사용합니다.

Image.network(
  'https://example.com/image.jpg',
  width: 300,
  height: 200,
)

로딩 중이거나 에러가 발생했을 때의 처리도 가능합니다.

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / 
              loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

2. 에셋 이미지 표시하기

앱에 포함된 이미지 파일을 사용할 때는 Image.asset()을 사용합니다.

먼저 pubspec.yaml 파일에 이미지를 등록해야 합니다.

flutter:
  assets:
    - assets/images/
    - assets/images/logo.png

그런 다음 코드에서 사용합니다.

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

3. 파일 이미지 표시하기

기기에 저장된 이미지 파일을 표시할 때는 Image.file()을 사용합니다.

import 'dart:io';

Image.file(
  File('/path/to/image.jpg'),
  width: 200,
  height: 200,
)

4. 메모리 이미지 표시하기

바이트 데이터로부터 이미지를 표시할 때는 Image.memory()를 사용합니다.

import 'dart:typed_data';

Image.memory(
  Uint8List imageBytes,
  width: 150,
  height: 150,
)

주요 속성들

Image 위젯은 이미지 표시를 세밀하게 제어할 수 있는 다양한 속성을 제공합니다.

fit 속성

이미지가 주어진 공간에 어떻게 맞춰질지 결정합니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover, // 공간을 채우면서 비율 유지
)

BoxFit의 주요 값들은 다음과 같습니다.

• BoxFit.fill: 공간을 완전히 채움 (비율 무시)
• BoxFit.contain: 전체 이미지를 보여주면서 공간 안에 맞춤
• BoxFit.cover: 비율을 유지하면서 공간을 채움 (잘릴 수 있음)
• BoxFit.fitWidth: 너비에 맞춤
• BoxFit.fitHeight: 높이에 맞춤
• BoxFit.none: 원본 크기 유지
• BoxFit.scaleDown: contain과 유사하지만 확대하지 않음

alignment 속성

이미지의 정렬 위치를 지정합니다.

Image.asset(
  'assets/images/photo.jpg',
  alignment: Alignment.topCenter,
)

repeat 속성

이미지를 반복해서 표시할 수 있습니다.

Image.asset(
  'assets/images/pattern.png',
  repeat: ImageRepeat.repeat,
)

color와 colorBlendMode

이미지에 색상 필터를 적용할 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  color: Colors.blue,
  colorBlendMode: BlendMode.modulate,
)

실전 예제: 프로필 이미지 만들기

원형 프로필 이미지를 만드는 예제입니다.

ClipOval(
  child: Image.network(
    'https://example.com/profile.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
    loadingBuilder: (context, child, loadingProgress) {
      if (loadingProgress == null) return child;
      return Container(
        width: 100,
        height: 100,
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    },
    errorBuilder: (context, error, stackTrace) {
      return Container(
        width: 100,
        height: 100,
        color: Colors.grey,
        child: Icon(Icons.person, size: 50),
      );
    },
  ),
)

또는 CircleAvatar를 사용할 수도 있습니다.

CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/profile.jpg'),
  backgroundColor: Colors.grey,
)

성능 최적화 팁

이미지를 효율적으로 사용하기 위한 몇 가지 팁입니다.

1. 캐싱 활용

Image.network()는 자동으로 캐싱을 지원합니다. 하지만 더 세밀한 제어가 필요하다면 cached_network_image 패키지를 사용할 수 있습니다.

// pubspec.yaml에 추가
// cached_network_image: ^3.3.0

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

2. 적절한 이미지 크기 사용

필요한 크기보다 훨씬 큰 이미지를 사용하면 메모리 낭비가 발생합니다. 가능하면 표시할 크기에 맞는 이미지를 사용하세요.

Image.network(
  'https://example.com/image.jpg',
  cacheWidth: 300, // 캐시할 때의 너비 제한
  cacheHeight: 200, // 캐시할 때의 높이 제한
)

3. 에셋 이미지 최적화

다양한 화면 밀도를 지원하기 위해 여러 해상도의 이미지를 제공할 수 있습니다.

assets/
  images/
    logo.png        # 1.0x
    2.0x/
      logo.png      # 2.0x
    3.0x/
      logo.png      # 3.0x

Flutter가 자동으로 기기에 맞는 이미지를 선택합니다.

마무리

Image 위젯은 Flutter 앱 개발에서 매우 자주 사용되는 기본 위젯입니다. 네트워크 이미지, 에셋 이미지, 파일 이미지 등 다양한 소스를 지원하며, fit, alignment, color 등의 속성으로 세밀하게 제어할 수 있습니다. 적절한 캐싱과 이미지 최적화를 통해 성능도 향상시킬 수 있으니, 프로젝트에 맞게 활용해보시기 바랍니다.