[flutter] photo_view 패키지를 활용한 이미지 풀스크린 모드 구현하기

04 Dec 2023

flutter

이미지를 풀스크린으로 표시하는 기능은 많은 앱에 사용되는 중요한 기능 중 하나입니다. Flutter에서는 photo_view 패키지를 사용하여 이미지를 풀스크린으로 확대/축소하고 스크롤하며 볼 수 있습니다. 이번 포스트에서는 photo_view 패키지를 활용하여 이미지를 풀스크린 모드로 구현하는 방법을 알아보겠습니다.

photo_view 패키지 설치

먼저, 프로젝트에 photo_view 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  photo_view: ^0.12.1

의존성 추가 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

풀스크린 이미지 뷰 구현

photo_view 패키지를 사용하여 풀스크린 이미지 뷰를 구현하는 방법은 간단합니다. 먼저, 이미지를 표시할 화면에 PhotoView 위젯을 추가합니다.

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

class FullScreenImage extends StatelessWidget {
  final String imageUrl;

  FullScreenImage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhotoView(
          imageProvider: NetworkImage(imageUrl),
        ),
      ),
    );
  }
}

위 코드에서 imageUrl은 보여줄 이미지의 URL을 나타냅니다. PhotoView 위젯의 imageProvider 프로퍼티에는 ImageProvider를 전달하는데, 이 예제에서는 NetworkImage를 사용하여 웹에서 이미지를 가져옵니다.

이미지 풀스크린 모드 전환

이제 풀스크린 모드로 이미지를 전환하는 방법을 알아보겠습니다. Flutter에서는 Navigator를 사용하여 다른 화면으로 이동할 수 있습니다.

void openFullScreen(BuildContext context, String imageUrl) {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => FullScreenImage(imageUrl: imageUrl),
    ),
  );
}

풀스크린 모드로 전환할 화면으로 이동하려면 위와 같이 Navigator.push 메서드를 사용합니다. 위 코드에서 openFullScreen 함수는 현재 화면의 BuildContext와 이미지 URL을 인수로 받아 풀스크린 모드로 이미지를 표시하는 화면으로 이동하는 일을 합니다.

사용 예시

위에서 구현한 풀스크린 이미지 뷰를 사용하는 예시를 살펴보겠습니다. 예를 들어, 이미지를 웹에서 가져와 풀스크린으로 표시하는 앱을 구현한다면 다음과 같이 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FullScreen Image Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter FullScreen Image'),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              openFullScreen(context, '<이미지 URL>');
            },
            child: Image.network(
              '<이미지 URL>',
              width: 200,
              height: 200,
            ),
          ),
        ),
      ),
    );
  }
}

void openFullScreen(BuildContext context, String imageUrl) {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => FullScreenImage(imageUrl: imageUrl),
    ),
  );
}

class FullScreenImage extends StatelessWidget {
  final String imageUrl;

  FullScreenImage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhotoView(
          imageProvider: NetworkImage(imageUrl),
        ),
      ),
    );
  }
}

위 코드에서 MyApp 클래스에서는 메인 앱을 구현하고, openFullScreen 함수를 호출하여 풀스크린 모드로 이미지를 표시합니다. Image.network 위젯을 사용하여 이미지를 화면에 표시하고 InkWell 위젯을 사용하여 이미지를 탭할 때 openFullScreen 함수를 호출합니다.

이렇게하면 사용자가 이미지를 탭하면 해당 이미지가 풀스크린 모드로 전환되어 확대/축소하고 스크롤할 수 있는 화면으로 이동합니다.

photo_view 패키지를 활용하여 이미지를 풀스크린 모드로 구현하는 방법을 배웠습니다. 이제 어플리케이션에 이미지 뷰어 기능을 추가할 수 있습니다.

photo_view 패키지 설치

풀스크린 이미지 뷰 구현

이미지 풀스크린 모드 전환

사용 예시

참고 자료