[flutter] 플러터 스택드 위젯에서 카메라 기능 추가하는 방법

15 Dec 2023

flutter

플러터 앱에서 카메라 기능을 사용자에게 제공하려면 스택드(Stacked) 위젯을 사용하여 카메라 미리 보기 화면을 만들고, 카메라 API를 이용하여 사진을 찍거나 동영상을 녹화할 수 있도록 구현해야 합니다. 이번 포스트에서는 간단한 예제를 통해 플러터 스택드 위젯에서 카메라 기능을 추가하는 방법을 설명하겠습니다.

1. 카메라 액세스 권한 설정

먼저, 앱이 카메라에 액세스할 수 있도록 AndroidManifest.xml 파일과 Info.plist 파일에 필요한 권한과 사용 설명을 추가해야 합니다.

AndroidManifest.xml 파일

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera.flash" />

Info.plist 파일

<key>NSCameraUsageDescription</key>
<string>앱에서 카메라를 사용하여 사진을 찍을 수 있습니다.</string>

2. 카메라 패키지 추가

플러터 프로젝트에 카메라 패키지를 추가해야 합니다.

dependencies:
  camera: ^0.9.4+7
  path_provider: ^2.0.2
  path: ^1.8.0

3. 카메라 기능 추가

카메라 미리 보기 화면과 카메라 제어 버튼을 포함하는 스택드 위젯을 만들어 camera 패키지를 사용하여 카메라를 제어합니다.

import 'package:camera/camera.dart';

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

class _CameraPreviewScreenState extends State<CameraPreviewScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(cameras[0], ResolutionPreset.medium);
    _initializeControllerFuture = _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('카메라'),
      ),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera),
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            // 사진을 찍은 후에 할 일을 처리합니다.
          } catch (e) {
            print('사진을 찍을 수 없습니다: $e');
          }
        },
      ),
    );
  }
}

위 예제에서는 camera 패키지의 CameraController와 CameraPreview 위젯을 사용하여 화면에 카메라 미리 보기를 표시하고, 플로팅 액션 버튼을 통해 카메라로부터 사진을 찍는 기능을 구현합니다.

이제, 카메라 액세스 권한을 설정하고, 필요한 패키지를 추가한 뒤에 위와 같은 방법으로 플러터 스택드 위젯에서 카메라 기능을 추가할 수 있습니다.

카메라 패키지에 대한 자세한 내용은 공식 문서에서 확인할 수 있습니다.

참고 자료:

플러터 카메라 패키지 공식 문서