이미지를 자연스럽게 확대 및 축소하고 자석 효과를 주는 기능은 모바일 애플리케이션에서 많이 사용됩니다. Flutter에서는 이러한 자석 효과를 구현하기 위해 photo_view 패키지를 사용할 수 있습니다.

1. photo_view 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

패키지를 추가한 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치합니다.

2. PhotoView 위젯 사용

이제 photo_view 패키지를 사용해서 이미지 자석 효과를 주는 기능을 구현해보겠습니다. 먼저, PhotoView 위젯을 사용하기 위해 해당 파일을 임포트합니다.

import 'package:photo_view/photo_view.dart';

그 다음, PhotoView 위젯을 사용해 이미지를 보여줍니다. PhotoView 위젯은 imageProvider 속성으로 이미지를 제공합니다.

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

위의 코드에서 assets/image.jpg 부분 대신 원하는 이미지 리소스 경로를 사용합니다. 이제 이미지를 확대 및 축소하면 자석 효과가 적용된 이미지를 볼 수 있습니다.

3. 이미지 자석 효과 옵션 추가

photo_view 패키지는 다양한 이미지 자석 효과 옵션을 제공합니다. 예를 들어, 이미지를 자석처럼 끌어당기는 효과를 주고 싶다면 scaleEnabled 옵션을 사용할 수 있습니다.

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

또한, minScale 및 maxScale 속성을 사용하여 이미지의 최소 및 최대 확대/축소 비율을 설정할 수도 있습니다.

PhotoView(
  imageProvider: AssetImage("assets/image.jpg"),
  scaleEnabled: true,
  minScale: 0.5,
  maxScale: 2.0,
)

위의 코드에서 minScale은 최소 확대/축소 비율을 나타내며, maxScale은 최대 확대/축소 비율을 나타냅니다.

참고 자료

• photo_view 패키지