[flutter] photo_view 패키지로 이미지에 텍스트 오버레이하기

04 Dec 2023

flutter

이번 블로그 포스트에서는 Flutter 애플리케이션에서 이미지에 텍스트를 오버레이하는 방법을 알아보겠습니다. 이를 위해 photo_view 패키지를 사용할 것입니다. photo_view 패키지는 이미지를 확대, 축소하고 패닝하는 기능을 제공합니다.

1. photo_view 패키지 추가하기

먼저, photo_view 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음을 추가하세요:

dependencies:
  photo_view: ^0.11.1

그리고나서 패키지를 가져오기 위해 터미널을 열고 다음 명령어를 실행하세요:

flutter pub get

2. 이미지 오버레이하기

photo_view 패키지에서 이미지에 텍스트를 오버레이하려면 CustomOverlay 위젯을 만들어야 합니다. 이 위젯은 사각형 박스에 텍스트를 표시합니다.

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

class CustomOverlay extends StatelessWidget {
  final String text;

  CustomOverlay(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

위의 코드에서 CustomOverlay 위젯은 하나의 매개변수를 받습니다. 이 매개변수는 오버레이에 표시할 텍스트입니다.

3. 메인 화면에 photo_view 사용하기

이제 photo_view를 메인 화면에 사용하여 이미지와 텍스트를 함께 표시해보겠습니다.

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

class ImageScreen extends StatefulWidget {
  @override
  _ImageScreenState createState() => _ImageScreenState();
}

class _ImageScreenState extends State<ImageScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Screen'),
      ),
      body: Center(
        child: PhotoView(
          imageProvider: AssetImage('assets/images/image.jpg'),
          backgroundDecoration: BoxDecoration(
            color: Colors.black,
          ),
          customChild: CustomOverlay('Overlay Text'),
        ),
      ),
    );
  }
}

위의 코드에서 PhotoView 위젯을 사용하여 이미지를 표시하고, backgroundDecoration 속성을 사용하여 배경색을 지정할 수 있습니다. 또한, customChild 속성에 CustomOverlay 위젯을 넣어 텍스트를 오버레이할 수 있습니다.

결론

이제 Flutter 앱에서 photo_view 패키지를 사용하여 이미지에 텍스트를 오버레이하는 방법을 알게 되었습니다. 이를 통해 앱의 사용자 경험을 개선하고, 이미지에 더 많은 정보를 제공할 수 있습니다.

참고: photo_view 패키지