이미지 로딩

플러터에서는 Image 위젯을 사용하여 이미지를 로딩할 수 있습니다. 네트워크로부터 이미지를 가져오거나 앱 자체의 자원으로부터 이미지를 로드할 수 있습니다.

로컬 이미지 로딩 예시:

Image.asset('assets/images/example.jpg')

네트워크 이미지 로딩 예시:

Image.network('https://example.com/image.jpg')

이미지 디스플레이

로드한 이미지를 화면에 출력하기 위해 Image 위젯을 사용할 수 있습니다. 이미지의 크기, 비율, 및 속성을 조정할 수 있습니다.

이미지 디스플레이 예시:

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

이미지 캐싱

앱의 퍼포먼스를 향상시키기 위해 이미지 캐싱을 사용할 수 있습니다. 플러터 프레임워크에서는 다양한 이미지 캐싱 패키지를 제공하며, cached_network_image는 널리 사용되는 패키지 중 하나입니다.

cached_network_image 패키지 추가 방법:

dependencies:
  cached_network_image: ^3.0.0

cached_network_image 사용 예시:

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

이러한 방법을 사용하여 플러터 애플리케이션에서 이미지를 효율적으로 로드, 디스플레이, 및 캐싱할 수 있습니다.