이번에는 Flutter 애플리케이션에서 이미지에 흑백 또는 세피아 효과를 주는 방법에 대해 알아보겠습니다. 이를 위해 photo_view 패키지를 사용하겠습니다.

photo_view 패키지란?

photo_view는 Flutter에서 이미지를 확대/축소하고, 드래그 및 회전을 지원하는 강력한 이미지 뷰어 패키지입니다. 이 패키지는 다양한 이미지 효과를 적용할 수 있는 기능도 제공합니다.

패키지 설치

우선 pubspec.yaml 파일에 다음과 같이 photo_view 패키지를 추가합니다:

dependencies:
  photo_view: ^0.12.0

추가한 후에는 패키지를 가져올 수 있도록 main.dart 파일에서 다음과 같이 import 문을 추가합니다:

import 'package:photo_view/photo_view.dart';

흑백 효과 추가하기

이미지에 흑백 효과를 주려면 Container 위젯을 사용하여 photo_view 패키지를 감싸야 합니다. 그런 다음 colorFilter 속성을 통해 흑백 효과를 적용하면 됩니다.

다음은 이미지에 흑백 효과를 추가하는 예시입니다:

Container(
  child: PhotoView(
    imageProvider: AssetImage('assets/image.jpg'),
    maxScale: PhotoViewComputedScale.contained * 2.0,
    minScale: PhotoViewComputedScale.contained * 0.8,
    filterQuality: FilterQuality.medium,
    enableRotation: true,
    customSize: Size(300.0, 300.0),
    colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.saturation),
  ),
),

위 코드에서 colorFilter 속성에 ColorFilter.mode를 사용하여 흑백 효과를 적용하고 있습니다. Colors.black.withOpacity(0.5)는 검은색의 반투명한 색상이며, BlendMode.saturation은 이미지에 색상을 제거하여 흑백으로 변환합니다.

세피아 효과 추가하기

이미지에 세피아 효과를 주는 방법은 흑백 효과와 유사합니다. 단지 colorFilter의 BlendMode를 다르게 설정하면 됩니다.

다음은 이미지에 세피아 효과를 추가하는 예시입니다:

Container(
  child: PhotoView(
    imageProvider: AssetImage('assets/image.jpg'),
    maxScale: PhotoViewComputedScale.contained * 2.0,
    minScale: PhotoViewComputedScale.contained * 0.8,
    filterQuality: FilterQuality.medium,
    enableRotation: true,
    customSize: Size(300.0, 300.0),
    colorFilter: ColorFilter.mode(Colors.brown.withOpacity(0.6), BlendMode.multiply),
  ),
),

위 코드에서 Colors.brown.withOpacity(0.6)은 갈색의 반투명한 색상이며, BlendMode.multiply는 이미지에 갈색을 혼합하여 세피아 효과를 생성합니다.

이제 photo_view 패키지를 사용하여 이미지에 흑백 또는 세피아 효과를 적용할 수 있습니다. 원하는 이미지 효과를 선택하여 애플리케이션에 적용해 보세요!

참고 문서

• photo_view 패키지: https://pub.dev/packages/photo_view
• Flutter 공식 문서: https://flutter.dev/docs