[flutter] 플러터에서 네트워크 연결이 없는 경우에도 이미지를 로드하는 방법을 알려주세요.

08 Dec 2023

flutter

플러터에서 네트워크 연결이 없는 경우에 이미지를 로드하는 방법

네트워크 연결이 없는 상황에서도 앱의 성능과 사용자 경험을 향상시키기 위해 이미지를 로드하는 방법은 중요합니다. 플러터에서는 이를 간단히 처리할 수 있는 방법이 있습니다.

네트워크 연결 확인

우선, 먼저 네트워크 연결 상태를 확인하는 것이 중요합니다. connectivity 패키지를 사용하여 현재의 연결 상태를 확인할 수 있습니다.

import 'package:connectivity/connectivity.dart';

var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile || connectivityResult == ConnectivityResult.wifi) {
  // 네트워크 연결이 있는 경우 이미지 로드
} else {
  // 네트워크 연결이 없는 경우 로컬 이미지 또는 기본 이미지 로드
}

이미지 로드

네트워크 연결이 없는 경우 로컬 이미지를 로드하거나, 기본 이미지를 사용하는 것이 일반적입니다.

로컬 이미지 로드

플러터 앱의 로컬 이미지를 로드하는 방법은 간단합니다.

Image.asset('assets/images/local_image.png');

기본 이미지 사용

기본 이미지를 사용하고자 할 때는, Image.network 위젯과 placeholder 속성을 사용하여 네트워크 연결이 없는 경우에 보여줄 이미지를 지정할 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null) {
      return child;
    } else {
      return CircularProgressIndicator(); // 로딩 중에 보여줄 위젯
    }
  },
  errorBuilder: (BuildContext context, Object error, StackTrace stackTrace) {
    return Image.asset('assets/images/default_image.png'); // 오류 발생 시에 보여줄 이미지
  },
);

네트워크 연결 상태를 확인하고, 그에 따라 적절한 이미지를 로드하여 앱의 성능과 사용자 경험을 향상시킬 수 있습니다.

참고: Connectivity 패키지