[flutter] 플러터에서 cached_network_image 패키지를 사용하여 이미지를 블러 처리하는 방법을 알려주세요.

08 Dec 2023

flutter

플러터에서 이미지를 불러오고 블러 처리하는 것은 앱을 더욱 시각적으로 매력적으로 만들 수 있는 기능 중 하나입니다. cached_network_image 패키지는 네트워크 이미지를 로드하고 캐시하여 효율적으로 처리할 수 있는 도구입니다.

아래는 cached_network_image 패키지를 사용하여 이미지를 불러오고 블러 처리하는 예시입니다.

cached_network_image 패키지를 먼저 설치합니다.

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0

다음으로, 아래의 코드를 사용하여 이미지를 불러오고 블러 처리할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Blur'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://example.com/image.jpg',
            imageBuilder: (context, imageProvider) => Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: imageProvider,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

위 코드에서 imageUrl을 통해 원하는 이미지의 URL을 지정하고, imageBuilder를 사용하여 이미지를 블러 처리할 수 있습니다.

이제 cached_network_image 패키지를 사용하여 플러터 앱에서 이미지를 효율적으로 불러오고 블러 처리하는 방법에 대해 알아보았습니다.

더 자세한 내용은 cached_network_image 패키지 문서를 참고하시기 바랍니다.