[flutter] 플러터에서의 bloc 패턴으로 카메라 필터 앱 개발하기

20 Dec 2023

flutter

이번에는 플러터에서 bloc 패턴을 사용하여 카메라 필터 앱을 개발하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치

카메라와 이미지 필터를 적용하기 위한 패키지들을 설치합니다.

dependencies:
  camera: ^0.9.4+5
  path_provider: ^2.0.1
  bloc: ^7.0.0
  flutter_bloc: ^7.0.0
  photo_manager: ^0.6.7

2. 카메라 앱 기본 구성

카메라 앱의 기본 기능을 구현합니다. 카메라 뷰를 표시하고 촬영한 이미지를 저장하는 등의 기능을 구현합니다.

예를 들어, 아래와 같이 CameraScreen 위젯을 구현할 수 있습니다.

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

class CameraScreen extends StatefulWidget {
  final CameraController controller;
  
  const CameraScreen({Key? key, required this.controller,}) : super(key: key);

  @override
  _CameraScreenState createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CameraPreview(widget.controller),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            final path = /* 이미지 저장 경로 */;
            await widget.controller.takePicture(path);
            // 촬영한 이미지를 저장하고 나머지 기능 구현
          } catch (e) {
            print(e);
          }
        },
        child: Icon(Icons.camera),
      ),
    );
  }
}

3. Bloc 패턴 구현

카메라 앱의 기능을 구성하는데 필요한 데이터와 비즈니스 로직을 관리하기 위해 bloc 패턴을 구현합니다.

먼저, CameraBloc을 아래와 같이 구현할 수 있습니다.

import 'package:bloc/bloc.dart';

class CameraBloc extends Bloc<CameraEvent, CameraState> {
  CameraBloc() : super(CameraInitial());

  @override
  Stream<CameraState> mapEventToState(CameraEvent event) async* {
    // 이벤트에 따른 상태 처리 로직 구현
  }
}

4. 필터 적용 기능 추가

이미지 필터를 적용하는 기능을 추가합니다. 이를 위해 photo_manager 패키지를 사용하여 갤러리에 접근하고, 이미지에 필터를 적용하는 기능을 구현합니다.

아래는 필터를 적용하는 applyFilter 함수의 예시입니다.

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

class FilteredImageView extends StatelessWidget {
  final String imagePath;

  const FilteredImageView({Key? key, required this.imagePath}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CameraBloc, CameraState>(
      builder: (context, state) {
        // state를 기반으로 이미지 필터를 적용하여 화면에 표시
      },
    );
  }
}

5. 앱 테스트 및 배포

모든 기능을 구현했다면, 앱을 테스트하고 Play 스토어나 App Store에 배포할 준비를 합니다.

이제 플러터에서 bloc 패턴을 사용하여 카메라 필터 앱을 개발하는 방법에 대해 알아보았습니다. 각 단계마다 세부 내용을 추가하여 자세히 구현해 보세요!

목차

1. 필요한 패키지 설치

2. 카메라 앱 기본 구성

3. Bloc 패턴 구현

4. 필터 적용 기능 추가

5. 앱 테스트 및 배포