[flutter] photo_view 패키지를 이용한 이미지 툴팁 효과 주기

04 Dec 2023

flutter

이미지를 확대/축소할 수 있는 기능을 제공하는 photo_view 패키지는 Flutter에서 많이 사용되는 패키지 중 하나입니다. 이 패키지를 사용하여 이미지 위에 툴팁 효과를 주는 방법에 대해 알아보겠습니다.

photo_view 패키지 설치

먼저, photo_view 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 패키지를 추가합니다.

dependencies:
  photo_view: ^0.13.2

그리고 패키지 의존성을 업데이트하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

이미지 툴팁 효과 추가하기

먼저, 이미지를 PhotoView 위젯으로 감싸줍니다.

import 'package:photo_view/photo_view.dart';

PhotoView(
  imageProvider: AssetImage('assets/images/example.jpg'),
),

이제 이미지 위에 툴팁을 추가할 준비가 되었습니다. PhotoView 위젯을 Stack 위젯으로 감싸고, Positioned 위젯을 이용하여 툴팁을 원하는 위치에 추가합니다.

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

Stack(
  children: [
    PhotoView(
      imageProvider: AssetImage('assets/images/example.jpg'),
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        padding: EdgeInsets.all(10),
        color: Colors.black.withOpacity(0.7),
        child: Text(
          '툴팁 예시',
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
          ),
        ),
      ),
    ),
  ],
),

툴팁의 위치와 스타일을 자유롭게 조정할 수 있습니다. top, left, right, bottom 등의 속성을 사용하여 툴팁의 위치를 조정하고, color, fontSize 등의 속성을 사용하여 툴팁의 스타일을 변경할 수 있습니다.

완성된 코드

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tooltip Example'),
        ),
        body: Stack(
          children: [
            PhotoView(
              imageProvider: AssetImage('assets/images/example.jpg'),
            ),
            Positioned(
              top: 20,
              left: 20,
              child: Container(
                padding: EdgeInsets.all(10),
                color: Colors.black.withOpacity(0.7),
                child: Text(
                  '툴팁 예시',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

결론

photo_view 패키지를 사용하여 Flutter 앱에서 이미지 툴팁 효과를 주는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 스타일의 툴팁을 추가하여 더욱 풍부한 사용자 경험을 제공할 수 있습니다.