[flutter] photo_view 패키지로 이미지 평활화 처리하기

04 Dec 2023

flutter

이미지 평활화는 이미지의 명암 대비를 조정하여 이미지의 선명도를 향상시키는 기법입니다. Flutter에서 photo_view 패키지를 사용하여 이미지를 평활화하는 방법을 살펴보겠습니다.

1. `photo_view` 패키지 설치하기

먼저, photo_view 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.12.0

의존성 추가가 완료되면, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.

2. 평활화 기능 추가하기

이제 photo_view 패키지를 사용하여 이미지를 평활화 처리하는 기능을 추가하겠습니다. 먼저, PhotoView 위젯을 사용하여 이미지를 표시합니다:

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer({this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Container(
        child: PhotoView(
          imageProvider: NetworkImage(imageUrl),
          enableRotation: true,
        ),
      ),
    );
  }
}

ImageUrl 매개변수를 통해 이미지 URL을 전달받고, PhotoView 위젯을 사용하여 이미지를 표시합니다. enableRotation 속성을 true로 설정하여 이미지의 회전을 허용합니다.

3. 이미지 평활화 적용하기

이미지의 평활화를 적용하려면, photo_view 패키지의 PhotoView 위젯 대신 PhotoView.customChild 위젯을 사용해야 합니다. customChild 위젯을 사용하면 이미지 위에 다른 위젯을 추가할 수 있습니다.

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

class ImageViewer extends StatelessWidget {
  final String imageUrl;

  ImageViewer({this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Viewer'),
      ),
      body: Container(
        child: PhotoView.customChild(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(imageUrl),
                SizedBox(height: 20),
                Text(
                  '평활화 처리된 이미지',
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          ),
          childSize: Size(MediaQuery.of(context).size.width,
              MediaQuery.of(context).size.height),
          backgroundDecoration: BoxDecoration(color: Colors.white),
        ),
      ),
    );
  }
}

위 코드에서 Image.network 위젯과 Text 위젯을 추가하여 이미지 위에 평활화 처리된 이미지와 텍스트를 표시합니다. childSize 속성은 이미지의 크기를 정의하며, backgroundDecoration 속성은 이미지의 배경색을 정의합니다.

4. 결과 확인하기

이제 ImageViewer 위젯을 사용하여 평활화 처리된 이미지를 표시할 수 있습니다:

IconButton(
  icon: Icon(Icons.image),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => ImageViewer(imageUrl: 'https://example.com/image.png'),
      ),
    );
  },
)

IconButton의 onPressed 콜백에서 ImageViewer 위젯을 호출하고 이미지 URL을 전달합니다.

이제 이미지 평활화 처리 기능을 가진 앱을 실행하고, 이미지를 탭하여 평활화된 이미지를 확인해볼 수 있습니다.

결론

이 글에서는 photo_view 패키지를 사용하여 Flutter 앱에서 이미지 평활화 처리하는 방법을 알아보았습니다. 이미지 평활화는 앱에서 이미지의 선명도를 향상시킬 수 있는 중요한 기능 중 하나입니다. Flutter에서 photo_view 패키지를 사용하여 이미지 평활화를 적용할 수 있으며, 이를 활용하여 다양한 이미지 처리 기능을 개발할 수 있습니다.

1. photo_view 패키지 설치하기

2. 평활화 기능 추가하기

3. 이미지 평활화 적용하기

4. 결과 확인하기

결론

참고 자료

1. `photo_view` 패키지 설치하기