플러터는 다양한 방법으로 이미지를 로딩하고 표시하는 기능을 제공합니다. 온라인 이미지를 로드하는 방법은 많이 알려져 있지만, 오프라인 상태에서 이미지를 로드하는 경우에 대한 방법은 잘 알려져 있지 않습니다. 이번 글에서는 플러터에서 오프라인 이미지를 로딩하는 방법을 알아보겠습니다.

방법 1: AssetImage 사용

AssetImage는 프로젝트의 로컬 디렉토리에 있는 이미지를 로드하기 위한 클래스입니다. 오프라인 이미지를 로딩하기 위해서는 앱에서 이미지 파일을 미리 asset 폴더에 저장해야 합니다.

1. 앱의 pubspec.yaml 파일에서 assets 항목에 이미지 파일의 경로를 추가해주세요. ```yaml assets:
   • assets/images/offline_image.png ```
2. 위와 같이 설정된 이미지를 AssetImage 클래스를 사용하여 로드할 수 있습니다.

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

   위 코드는 assets 폴더에서 images 폴더 안에 있는 offline_image.png를 로드하게 됩니다.

방법 2: CachedNetworkImage 사용

CachedNetworkImage라이브러리는 온라인 이미지를 캐시하여 로드하는 기능을 제공합니다. 이 라이브러리를 사용하여 오프라인 이미지도 로딩할 수 있습니다.

1. cached_network_image 패키지를 pubspec.yaml에 추가해주세요.

   dependencies:
     cached_network_image: ^3.0.0
   

2. CachedNetworkImage 위젯을 사용하여 이미지를 로드할 수 있습니다.

   CachedNetworkImage(
     imageUrl: 'https://example.com/offline_image.png',
     errorWidget: (context, url, error) => Icon(Icons.error),
   )
   

   errorWidget 속성을 사용하여 이미지 로딩에 실패한 경우에 대한 대체 위젯을 지정할 수 있습니다.

결론

위의 방법들을 이용하면 플러터 앱에서 오프라인 상태에서도 이미지를 로딩할 수 있습니다. AssetImage를 사용하면 로컬 디렉토리에 저장된 이미지를, CachedNetworkImage를 사용하면 온라인 이미지를 로딩할 수 있습니다.