[flutter] photo_view 패키지를 활용한 이미지 데이즈 효과 추가하기

04 Dec 2023

flutter

이미지 뷰어를 제작할 때 자주 사용되는 패키지인 photo_view를 이용하여 이미지에 데이즈 효과를 추가해보겠습니다.

photo_view 패키지 설치

먼저, 프로젝트에 photo_view 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 추가해주세요.

dependencies:
  photo_view: ^0.11.1

그리고 터미널을 열어 아래 명령어를 실행하여 패키지를 다운로드 받아주세요.

flutter pub get

데이즈 효과 추가하기

photo_view 패키지를 이용하여 데이즈 효과를 추가하려면 CustomPainter 클래스를 사용해야 합니다. 아래와 같이 DazedEffectPainter 클래스를 만들어주세요.

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class DazedEffectPainter extends CustomPainter {
  final ui.Image image;

  DazedEffectPainter(this.image);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawImage(image, Offset.zero, Paint());

    final paint = Paint()
      ..shader = ui.Gradient.linear(
        Offset(size.width / 2, size.height),
        Offset(size.width / 2, size.height - size.height / 3),
        [Colors.transparent, Colors.black.withOpacity(0.75)],
      );

    canvas.drawRect(
      Offset.zero & size,
      paint,
    );
  }

  @override
  bool shouldRepaint(DazedEffectPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(DazedEffectPainter oldDelegate) => false;
}

위의 코드에서 DazedEffectPainter 클래스는 CustomPainter 클래스를 상속하여 만들어진 클래스입니다.

paint 메서드에서는 주어진 이미지를 그리고, 이미지 아래쪽에 gradient를 그려 데이즈 효과를 만듭니다.

데이즈 효과 적용하기

이제 데이즈 효과를 적용할 이미지를 photo_view 패키지의 PhotoView 위젯을 이용하여 화면에 표시해보겠습니다.

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

class DazedEffectImage extends StatelessWidget {
  final String imageUrl;

  DazedEffectImage(this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return PhotoView.customChild(
      child: Image.network(imageUrl),
      childSize: Size(300, 300),
      backgroundDecoration: BoxDecoration(
        color: Colors.grey,
      ),
      customPaint: DazedEffectPainter,
    );
  }
}

DazedEffectImage 위젯은 주어진 이미지 URL을 이용하여 Image.network 위젯을 만들고, 그 위에 PhotoView.customChild 위젯을 사용하여 데이즈 효과를 적용했습니다.

사용 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dazed Effect Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dazed Effect Image'),
        ),
        body: Center(
          child: DazedEffectImage('https://example.com/image.png'),
        ),
      ),
    );
  }
}

위 예시에서는 DazedEffectImage 위젯을 화면 중앙에 표시해 데이즈 효과가 적용된 이미지를 볼 수 있습니다.

결론

이제 photo_view 패키지를 사용하여 이미지에 데이즈 효과를 추가하는 방법을 알아보았습니다. 웹 이미지의 경우 Image.network 위젯을 사용하고, 로컬 이미지의 경우 이미지 파일의 경로를 Image.asset이나 Image.file 위젯을 사용하여 전달할 수 있습니다. 또한, DazedEffectPainter 클래스에서 gradient를 조정하여 원하는 데이즈 효과의 정도를 변경할 수 있습니다. photo_view 패키지를 활용하여 멋진 이미지 뷰어를 만들어보세요.