[flutter] photo_view 패키지를 사용한 이미지 투명도 조절하기

04 Dec 2023

flutter

Flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 구축할 수 있습니다. Flutter의 다양한 패키지 중 하나인 photo_view는 이미지를 확대, 축소, 드래그 및 회전할 수 있는 기능을 제공하는 패키지입니다. 이번 블로그 포스트에서는 photo_view 패키지를 사용하여 이미지의 투명도를 조절하는 방법에 대해 알아보겠습니다.

photo_view 패키지 설치하기

첫 번째로, pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 이를 위해 아래의 코드를 dependencies 섹션에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

그리고 나서 터미널을 열고 다음 명령어를 실행하여 패키지를 설치합니다.

$ flutter pub get

photo_view 패키지로 이미지 투명도 조절하기

이제 photo_view 패키지를 사용하여 이미지의 투명도를 조절해 봅시다. 먼저, PhotoView 위젯을 사용하여 이미지를 화면에 표시합니다.

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

class TransparentImageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PhotoView(
          imageProvider: AssetImage('assets/images/image.jpg'),
        ),
      ),
    );
  }
}

위의 코드에서 PhotoView 위젯은 imageProvider 속성을 통해 이미지를 전달받습니다. 이 때, 이미지의 투명도를 조절하려면 imageProvider 속성에 ImageProvider의 인스턴스를 전달해야 합니다.

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

class TransparentImageScreen extends StatelessWidget {
  double opacity = 0.5; // 투명도 값 설정

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Opacity(
          opacity: opacity, // 투명도 적용
          child: PhotoView(
            imageProvider: AssetImage('assets/images/image.jpg'),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 Opacity 위젯을 사용하여 이미지의 투명도를 조절합니다. Opacity 위젯의 opacity 속성에 원하는 투명도 값을 설정할 수 있습니다. 이를 통해 이미지의 투명도를 원하는 대로 조절할 수 있습니다.

참고: