[flutter] 플러터 RxDart로 사진 필터링 및 편집 앱 개발하기

05 Dec 2023

flutter

사진 필터링 및 편집 기능이 있는 앱을 개발하고자 한다면, RxDart를 사용하여 플러터 앱을 간단히 개발할 수 있습니다. RxDart는 리액티브 프로그래밍을 위한 라이브러리로, 비동기 작업을 간편하게 처리할 수 있도록 도와줍니다.

필요한 패키지 설치하기

먼저 pubspec.yaml 파일에 아래와 같이 RxDart를 추가해주세요.

dependencies:
  rxdart: ^0.26.0

의존성 추가 후, 패키지를 설치하기 위해 터미널에서 flutter pub get 명령어를 실행해주세요.

기본 설정하기

이제 필터링 및 편집 앱을 개발하기 위해 기본적인 설정을 해보겠습니다.

먼저 main.dart 파일에서 필요한 패키지를 임포트 해주세요.

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

다음으로, 필터링 및 편집 기능을 구현할 PhotoEditor 클래스를 정의해주세요.

class PhotoEditor {
  BehaviorSubject<String> _filterSubject = BehaviorSubject<String>();

  Stream<String> get filterStream => _filterSubject.stream;

  void applyFilter(String filterName) {
    _filterSubject.add(filterName);
  }

  void dispose() {
    _filterSubject.close();
  }
}

위 코드에서는 RxDart의 BehaviorSubject를 사용하여 필터 목록을 관리하는 filterSubject 스트림을 생성합니다. applyFilter 메서드를 통해 사용자가 선택한 필터를 추가하고, 필터 적용을 위해 filterStream을 사용할 수 있습니다. 마지막으로, dispose 메서드를 호출하여 클래스를 정리합니다.

필터 적용하기

이제 실제로 필터링 기능을 구현해보겠습니다. Flutter의 StatefulWidget을 사용하여 PhotoEditor 클래스를 활용하는 PhotoEditorApp 위젯을 만들어보겠습니다.

class PhotoEditorApp extends StatefulWidget {
  @override
  _PhotoEditorAppState createState() => _PhotoEditorAppState();
}

class _PhotoEditorAppState extends State<PhotoEditorApp> {
  PhotoEditor _photoEditor = PhotoEditor();

  @override
  void dispose() {
    _photoEditor.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo Editor',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo Editor'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Choose a filter:'),
              StreamBuilder<String>(
                stream: _photoEditor.filterStream,
                builder: (context, snapshot) {
                  return DropdownButton<String>(
                    value: snapshot.data,
                    items: ['Filter 1', 'Filter 2', 'Filter 3']
                        .map((filter) => DropdownMenuItem<String>(
                              child: Text(filter),
                              value: filter,
                            ))
                        .toList(),
                    onChanged: (filter) {
                      _photoEditor.applyFilter(filter);
                    },
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 build 메서드 내에서 StreamBuilder를 사용하여 filterStream을 감지하여 UI를 업데이트합니다. 사용자는 DropdownButton을 통해 필터를 선택하고 applyFilter 메서드가 호출되어 필터를 적용합니다.

실행해보기

자 이제 앱을 실행해보세요! 필터 선택 창이 나타나고, 사용자가 필터를 선택하면 해당 필터가 앱에 적용됩니다.

결론

이렇게 간단한 RxDart를 사용하여 플러터에서 사진 필터링 및 편집 기능을 개발하는 방법을 알아보았습니다. RxDart는 리액티브 프로그래밍을 구현할 때 매우 유용한 라이브러리입니다. 추가로 사용자가 선택한 필터를 실시간으로 업데이트하는 방법을 개선할 수도 있습니다. 자세한 내용은 RxDart의 공식 문서를 참조해주세요.

RxDart 공식 문서: https://pub.dev/documentation/rxdart/latest/

Happy coding!