[flutter] photo_view 패키지로 이미지 블러 효과 주기

04 Dec 2023

flutter

이미지를 블러(blur) 처리하여 흐릿한 효과를 주는 것은 사용자 경험을 높이는데 도움이 될 수 있습니다. 이를 위해 photo_view 패키지를 사용하여 이미지 블러 효과를 구현하는 방법을 알아보겠습니다.

photo_view 패키지 설치

먼저 pubspec.yaml 파일에 photo_view 패키지를 추가합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.10.2

그리고 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

이미지 블러 효과 주기

1. 패키지 임포트

photo_view 패키지를 사용하기 위해 해당 패키지를 임포트합니다:

import 'package:photo_view/photo_view.dart';

2. 이미지 위젯 생성

PhotoView 위젯을 사용하여 이미지를 표시합니다. 이미지 위젯 생성 시 imageProvider 속성에 이미지 URL이나 파일 경로를 지정합니다:

PhotoView(
  imageProvider: AssetImage("assets/images/image.jpg"),
),

3. 이미지 블러 효과 추가

이미지 위젯을 감싸는 BackdropFilter 위젯을 사용하여 이미지에 블러 효과를 추가할 수 있습니다. BackdropFilter 위젯은 filter 속성에 ImageFilter.blur를 사용하여 블러 효과를 적용합니다. sigmaX와 sigmaY 속성을 조정하여 블러 효과의 강도를 조절할 수 있습니다:

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
  child: PhotoView(
    imageProvider: AssetImage("assets/images/image.jpg"),
  ),
),

4. 전체 코드

아래는 전체 코드 예제입니다:

import 'dart:ui';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
            child: PhotoView(
              imageProvider: AssetImage("assets/images/image.jpg"),
            ),
          ),
        ),
      ),
    );
  }
}

결론

photo_view 패키지를 사용하여 이미지 위젯에 블러 효과를 주는 방법을 알아보았습니다. 이미지 블러 효과는 앱의 사용자 경험을 향상시키는데 도움이 되므로, 필요한 경우 사용해보시기 바랍니다.

참고 자료

photo_view 패키지