사진 필터 앱은 다양한 그래픽 필터를 이미지에 적용하여 새로운 효과를 만들어내는 앱입니다. 이번 포스트에서는 Flutter의 스택드 위젯을 사용하여 사진 필터 앱을 구현하는 방법에 대해 알아보겠습니다.
필요한 패키지 설치
먼저, 이 예제에서는 이미지 필터를 적용하기 위해 image 패키지를 사용합니다. pubspec.yaml 파일에 다음과 같이 해당 패키지를 추가합니다.
dependencies:
image: ^3.0.1
의존성을 추가한 후에는 flutter pub get 명령어를 사용하여 패키지를 설치합니다.
이미지 필터 적용
image 패키지를 사용하여 이미지 필터를 적용하는 방법은 다음과 같습니다.
import 'package:image/image.dart' as img;
void applyFilter(String inputImagePath, String outputImagePath) {
img.Image image = img.decodeImage(File(inputImagePath).readAsBytesSync());
img.Image filteredImage = img.grayscale(image); // 예시 필터: 그레이스케일
File(outputImagePath).writeAsBytesSync(img.encodePng(filteredImage));
}
위 코드에서 applyFilter 함수는 입력 이미지 경로와 출력 이미지 경로를 받아들여 이미지 필터를 적용한 후 저장합니다. 사용할 필터는 img.grayscale 대신에 다른 필터 함수로 변경할 수 있습니다.
스택드 위젯을 사용한 UI 구현
이제 applyFilter 함수를 이용하여 스택드 위젯을 사용하여 간단한 사진 필터 앱을 구현해보겠습니다. 이 예제에서는 이미지를 보여주고, 적용할 필터를 선택할 수 있는 간단한 UI를 구현할 것입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: PhotoFilterApp(),
));
}
class PhotoFilterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Photo Filter App'),
),
body: Center(
child: Stack(
children: [
Image.asset('assets/image.jpg'),
Positioned(
bottom: 20,
left: 20,
child: RaisedButton(
onPressed: () {
applyFilter('assets/image.jpg', 'assets/filtered_image.png');
},
child: Text('Apply Filter'),
),
),
],
),
),
);
}
}
위 코드에서는 Stack 위젯을 사용하여 이미지와 필터 적용 버튼을 겹치도록 배치했습니다. 사용자가 버튼을 누르면 applyFilter 함수가 호출되어 이미지에 필터가 적용됩니다.
이제 위에서 작성한 코드를 실행하면 이미지와 필터 적용 버튼이 함께 나타나는 사진 필터 앱을 확인할 수 있습니다.
위 예제에서는 간단한 형태의 사진 필터 앱을 구현했지만, 실제 앱에서는 더 많은 기능과 다양한 필터를 적용할 수 있습니다. Flutter의 스택드 위젯을 이용하여 UI를 구성하면 사용자 친화적이고 멋진 앱을 구현할 수 있습니다.
이제 필터 앱의 추가적인 기능을 구현하는 방법에 대해 관심 있으신가요? 필터 적용 후에 함께 저장 혹은 공유하는 기능을 추가하는 것을 다룰까요?
참고 자료
이번 포스트에서는 Flutter의 Stack 위젯을 사용하여 사진 필터 앱을 만드는 방법에 대해 알아보았습니다. 부가적인 기능을 어떻게 구현할지에 대해서도 소개하고 싶은 내용이 있으시면 말씀해주세요!