[flutter] photo_view 패키지로 이미지 텍스쳐 효과 적용하기

04 Dec 2023

flutter

이번 포스트에서는 Flutter 애플리케이션에서 이미지 텍스쳐 효과를 적용하는 방법에 대해 알아보겠습니다. 이를 위해 photo_view 패키지를 사용할 것입니다. photo_view 패키지는 확대 및 축소가 가능한 이미지 뷰어를 제공하며, 텍스쳐 효과도 지원합니다.

photo_view 패키지 설치하기

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

dependencies:
  photo_view: ^0.11.1

그리고 터미널에서 다음 명령어를 실행해 패키지를 설치해주세요.

flutter pub get

photo_view 사용하기

photo_view 패키지를 사용하기 위해 먼저 package:flutter_photo_view/photo_view.dart를 임포트해야 합니다.

import 'package:flutter_photo_view/photo_view.dart';

이제 PhotoView 위젯을 사용하여 이미지를 표시하고 텍스쳐 효과를 적용할 수 있습니다. 예를 들어, Image.network 위젯으로 이미지를 로드한 후 PhotoView로 감싸는 방법을 살펴보겠습니다.

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

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

class PhotoViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhotoView Example'),
        ),
        body: Center(
          child: PhotoView(
            imageProvider: NetworkImage(
              'https://example.com/image.jpg',
            ),
            backgroundDecoration: BoxDecoration(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 PhotoView 위젯을 사용하여 NetworkImage를 이미지 프로바이더로 설정하고, 배경을 흰색으로 설정했습니다.

텍스쳐 효과 적용하기

photo_view 패키지는 이미지에 다양한 텍스쳐 효과를 적용할 수 있는 많은 옵션을 제공합니다. 예를 들어, 다음과 같이 확대/축소 버튼을 추가하여 사용자가 이미지를 조작할 수 있도록 할 수 있습니다.

class PhotoViewExample extends StatefulWidget {
  @override
  _PhotoViewExampleState createState() => _PhotoViewExampleState();
}

class _PhotoViewExampleState extends State<PhotoViewExample> {
  bool _fadeInImage = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhotoView Example'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: PhotoView(
                  imageProvider: NetworkImage(
                    'https://example.com/image.jpg',
                  ),
                  backgroundDecoration: BoxDecoration(
                    color: Colors.white,
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _fadeInImage = !_fadeInImage;
                  });
                },
                child: Text(_fadeInImage ? 'Fade Out' : 'Fade In'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 ElevatedButton을 추가하여 이미지의 페이드 인/아웃 효과를 토글할 수 있도록 했습니다. _fadeInImage 변수를 사용하여 효과를 토글합니다.

결론

photo_view 패키지를 사용하면 Flutter 애플리케이션에서 이미지 텍스쳐 효과를 쉽게 적용할 수 있습니다. 위의 예제 코드를 참고하여 애플리케이션에 이미지 텍스쳐 효과를 적용해 보세요!

photo_view 패키지 설치하기

photo_view 사용하기

텍스쳐 효과 적용하기

결론

참고 자료