[flutter] cached_network_image 패키지를 사용하여 이미지를 흐림/선명하게 처리하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지는 웹상에 있는 이미지를 캐싱하여 로컬 저장소에 저장한 후 빠르게 로드할 수 있게 도와주는 유용한 패키지입니다. 이미지를 흐림 또는 선명하게 처리하기 위해서는 이 패키지에 내장된 모션 블러 및 샤프닝 기능을 활용할 수 있습니다.

모션 블러 처리 방법

cached_network_image 패키지의 모션 블러 처리를 위해 Image 위젯 대신 CachedNetworkImage 위젯을 사용합니다.

CachedNetworkImage(
  imageUrl: 'https://www.example.com/image.jpg',
  imageBuilder: (context, imageProvider) => BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.5),
      ),
      child: Image(image: imageProvider),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

위 코드에서 BackdropFilter를 사용하여 이미지를 흐리게 처리하고, Container의 decoration을 이용하여 투명도를 조절합니다.

이미지 선명하게 처리하는 방법

이미지를 선명하게 처리하기 위해서는 ColorFiltered 위젯을 활용할 수 있습니다.

CachedNetworkImage(
  imageUrl: 'https://www.example.com/image.jpg',
  imageBuilder: (context, imageProvider) => ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dst),
    child: Image(image: imageProvider),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

위 코드에서 ColorFiltered를 사용하여 이미지에 특정 색상 필터를 적용하여 이미지를 선명하게 처리할 수 있습니다.

cached_network_image 패키지를 사용하여 이미지를 흐림/선명하게 처리하는 방법에 대해 알아보았습니다. 이제 이미지 처리에 따라 UX를 더욱 향상시킬 수 있을 것입니다.

더 많은 정보를 원하시면 cached_network_image GitHub 페이지를 참고하세요.