[flutter] photo_view 패키지를 이용한 이미지 사라지는 효과 주기

04 Dec 2023

flutter

이미지를 효과적으로 확대, 축소 및 이동하는 기능을 제공하는 photo_view 패키지를 사용하여 이미지가 사라지는 효과를 주는 방법에 대해 알아보겠습니다.

1. photo_view 패키지 추가

먼저, pubspec.yaml 파일의 dependencies 섹션에 photo_view 패키지를 추가해야 합니다. 다음과 같이 작성해주세요:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^latest_version

latest_version에는 photo_view 패키지의 최신 버전을 사용할 수 있습니다. 패키지를 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

2. PhotoView 위젯 사용

photo_view 패키지의 PhotoView 위젯을 사용하여 이미지를 표시하고, 터치 및 제스처 이벤트를 처리할 수 있습니다. 다음은 간단한 예제입니다:

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

class MyImageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image View'),
      ),
      body: Center(
        child: PhotoView(
          imageProvider: AssetImage('assets/images/my_image.jpg'),
          onTapUp: (context, details, controllerValue) {
            // 이미지를 터치했을 때 동작할 코드 작성
          },
        ),
      ),
    );
  }
}

3. 이미지 사라지는 효과 적용

이미지가 사라지는 효과를 주기 위해서는 PhotoView 위젯과 터치 이벤트를 조합하여 사용해야 합니다. 터치 이벤트에 따라 이미지의 투명도를 조절하면 원하는 효과를 얻을 수 있습니다.

class MyImageView extends StatefulWidget {
  @override
  _MyImageViewState createState() => _MyImageViewState();
}

class _MyImageViewState extends State<MyImageView> {
  double imageOpacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image View'),
      ),
      body: GestureDetector(
        onTap: () {
          setState(() {
            imageOpacity = 0.0; // 이미지 투명도를 0으로 설정하여 이미지를 숨깁니다.
          });
        },
        child: AnimatedOpacity(
          opacity: imageOpacity,
          duration: Duration(milliseconds: 500), // 투명도 애니메이션 전환 시간 조정
          child: Center(
            child: PhotoView(
              imageProvider: AssetImage('assets/images/my_image.jpg'),
              onTapUp: (context, details, controllerValue) {
                // 이미지를 터치했을 때 동작할 코드 작성
              },
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 GestureDetector 위젯으로 감싸고, onTap 콜백에서 setState 메서드를 호출하여 imageOpacity 값을 변경합니다. 이를 통해 이미지가 터치되었을 때 투명도 애니메이션을 적용할 수 있습니다.

이제 MyImageView 위젯을 원하는 곳에서 사용하면 이미지 사라지는 효과를 적용할 수 있습니다.

결론

이상으로 photo_view 패키지를 이용하여 이미지가 사라지는 효과를 주는 방법에 대해 알아보았습니다. 위의 코드를 참고하여 원하는 효과를 구현해보세요.

1. photo_view 패키지 추가

2. PhotoView 위젯 사용

3. 이미지 사라지는 효과 적용

결론

참고 자료