[flutter] photo_view 패키지로 이미지 픽셀 스와핑 효과 주기

04 Dec 2023

flutter

이미지 뷰잉을 위한 패키지 중 하나인 photo_view는 flutter 애플리케이션에서 이미지를 확대, 축소 및 스와이프하는 기능을 제공합니다. 이 패키지를 사용하여 이미지에 픽셀 스와핑 효과를 주어 더욱 멋진 사용자 경험을 만들어보겠습니다.

1. photo_view 패키지 추가

먼저, photo_view 패키지를 사용할 수 있도록 pubspec.yaml 파일의 dependencies 섹션에 아래 코드를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

그리고 패키지를 설치하기 위해 터미널에서 다음 명령을 실행합니다.

flutter pub get

2. 픽셀 스와핑 효과 주기

photo_view 패키지를 사용하여 이미지에 픽셀 스와핑 효과를 주기 위해 다음 단계를 따릅니다.

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

class PixelSwappingEffect extends StatefulWidget {
  @override
  _PixelSwappingEffectState createState() => _PixelSwappingEffectState();
}

class _PixelSwappingEffectState extends State<PixelSwappingEffect> {
  double _rotationAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pixel Swapping Effect'),
      ),
      body: Container(
        child: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _rotationAngle += details.delta.dx;
            });
          },
          child: PhotoView(
            imageProvider: AssetImage('assets/images/my_image.jpg'),
            backgroundDecoration: BoxDecoration(
              color: Colors.black,
            ),
            minScale: PhotoViewComputedScale.contained * 0.8,
            maxScale: PhotoViewComputedScale.covered * 2.0,
            heroAttributes: PhotoViewHeroAttributes(tag: 'imageTag'),
            customRotationDelegate: RotationDelegate(),
          ),
        ),
      ),
    );
  }
}

class RotationDelegate extends DefaultRotationDelegate {
  @override
  Matrix4 getInitialRotation(BuildContext context) {
    return Matrix4.rotationZ(_rotationAngle);
  }
}

위의 코드에서는 PixelSwappingEffect 클래스가 StatefulWidget을 상속합니다. _PixelSwappingEffectState 클래스는 이전에 선언된 PhotoView 위젯을 사용하여 픽셀 스와핑 효과를 적용합니다.

onPanUpdate 이벤트를 사용하여 사용자의 스와이프 동작을 감지하고 _rotationAngle 변수를 업데이트하여 이미지의 회전을 제어합니다.

또한, customRotationDelegate 속성을 사용하여 RotationDelegate 클래스를 설정합니다. 이 클래스는 DefaultRotationDelegate를 상속하며, getInitialRotation 메서드를 오버라이딩하여 사용자 정의 회전 효과를 적용합니다.

3. 사용 예제

위의 코드를 사용하여 PixelSwappingEffect 위젯을 화면에 표시합니다. 예를 들어, 다음과 같이 main.dart 파일에 추가할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:your_app/pixel_swapping_effect.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pixel Swapping',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: PixelSwappingEffect(),
      ),
    );
  }
}

위의 코드는 애플리케이션의 메인 진입점을 정의하고 PixelSwappingEffect 위젯을 홈 화면으로 사용합니다.

4. 결론

위의 단계를 따르면 photo_view 패키지를 사용하여 이미지 픽셀 스와핑 효과를 주는 간단한 flutter 애플리케이션을 만들 수 있습니다. 이를 통해 이미지 뷰잉 경험을 향상시킬 수 있습니다.

참고

photo_view 패키지