[flutter] photo_view 패키지로 gif 애니메이션 재생하기

04 Dec 2023

flutter

소개

이번에는 Flutter에서 photo_view 패키지를 사용하여 gif 애니메이션을 재생하는 방법을 알아보겠습니다. photo_view 패키지는 이미지를 확대 및 축소하고 움직일 수 있는 기능을 제공하는 강력한 패키지입니다. 이 패키지를 사용하여 gif 애니메이션도 쉽게 재생할 수 있습니다.

준비물

Flutter 개발 환경
photo_view 패키지

설치

pubspec.yaml 파일에 photo_view 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

커맨드 라인에서 다음 명령어를 실행하여 패키지를 다운로드합니다.

flutter pub get

사용 방법

먼저, 사용할 gif 애니메이션 파일을 프로젝트의 assets 폴더에 추가합니다.

assets/
  - my_animation.gif
lib/
  - main.dart
pubspec.yaml
...

다음으로, main.dart 파일에서 photo_view 위젯과 AssetImage 위젯을 사용하여 gif 애니메이션을 표시합니다.

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(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GIF Animation'),
        ),
        body: Container(
          child: PhotoView(
            backgroundDecoration: BoxDecoration(
              color: Colors.white,
            ),
            imageProvider: AssetImage('assets/my_animation.gif'),
          ),
        ),
      ),
    );
  }
}

이제 앱을 실행하면 gif 애니메이션이 화면에 표시됩니다.

결론

Flutter의 photo_view 패키지를 사용하여 gif 애니메이션을 재생하는 방법을 알아보았습니다. 이를 통해 앱에서 gif 이미지를 쉽게 표시하고 확대/축소 및 움직임 기능을 제공할 수 있습니다. photo_view 패키지의 다양한 기능을 배워보세요!

참고 자료

Flutter Pub - photo_view