Flutter - CachedNetworkImageProvider error handling?

일반적인 위젯에는 CachedNetworkImage를 사용하면 되지만

 

Container의 boxdecoration이나 CircleAvatar같은경우

 

backgroundImage에 넣어줘야되는데 데이터 타입이 ImageProvider입니다

 

그래서 CachedNetworkImageProvider를 사용해야되는데

 

error핸들링을 어떻게 해야될지 막막합니다

 

API에 보면 errorListener가 있어서 사용하면 될거같지만 아쉽게도 deprecated됐습니다

 

그럼 어떻게 해결을 해야될까 고민하게 될텐데 생각보다 간단하게 해결 가능합니다

 

간단한 예제로 한번보겠습니다

 

메인

class _CachedNetworkImageExampleState extends State<CachedNetworkImageExample> {
  final String url =
      "https://tistory2.daumcdn.net/tistory/4094024/attach/7f8b505900234bf1a50e17f17e8b8526";
      //제 프로파일 url입니다
  final String errorURL = 'test';
  ImageClass image, errorImage;

  @override
  void initState() {
    super.initState();
    image = ImageClass(url);
    errorImage = ImageClass(errorURL);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('CachedNetworkImage example')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          CircleAvatar(radius: 50, backgroundImage: image.getImageProvider),
          errorImage.getImage,
          CircleAvatar(
              radius: 50, backgroundImage: errorImage.getImageProvider),
          image.getImage
        ],
      ),
    );
  }
}

Image class

class ImageClass {
  String url;

  ImageClass(this.url);

  Widget get getImage => CachedNetworkImage(
      imageUrl: url,
      imageBuilder: (context, imageProvider) =>
          CircleAvatar(radius: 50, backgroundImage: imageProvider),
      errorWidget: (context, url, error) =>
          CircleAvatar(radius: 50, child: Icon(Icons.error_outline)));

  ImageProvider get getImageProvider => CachedNetworkImageProvider(url);
}

 

imagebuilder부분에 2번째 인자의 데이터 타입이 ImageProvider이기때문에

 

backgroundImage에 그대로 넣어도 되고 에러도 핸들링 할 수 있어서 더 좋은방법인거 같습니다

 

반면 ImageProvider를 쓰면 error가 발생하면 핸들링 할 방법이 없고

 

로딩이 되는동안 Indicator를 보여줄 방법도 없습니다

 

그래서 imageBuilder를 이용하는것이 조금 더 좋은거 같습니다

 

추가로 테스트중 발견된 문제점이 있는데

 

url값이 null일 때 에러가 발생이 되는것을 확인했습니다

 

해결방법으로는 null체크 후 다른 위젯을 반환하면 간단하게 처리할 수 있습니다

Widget get getImage {
    if (url == null) {
      return CircleAvatar(radius: 50, child: Icon(Icons.error_outline));
    } else {
      return CachedNetworkImage(
          imageUrl: url,
          placeholder: (context, url) =>
              CircleAvatar(child: Center(child: CircularProgressIndicator())),
          imageBuilder: (context, imageProvider) =>
              CircleAvatar(radius: 50, backgroundImage: imageProvider),
          errorWidget: (context, url, error) =>
              CircleAvatar(radius: 50, child: Icon(Icons.error_outline)));
    }
  }