[flutter] 플러터에서 cached_network_image 패키지를 사용하여 이미지에 노이즈 효과를 추가하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지 추가 Dart 파일의 dependencies에 아래와 같이 cached_network_image 패키지를 추가합니다.
```
dependencies:
  cached_network_image: ^3.0.0
```

이미지에 노이즈 효과 추가

import 'package:cached_network_image/cached_network_image.dart';
import 'dart:ui' as ui;

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  imageBuilder: (context, imageProvider) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: imageProvider,
          colorFilter: ColorFilter.mode(
            Colors.grey,
            BlendMode.modulate,
          ),
        ),
      ),
    );
  },
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

위의 코드를 통해 cached_network_image 패키지를 사용하여 이미지에 노이즈 효과를 추가할 수 있습니다. 위 코드의 imageUrl을 본인이 사용하고 싶은 이미지의 URL로 변경하여 사용하시면 됩니다.