[flutter] photo_view 패키지로 이미지 흐림 효과 추가하기

04 Dec 2023

flutter

Flutter에서 이미지를 흐릿하게 만들려면 photo_view 패키지를 사용할 수 있습니다. photo_view 패키지는 줌 및 드래그 기능을 제공하면서도 이미지에 특별한 효과를 적용할 수 있습니다. 이번 기사에서는 photo_view 패키지를 사용하여 이미지에 흐림 효과를 추가하는 방법에 대해 알아보겠습니다.

photo_view 패키지 설치하기

먼저, pubspec.yaml 파일에 photo_view 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  photo_view: ^0.13.0

그런 다음 터미널에서 Flutter 앱의 디렉토리로 이동하여 다음 명령을 실행하여 패키지를 설치합니다.

flutter pub get

photo_view로 이미지 흐림 효과 추가하기

다음으로, photo_view 패키지를 사용하여 이미지를 흐릿하게 표시하는 방법을 알아보겠습니다.

먼저 이미지 파일을 가져와야 합니다. asset 이미지를 사용한다면, 해당 이미지를 pubspec.yaml 파일에 추가해야 합니다. 예를 들어, assets/images 폴더에 cat.jpg 이미지 파일이 있다면, 다음과 같이 pubspec.yaml 파일에서 이미지 경로를 추가합니다.

flutter:
  assets:
    - assets/images/cat.jpg

이미지를 가져오겠습니다.

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

class BlurredImage extends StatelessWidget {
  final String imagePath;

  BlurredImage({required this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: PhotoView(
        imageProvider: AssetImage(imagePath),
        backgroundDecoration: BoxDecoration(
          color: Colors.black.withOpacity(0.5),
        ),
        minScale: PhotoViewComputedScale.contained * 0.8,
        maxScale: PhotoViewComputedScale.covered * 1.2,
      ),
    );
  }
}

위 코드에서는 BlurredImage라는 StatelessWidget을 만들었습니다. 이 위젯은 imagePath라는 매개변수를 받고 PhotoView 위젯을 사용하여 이미지를 보여줍니다. backgroundDecoration 속성을 사용하여 이미지 위에 흐릿한 효과를 추가했습니다.

사용 예시

흐릿한 이미지를 사용하는 예시를 보여드리겠습니다.

import 'package:flutter/material.dart';

import 'blurred_image.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blurred Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Blurred Image'),
        ),
        body: Center(
          child: BlurredImage(imagePath: 'assets/images/cat.jpg'),
        ),
      ),
    );
  }
}

위의 예시 코드에서는 BlurredImage 위젯을 사용하여 흐릿한 이미지를 표시합니다. imagePath 매개변수에는 이미지 파일의 경로를 전달합니다.

이제 앱을 실행하면 흐릿한 효과가 적용된 이미지가 화면에 표시됩니다.

결론

이번 기사에서는 Flutter의 photo_view 패키지를 사용하여 이미지에 흐림 효과를 추가하는 방법을 알아보았습니다. photo_view 패키지를 사용하면 이미지에 다양한 효과를 적용할 수 있으며, 흐릿한 효과와 함께 줌 기능과 드래그 기능을 간편하게 사용할 수 있습니다.