[flutter] photo_view 패키지로 이미지에 텍스트/도형 추가하기

04 Dec 2023

flutter

photo_view 패키지는 Flutter 앱에서 이미지를 확대/축소하고 스크롤할 수 있는 강력한 기능을 제공합니다. 이 패키지를 사용하여 이미지에 텍스트나 도형을 추가하는 방법에 대해 알아보겠습니다.

1. photo_view 패키지 설치하기

먼저, pubspec.yaml 파일에 photo_view 패키지를 추가해야합니다. 아래 예시를 참고하여 dependencies 섹션에 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.1

패키지를 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 가져올 수 있습니다.

2. photo_view 위젯 사용하기

이제 photo_view 위젯을 사용하여 이미지를 화면에 표시할 수 있습니다. 아래 코드를 참고하여 photo_view 위젯을 사용하고 이미지를 로드해보세요.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer(this.imageUrl);

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

위 코드에서 imageUrl은 표시할 이미지의 URL을 나타냅니다. 이 URL은 NetworkImage의 인자로 사용되어 이미지를 가져옵니다.

3. 이미지에 텍스트 추가하기

photo_view 패키지는 이미지 위에 텍스트를 표시하기 위한 기능을 제공하지 않습니다. 그러나 Flutter는 많은 텍스트 위젯을 제공하므로 photo_view 위젯과 함께 사용하여 텍스트를 추가할 수 있습니다.

예를 들어, 이미지 위에 텍스트를 표시하려면 Stack 위젯을 사용하여 photo_view 위젯과 텍스트 위젯을 겹쳐서 배치할 수 있습니다. 아래 코드를 참고하여 텍스트를 추가해보세요.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          PhotoView(
            imageProvider: NetworkImage(imageUrl),
          ),
          Positioned(
            top: 20,
            left: 20,
            child: Text(
              '텍스트 영역',
              style: TextStyle(
                fontSize: 20,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 Positioned 위젯을 사용하여 텍스트의 위치를 조정할 수 있습니다. top과 left 속성을 사용하여 텍스트의 상대적인 위치를 지정할 수 있습니다.

4. 이미지에 도형 추가하기

이미지 위에 도형을 추가하는 방법도 텍스트를 추가하는 방법과 유사합니다. Stack 위젯을 사용하여 photo_view 위젯과 도형을 겹쳐서 표시할 수 있습니다.

아래 코드는 Rect, Circle, Line 세 가지 도형을 추가하는 예시입니다. 실제 도형 모양과 위치는 요구사항에 따라 수정해야 합니다.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          PhotoView(
            imageProvider: NetworkImage(imageUrl),
          ),
          Positioned(
            top: 100,
            left: 100,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red.withOpacity(0.5),
            ),
          ),
          Positioned(
            top: 200,
            left: 200,
            child: Container(
              width: 150,
              height: 150,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.green.withOpacity(0.5),
              ),
            ),
          ),
          Positioned(
            top: 300,
            left: 0,
            right: 0,
            child: Container(
              height: 2,
              color: Colors.blue.withOpacity(0.5),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 Positioned 위젯을 사용하여 각 도형의 위치와 크기를 조정할 수 있습니다. 컨테이너의 색상과 투명도를 조정하여 원하는 시각적 효과를 얻을 수 있습니다.

이제 photo_view 패키지와 함께 이미지에 텍스트 또는 도형을 추가하는 방법을 알게 되었습니다. 이를 활용하여 Flutter 앱의 이미지 뷰어를 보다 멋지게 구성할 수 있습니다.

1. photo_view 패키지 설치하기

2. photo_view 위젯 사용하기

3. 이미지에 텍스트 추가하기

4. 이미지에 도형 추가하기

참고 자료