[flutter] photo_view 패키지로 이미지 에포크 효과 추가하기

04 Dec 2023

flutter

flutter에서 이미지를 에포크 효과와 함께 보여주고 싶다면, photo_view 패키지를 사용할 수 있습니다. photo_view는 이미지를 확대/축소하고, 패닝(panning)하며, 에포크 효과를 추가하여 더욱 멋진 사용자 경험을 제공합니다.

이제 photo_view 패키지를 설치하고, 사용하는 방법에 대해 알아보겠습니다.

photo_view 패키지 설치

먼저, pubspec.yaml 파일을 열고 dependencies 섹션에 photo_view 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.10.3

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

flutter pub get

에포크 효과 추가하기

photo_view 패키지를 사용하기 위해 필요한 코드를 작성해보겠습니다.

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

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: PhotoView(
        imageProvider: AssetImage("assets/images/my_image.jpg"),
        minScale: PhotoViewComputedScale.contained * 0.8,
        maxScale: PhotoViewComputedScale.covered * 2.0,
        initialScale: PhotoViewComputedScale.contained,
      ),
    );
  }
}

위의 코드에서 MyImageWidget은 이미지를 보여주는 위젯입니다. 이 위젯을 사용하기 위해 AssetImage를 사용하여 이미지를 가져왔습니다. 이미지를 가져오려면 해당 이미지를 assets/images 폴더에 저장해야 합니다.

minScale 및 maxScale 속성은 이미지의 최소 및 최대 축소/확대 비율을 설정합니다. initialScale은 처음에 이미지가 어떤 크기로 보여질지를 설정합니다.

이제 MyImageWidget을 앱에 추가하면 에포크 효과와 함께 이미지가 화면에 보여질 것입니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Photo View Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View'),
        ),
        body: Center(
          child: MyImageWidget(),
        ),
      ),
    );
  }
}

결론

photo_view 패키지를 사용하여 이미지에 에포크 효과를 추가하는 방법에 대해 알아보았습니다. 이제 여러분은 멋진 이미지 갤러리나 상세보기 앱을 개발할 수 있을 것입니다. 자세한 내용은 Official Documentation을 참조하시기 바랍니다.