[flutter] photo_view 패키지로 이미지 잔상 효과 주기

04 Dec 2023

flutter

때로는 이미지에 잔상 효과를 주어 독특하고 시각적으로 매력적인 효과를 만들고 싶을 수 있습니다. Flutter에서 “photo_view” 패키지를 사용하여 이미지 잔상 효과를 구현하는 방법을 알아보겠습니다.

먼저, 프로젝트에 “photo_view” 패키지를 추가합니다. pubspec.yaml 파일에 다음을 추가하세요:

dependencies:
  photo_view: ^0.12.1

그런 다음, 패키지를 가져와서 사용할 준비를 합니다. main.dart 파일에 다음을 추가합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image with Ghost Effect',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image with Ghost Effect'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: AssetImage('assets/image.jpg'),
          backgroundDecoration: BoxDecoration(
            color: Colors.grey.withOpacity(0.5),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 “photo_view” 패키지의 PhotoView 위젯을 사용합니다. 이미지 잔상 효과를 주기 위해 PhotoView 위젯의 backgroundDecoration 속성을 설정합니다. 여기서는 투명도가 0.5인 회색 배경을 사용하고 있습니다.

이제 잔상 효과를 주고 싶은 이미지 파일을 assets 폴더에 추가하고 경로를 알맞게 수정하세요. 예를 들어, assets 폴더에 “image.jpg”라는 이미지 파일이 있다면 AssetImage(‘assets/image.jpg’)와 같이 경로를 설정합니다.

이제 앱을 실행하면 이미지가 잔상 효과와 함께 표시됩니다. 이때 이미지 위에 핀치 줌과 스크롤 기능도 제공됩니다.

photo_view 패키지는 다양한 설정과 기능을 가지고 있으므로 필요에 따라 추가적인 변경이 가능합니다. 자세한 내용은 photo_view 패키지의 공식 문서를 참조하세요.

참고 자료: