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

08 Dec 2023

flutter

먼저, cached_network_image 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^2.6.0

그런 다음, 이미지를 흐리게 하고자 하는 화면에서 CachedNetworkImage 위젯을 사용합니다. 아래의 예제 코드는 이미지를 흐리게 처리하는 예시입니다.

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class BlurryImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CachedNetworkImage(
        imageUrl: 'https://example.com/image.jpg',
        filterQuality: FilterQuality.low, // 이미지를 흐리게 처리
        placeholder: (context, url) => CircularProgressIndicator(), // 로딩 중에 표시할 위젯
        errorWidget: (context, url, error) => Icon(Icons.error), // 에러 발생 시 표시할 위젯
      ),
    );
  }
}

위 코드에서 filterQuality 속성을 사용하여 이미지의 품질을 설정할 수 있습니다. FilterQuality 열거형은 none, low, medium 및 high의 네 가지 값을 가지며, FilterQuality.low를 사용하여 이미지를 흐리게 만들 수 있습니다.

이제 cached_network_image 패키지를 사용하여 이미지를 가져와 흐리게 처리하는 방법을 알아보았습니다.