[flutter] photo_view 패키지로 이미지에 미러링 효과 추가하기

04 Dec 2023

flutter

이미지를 미러링 효과와 함께 볼 수 있는 기능은 모바일 애플리케이션에서 꽤 인기 있는 기능 중 하나입니다. Flutter에서는 photo_view 패키지를 사용하여 이미지에 미러링 효과를 추가할 수 있습니다. 이 패키지는 이미지를 원하는 방법으로 확대/축소할 수 있는 기능을 제공합니다.

photo_view 패키지 설치

먼저, 프로젝트의 pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 패키지를 추가합니다:

dependencies:
  photo_view: ^0.12.0

이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

photo_view 사용하기

photo_view 패키지를 사용하려면 먼저 PhotoView 위젯을 화면에 추가해야 합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: PhotoView(
        imageProvider: NetworkImage(imageUrl),
        backgroundDecoration: BoxDecoration(color: Colors.black),
        enableRotation: true,
        enableMirrorMode: true,
        minScale: PhotoViewComputedScale.contained,
        maxScale: PhotoViewComputedScale.covered * 2.0,
        initialScale: PhotoViewComputedScale.contained,
      ),
    );
  }
}

위 예제에서 imageUrl은 이미지의 URL입니다. 이제 ImageViewer 위젯을 어디서든 호출할 수 있습니다.

photo_view 옵션 설명

imageProvider: 이미지를 불러올 수 있는 ImageProvider입니다.
backgroundDecoration: 이미지로드 전이나 작업 중 표시할 배경 스타일입니다.
enableRotation: 이미지 회전을 허용할지 여부를 나타냅니다.
enableMirrorMode: 이미지 미러링 효과를 허용할지 여부를 나타냅니다.
minScale: 이미지의 최소확대 비율을 지정합니다.
maxScale: 이미지의 최대확대 비율을 지정합니다.
initialScale: 이미지의 초기 확대 비율을 지정합니다.

결론

이제 photo_view 패키지를 사용하여 이미지에 미러링 효과를 추가할 수 있게 되었습니다. 위의 예시 코드를 참고하여 원하는 방식으로 이미지를 확대/축소하고 미러링 효과를 적용해보세요! 블로그에 정보, 가이드 또는 사용자 인터페이스에 관한 이미지를 공유할 때 특히 유용합니다.

photo_view 패키지 설치

photo_view 사용하기

photo_view 옵션 설명

결론

참고 자료