[flutter] photo_view 패키지를 활용한 이미지 블러 리버스 효과 구현하기

04 Dec 2023

flutter

이미지 뷰어 기능을 제공하는 photo_view 패키지는 Flutter 앱에서 이미지를 확대하고 드래그하는 등의 기능을 제공합니다. 이번에는 photo_view 패키지를 사용하여 이미지 블러를 리버스하는 효과를 구현해보겠습니다.

1. photo_view 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

의존성을 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

2. 페이지 생성 및 이미지 로딩

사용할 페이지를 생성한 후, photo_view 패키지를 import합니다. PhotoView 위젯을 사용하여 이미지를 로딩합니다. 아래는 페이지의 코드 예시입니다.

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

class ImagePage extends StatelessWidget {
  final String imageUrl;

  ImagePage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: PhotoView(
        imageProvider: NetworkImage(imageUrl),
      ),
    );
  }
}

이미지 주소를 전달받을 imageUrl 파라미터를 설정한 ImagePage 위젯을 생성하고, PhotoView 위젯을 사용하여 이미지를 로딩합니다.

3. 이미지 블러 리버스 효과 구현하기

이제 이미지의 블러를 리버스하는 효과를 구현해보겠습니다. photo_view 패키지는 backgroundDecoration 파라미터를 통해 이미지의 배경을 설정할 수 있습니다. 이를 활용하여 이미지 위에 블러를 적용할 수 있습니다.

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

class ImagePage extends StatelessWidget {
  final String imageUrl;

  ImagePage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: PhotoView(
        imageProvider: NetworkImage(imageUrl),
        backgroundDecoration: BoxDecoration(
          color: Colors.black54,
          backgroundBlendMode: BlendMode.darken,
        ),
      ),
    );
  }
}

위 코드에서 backgroundDecoration 파라미터를 추가하고, BoxDecoration을 사용하여 배경을 설정합니다. color 속성을 통해 배경 색상을 설정하고, backgroundBlendMode 속성을 통해 배경 블러 효과를 설정합니다.

4. 페이지 사용하기

이제 생성한 이미지 페이지를 사용해보겠습니다. 예를 들어, 다른 페이지에서 이미지 페이지를 띄우기 위해 아래와 같이 Navigator.push 메서드를 사용하여 이미지 주소를 전달해줍니다.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ImagePage(imageUrl: 'https://example.com/image.jpg')),
);

위 코드에서 imageUrl 파라미터에 이미지의 주소를 전달해야 합니다.

이제 photo_view 패키지를 활용하여 이미지 블러 리버스 효과를 구현할 수 있습니다. 자세한 내용은 photo_view 패키지의 공식 문서를 참고하시기 바랍니다.