[flutter] Riverpod를 사용하여 앱에 카메라 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

Riverpod는 Flutter 앱에 상태 관리를 위한 시각적으로 강력한 도구입니다. 카메라 기능을 추가하기 위해서는 먼저 flutter_camera package를 사용할 것을 권장합니다. 이 패키지는 Flutter에서 카메라에 접근하여 이미지나 비디오를 촬영할 수 있는 기능을 제공합니다.

여기에는 Riverpod와 flutter_camera 패키지를 사용하여 앱에 카메라 기능을 추가하는 단계를 안내하겠습니다.

먼저 pubspec.yaml 파일에 flutter_camera 패키지를 추가합니다.

dependencies:
  flutter_camera: ^0.10.3

다음으로 flutter_camera 패키지를 가져올 수 있도록 main.dart 파일의 상단에 import 문을 추가합니다.

import 'package:flutter_camera/flutter_camera.dart';

이제 Riverpod를 사용하여 카메라 상태를 관리할 Provider를 생성합니다. 상태는 촬영한 사진의 경로를 저장할 수 있도록 설정합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';

final cameraProvider = Provider<Camera>((ref) => Camera());
final photoPathProvider = Provider<String>((ref) => '');

이제 화면에 카메라 미리 보기를 표시하기 위해 StatefulWidget를 생성합니다. initState에서 Provider로부터 camera 인스턴스를 가져옵니다.

class CameraPreviewScreen extends StatefulWidget {
  @override
  _CameraPreviewScreenState createState() => _CameraPreviewScreenState();
}

class _CameraPreviewScreenState extends State<CameraPreviewScreen> {
  Camera? _camera;

  @override
  void initState() {
    super.initState();
    _camera = context.read(cameraProvider);
  }

  @override
  void dispose() {
    _camera!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera Preview'),
      ),
      body: Column(
        children: [
          Expanded(
            child: CameraPreview(_camera!),
          ),
          ElevatedButton(
            onPressed: () async {
              final photoPath = await _camera!.takePhoto();
              context.read(photoPathProvider).state = photoPath;
            },
            child: Text('Take Photo'),
          ),
        ],
      ),
    );
  }
}

마지막으로 앱의 메인 화면에서 CameraPreviewScreen 위젯을 표시합니다. 클릭 이벤트를 통해 화면을 전환하고, 촬영한 사진의 경로를 표시할 수 있도록 Provider를 사용하여 구현합니다.

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final photoPath = context.read(photoPathProvider).state;

    return MaterialApp(
      title: 'Camera App',
      home: photoPath.isNotEmpty
          ? Scaffold(
              body: Center(
                child: Image.file(File(photoPath)),
              ),
            )
          : Scaffold(
              body: Center(
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => CameraPreviewScreen(),
                      ),
                    );
                  },
                  child: Text('Open Camera'),
                ),
              ),
            ),
    );
  }
}

이제 앱을 실행하고 “Open Camera” 버튼을 클릭하면 카메라 미리 보기가 표시됩니다. 그리고 “Take Photo” 버튼을 클릭하면 촬영한 사진이 앱 화면에 표시됩니다.

이처럼 Riverpod와 flutter_camera를 사용하여 Flutter 앱에 간단하게 카메라 기능을 추가할 수 있습니다. 추가로 사진 촬영 후에 다른 동작을 실행하려면 Provider를 사용하여 촬영한 사진의 경로를 저장하고 해당 경로를 활용할 수 있습니다.

참고 자료:

flutter_camera 패키지: https://pub.dev/packages/flutter_camera
Riverpod 공식 문서: https://riverpod.dev/