[Flutter] 이미지 에셋을 로딩할 때는 FutureBuilder 보다 Image의 loadingBuilder를 쓰자

ㅤ

지금까지는 이미지를 네트워크에서 받아올 때에 FutureBuilder를 통해 에셋이미지를 로드하고, 이를 그려주는 방식으로 적용하고 있었다. 아무래도 Image 위젯 바깥에서 FutureBuilder로 이미지 에셋을 확인하고, 이를 Image 위젯으로 넣어주는 방법이다보니, 이미지와 관련된 로직이 Image 위젯 내에서 딱 처리가 된다는 느낌이 없어서 코드가 지저분하다고 느꼈었다.

ㅤ

FutureBuilder(
  // imageFuture가 불러와질 때 까지 아래의 위젯들을 조건에 맞게 보여주기
  future: widget.imageFuture,
  builder: (context, snapshot) {
    // 데이터를 불러온 경우
    if (snapshot.hasData) {
      return Image(snapshot.data);
    } 
    // 데이터를 불러올 때 에러가 발생한 경우
    else if (snapshot.hasError) {
      return Widget();
    } 
    // 데이터를 불러오는 중인 경우
    else {
      return Widget();
    }
  },
);

ㅤ

그런데, 이번에 Image위젯을 사용할 때 프로퍼티를 살펴보다가 loadingBuilder라는 것을 발견했다. 뭔가 이미지 데이터를 로드할 때 적용할 수 있는 유용한 녀석인 것 같아서 용례를 구글링하면서 찾아보고 앱 코드에 적용하려고 해봤다. 주로 [모델 데이터 → 이미지 다운로드 url을 가져와 프로필사진 그려주기]를 위해 사용해봤는데, 기존의 FutureBuilder보다 더 깔끔하게 캡슐화가 잘 되는 방향으로 코드가 정리되는 것 같아서 유의미하다고 생각되었다.

ㅤ

Image(
  // 불러올 이미지는 아래처럼 넣어주면 알아서 loading을 처리해준다.
  image: NetworkImage(
    { source url }
  ),

  // loadingBuilder 프로퍼티를 사용해주기
  loadingBuilder: (context, child, loadingProgress) {
    // 만약에 로딩이 끝났다면 (loadingProgress == null)
    // 아래의 위젯을 반환한다.
    if (loadingProgress == null) {
      return Stack(
        children: [
          // 로딩된 이미지는 child로 호출해 조금 더 가공된 위젯으로 만들어 반환할 수 있다.
          child,
          ...
        ],
      );
    } 
    // 만약에 로딩중이라면 (loadingProgress != null) 
    // 아래의 위젯을 반환한다.
    else {
      return Container(
        color: CustomColors.whBlack,
        ...
      );
    }
  },

  // image에 대한 property setting
  fit: BoxFit.cover,
  width: 150,
  height: 100,
),

ㅤ

기억하자! Image의 NetworkImage나 AssetImage 로딩할 때에는 loadingBuilder를 사용해 progressWidget을 보여주자!