CircleAvatar 성능 향상

작성한 질문수 2

0

코드 그대로 적용시켜보니 마음이 편안해집니다..

자세하고 꼼꼼한 답변 감사드립니다!

0

1. 이미지를 표시할 때,
   게시물 이미지는 ExtendedImage.network 를 사용하고
   프로필 이미지는 ExtendedAssetImageProvider 를 사용하고 있습니다.

ExtendedImage 의 문서를 찾아보니 cache 사용 기본 설정이
ExtendedImage.network는 true, ExtendedAssetImageProvider 는 false 로 지정되어 있어서
로딩 속도에 차이가 발생한 것 같습니다.

아마도 이미지를 최초로 읽어올 때에는 게시물 이미지와 프로필 이미지 모두 로딩 시간에 큰 차이가 없고
이후에 화면 이동이나 새로 고침으로 동일한 이미지를 읽어올 경우에 cache 를 사용하지 않는
프로필 이미지의 로딩에 시간이 걸렸을 겁니다.

해결 방법은 ExtendedAssetImageProvider 의 cache 속성값을 true 로 지정하면 됩니다.

child: CircleAvatar(
  backgroundImage: userModel.profileImage == null
      ? ExtendedAssetImageProvider('assets/images/profile.png')
          as ImageProvider
      : ExtendedNetworkImageProvider(
          userModel.profileImage!,
          cache: true,
        ),
  radius: 18,
),

2. 이미지를 로딩중일 때, 배경색이 아닌 로딩중임을 알려주는 위젯을 표시하는 방법은 ExtendedImage 의
   loadStateChanged 속성을 사용하면 됩니다.
   다만, 프로필 사진의 ExtendedAssetImageProvider 에서는 loadStateChanged 속성을 사용할 수 없기 때문에
   코드의 수정이 필요합니다.

    

   class AvatarWidget extends StatelessWidget {
     final UserModel userModel;
   
     const AvatarWidget({
       super.key,
       required this.userModel,
     });
   
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: () {
           Navigator.push(
             context,
             MaterialPageRoute(
               builder: (context) => ProfileScreen(
                 uid: userModel.uid,
               ),
             ),
           );
         },
         // ExtendedImage 를 사용하기 위해서 아래와 같이 수정
         child: userModel.profileImage == null
             ? ExtendedImage.asset(
                 // CircleAvatar 의 반지름(radius)이 18 이었으므로
                 // 이미지의 높이와 너비를 36으로 설정
                 width: 36,
                 height: 36,
                 // 이미지의 모양을 원형으로 설정
                 shape: BoxShape.circle,
                 'assets/images/profile.png',
                 // 이미지를 높이, 너비 36의 원형의 모양에 꽉 차도록 설정
                 fit: BoxFit.cover,
               )
             : ExtendedImage.network(
                 width: 36,
                 height: 36,
                 shape: BoxShape.circle,
                 userModel.profileImage!,
                 fit: BoxFit.cover,
                 // 이미지 로딩 상태에 따라 표시할 위젯을 설정
                 loadStateChanged: (state) {
                   switch (state.extendedImageLoadState) {
                     case LoadState.loading:
                     case LoadState.failed:
                       // 로딩중, 로딩 실패의 경우 CircularProgressIndicator 를 표시
                       return CircularProgressIndicator();
                     case LoadState.completed:
                       // 로딩 완료의 경우, 이미지를 그대로 표시하기 위해서 null 반환
                       // (ExtendedImage 의 문서에서 null 을 반환하도록 알려주고 있습니다.)
                       // https://pub.dev/packages/extended_image#demo-code
                       return null;
                   }
                 },
               ),
   
         // child: CircleAvatar(
         //   backgroundImage: userModel.profileImage == null
         //       ? ExtendedAssetImageProvider('assets/images/profile.png')
         //           as ImageProvider
         //       : ExtendedNetworkImageProvider(
         //           userModel.profileImage!,
         //           cache: true,
         //         ),
         //   radius: 18,
         // ),
       );
     }
   }