플러터(Flutter) 앱 개발 중 이미지에 스케치 효과를 주고 싶은 경우가 있습니다. photo_view 패키지는 이미지를 확대/축소하고 스와이프하여 이동할 수 있는 좋은 기능을 제공합니다. 이러한 photo_view 패키지를 활용하여 이미지에 스케치 효과를 주는 방법을 살펴보겠습니다.

photo_view 패키지 추가하기

먼저, 프로젝트에 photo_view 패키지를 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies에 다음 코드를 추가합니다:

dependencies:
  photo_view: ^0.11.1

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

photo_view 패키지 사용하기

1. photo_view 패키지를 임포트합니다:

import 'package:photo_view/photo_view.dart';

1. PhotoView 위젯을 사용하여 이미지를 표시합니다:

PhotoView(
  imageProvider: AssetImage('assets/images/sketch.jpg'),
),

imageProvider 속성에 이미지 경로나 AssetImage를 이용하여 이미지를 설정합니다.

스케치 효과 주기

photo_view 패키지 자체적으로 스케치 효과를 제공하지 않으므로, 스케치 효과를 주기 위해 색상 필터(ColorFilter)를 사용해야 합니다.

PhotoView(
  imageProvider: AssetImage('assets/images/sketch.jpg'),
  filterQuality: FilterQuality.low,
  imageFilterQuality: ImageFilterQuality.low,
  customChild: ColorFiltered(
    colorFilter: ColorFilter.mode(Colors.grey, BlendMode.darken),
    child: Container(
      color: Colors.white,
    ),
  ),
),

위 코드에서, ColorFiltered 위젯으로 이미지를 감싸고, colorFilter 속성을 이용하여 회색의 스케치 효과를 지정합니다. Container 위젯을 사용하여 효과를 적용한 이미지를 감싸고, 배경을 흰색으로 설정합니다.

결론

이제 photo_view 패키지를 사용하여 이미지에 스케치 효과를 주는 방법에 대해 알아보았습니다. photo_view 패키지는 이미지 관련 기능을 다양하게 제공하므로, 다양한 사진 뷰어 또는 이미지 효과 앱을 개발할 때 유용하게 사용할 수 있습니다.