[flutter] 플러터에서의 사진 필터 및 편집 처리 방법

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 사용자 인터페이스(UI) 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 만들 수 있습니다. 이번 포스트에서는 플러터를 사용하여 사진 필터 및 편집을 처리하는 방법에 대해 알아보겠습니다.

1. 사진 필터 적용하기

플러터에서 사진 필터를 적용하는 가장 간단한 방법은 flutter_image_filters라이브러리를 사용하는 것입니다. 이 라이브러리를 사용하면 사진에 다양한 필터를 적용할 수 있습니다.

먼저, pubspec.yaml 파일에 다음과 같이 라이브러리를 추가합니다:

dependencies:
  flutter_image_filters: ^1.0.0

그런 다음, 필터를 적용할 이미지를 로드하고 다음 코드를 사용하여 필터를 적용합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FilteredImage(),
    );
  }
}

class FilteredImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Filtered Image'),
      ),
      body: Center(
        child: ImageFiltered(
          imageFilter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
          child: Image.asset('assets/image.jpg'),
        ),
      ),
    );
  }
}

위의 코드에서는 ImageFiltered 위젯을 사용하여 이미지에 필터를 적용했습니다. 여기서는 ImageFilter.blur 메서드를 사용하여 이미지에 가우시안 블러 필터를 적용했습니다. 필터 효과를 원하는대로 조정할 수 있습니다.

2. 사진 편집하기

사진을 편집하기 위해서는 이미지를 조작하고 저장할 수 있는 라이브러리가 필요합니다. 플러터에서는 image_picker 및 flutter_image_editor 라이브러리를 사용하여 이미지를 선택하고 편집할 수 있습니다.

먼저, pubspec.yaml 파일에 다음과 같이 라이브러리를 추가합니다:

dependencies:
  image_picker: ^0.8.4+4
  flutter_image_editor: ^0.8.2

그런 다음, 이미지를 선택하고 편집하는 코드는 다음과 같습니다:

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_image_editor/flutter_image_editor.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PhotoEditor(),
    );
  }
}

class PhotoEditor extends StatefulWidget {
  @override
  _PhotoEditorState createState() => _PhotoEditorState();
}

class _PhotoEditorState extends State<PhotoEditor> {
  XFile? _image;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final pickedImage = await picker.pickImage(source: ImageSource.gallery);
    if (pickedImage != null) {
      setState(() {
        _image = pickedImage;
      });
    }
  }

  Future<void> _editImage() async {
    if (_image != null) {
      final editor = FlutterImageEditor();
      final editedImage = await editor.editImage(_image!.path);
      // 편집된 이미지를 저장하거나 다른 작업을 수행할 수 있습니다.
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Editor'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Select Image'),
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: _editImage,
              child: Text('Edit Image'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 ImagePicker를 사용하여 갤러리에서 이미지를 선택하고, FlutterImageEditor를 사용하여 이미지를 편집했습니다. 편집된 이미지를 저장하거나 다른 작업을 수행할 수 있습니다.

플러터를 사용하여 사진 필터 및 편집을 처리하는 방법에 대해 알아보았습니다. 이를 활용하여 사용자가 사진에 다양한 효과를 적용하고 편집할 수 있는 애플리케이션을 개발해보세요.

1. 사진 필터 적용하기

2. 사진 편집하기

참고 자료