[flutter] photo_view 패키지로 이미지 전경/배경 분리하기

04 Dec 2023

flutter

이번에는 Flutter 앱에서 이미지의 전경과 배경을 분리하는 방법에 대해 알아보겠습니다. 이를 위해서 photo_view 패키지를 사용할 것입니다. photo_view는 이미지를 확대/축소하거나 드래그 할 수 있는 기능을 제공하는 강력한 패키지입니다.

photo_view 패키지 설치하기

먼저, pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 아래와 같이 의존성에 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

의존성을 추가한 뒤에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

이미지 전경/배경 분리하기 예제

이제 예제 코드를 살펴보겠습니다.

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

class ImageForegroundBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Foreground/Background'),
      ),
      body: Center(
        child: Stack(
          children: [
            PhotoView(
              imageProvider: AssetImage('assets/background_image.jpg'),
              backgroundDecoration: BoxDecoration(
                color: Colors.white,
              ),
            ),
            Positioned(
              top: 150,
              left: 50,
              child: PhotoView(
                imageProvider: AssetImage('assets/foreground_image.png'),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.contained * 1.2,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제 코드에서는 PhotoView 위젯을 사용하여 전경/배경 이미지를 분리합니다. Stack 위젯을 사용하여 전경 이미지를 배경 이미지 위에 겹쳐서 표시하고, Positioned 위젯을 사용하여 전경 이미지의 위치를 조정합니다. minScale과 maxScale 속성을 통해 전경 이미지의 확대/축소 비율을 설정할 수 있습니다.

결론

이제 Flutter에서 이미지 전경/배경을 분리하는 방법을 알아보았습니다. photo_view 패키지를 사용하면 이미지를 확대/축소하고 드래그하는 기능을 손쉽게 구현할 수 있습니다. 이를 활용하여 다양한 이미지 관련 기능을 개발해보세요.

먼저, pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 아래와 같이 의존성에 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.11.1

의존성을 추가한 뒤에는 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.