[flutter] photo_view 패키지로 이미지에 블러 트랜지션 효과 주기

04 Dec 2023

flutter

이번 포스트에서는 Flutter의 photo_view 패키지를 사용하여 이미지에 블러 트랜지션 효과를 주는 방법에 대해 알아보겠습니다.

photo_view 패키지란?

photo_view 패키지는 Flutter에서 이미지를 확대하고 스와이프하여 이동하는 기능을 제공하는 패키지입니다. 이 패키지는 다양한 제스처와 애니메이션을 사용하여 사용자가 이미지를 자유롭게 탐색할 수 있도록 해 줍니다.

블러 트랜지션 효과 구현하기

먼저, photo_view 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

프로젝트의 main.dart 파일에 다음과 같이 photo_view 패키지를 import합니다:

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

블러 트랜지션 효과를 주기 위해 Hero 위젯을 사용합니다. Hero 위젯을 사용하여 이미지 위젯을 감싸고, 이전 페이지에서 Hero 위젯의 태그를 지정합니다.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondPage(),
            ),
          );
        },
        child: Hero(
          tag: 'imageTag',
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/image.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이제 SecondPage 위젯에서 photo_view 패키지를 사용하여 이미지를 블러 트랜지션 효과와 함께 표시합니다:

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Container(
        child: PhotoView(
          imageProvider: AssetImage('assets/image.jpg'),
          heroAttributes: PhotoViewHeroAttributes(tag: 'imageTag'),
          loadingBuilder: (context, event) => Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ),
    );
  }
}

위 코드에서 PhotoView 위젯을 사용하여 이미지를 표시합니다. imageProvider 속성을 사용하여 이미지를 로드하고, heroAttributes 속성을 사용하여 이전 페이지의 Hero 위젯과 연결합니다. 또한, loadingBuilder 속성을 사용하여 이미지 로드 중에 나타날 로딩 표시기를 설정할 수 있습니다.

이제 앱을 실행하고 첫 번째 페이지에서 이미지를 탭하면 블러 트랜지션 효과와 함께 이미지가 확대되어 표시됩니다.

결론

이번 포스트에서는 photo_view 패키지를 사용하여 Flutter 앱에서 이미지에 블러 트랜지션 효과를 주는 방법을 알아보았습니다. 이를 통해 앱 사용자들은 자연스럽고 멋진 효과를 통해 이미지를 탐색할 수 있게 됩니다. photo_view 패키지는 이미지 뷰어 기능을 간편하게 구현할 수 있도록 도와줍니다.

더 자세한 내용은 photo_view 패키지 문서를 참조하십시오.