[flutter] 플러터(Flutter)에서 사진 및 동영상 촬영 기능 구현하기

18 Dec 2023

flutter

사진 및 동영상 촬영은 애플리케이션에서 중요한 요소입니다. 플러터(Flutter)를 사용하면 카메라 기능을 간편하게 구현할 수 있습니다. 이번 포스트에서는 플러터(Flutter) 앱에서 사진 및 동영상 촬영을 구현하는 방법에 대해 알아보겠습니다.

카메라 패키지 설치하기

우선, 플러터(Flutter) 프로젝트에 카메라 기능을 추가하기 위해 camera 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해줍니다.

dependencies:
  camera: ^0.9.4

그리고, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

사진 촬영 구현하기

먼저, 사진 촬영 기능을 구현해보겠습니다. 아래는 camera 패키지를 사용하여 사진을 촬영하는 간단한 예제 코드입니다.

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

List<CameraDescription> cameras;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('사진 촬영'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => TakePictureScreen()),
              );
            },
            child: Text('사진 촬영'),
          ),
        ),
      ),
    );
  }
}

class TakePictureScreen extends StatefulWidget {
  @override
  _TakePictureScreenState createState() => _TakePictureScreenState();
}

class _TakePictureScreenState extends State<TakePictureScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(cameras[0], ResolutionPreset.high);
    _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_alt),
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(imagePath: image.path),
              ),
            );
          } catch (e) {
            print(e);
          }
        },
      ),
    );
  }
}

class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('촬영된 사진')),
      body: Image.file(File(imagePath)),
    );
  }
}

위의 예제 코드는 먼저 availableCameras()를 통해 이용 가능한 카메라 목록을 가져온 후에, CameraController를 초기화하고, CameraPreview 위젯을 사용하여 카메라 화면을 보여줍니다. 그리고 FloatingActionButton을 통해 사진을 촬영하고, 그 결과를 화면에 표시합니다.

동영상 촬영 구현하기

이번에는 동영상 촬영 기능을 구현해보겠습니다. 사진 촬영과 마찬가지로 camera 패키지를 사용하여 동영상을 촬영할 수 있습니다.

// 사진 촬영 코드와 동일

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.videocam),
  onPressed: () async {
    if (!_controller.value.isRecordingVideo) {
      try {
        await _initializeControllerFuture;
        await _controller.startVideoRecording();
      } catch (e) {
        print(e);
      }
    } else {
      try {
        final file = await _controller.stopVideoRecording();
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DisplayVideoScreen(videoPath: file.path),
          ),
        );
      } catch (e) {
        print(e);
      }
    }
  },
),

// 사진 촬영 코드와 동일

위의 코드는 FloatingActionButton을 통해 동영상 촬영을 시작하고, 다시 눌러 동영상 촬영을 종료하는 기능을 구현한 것입니다.

이제, 플러터 앱에서 사진 및 동영상 촬영 기능을 구현하는 방법에 대해 알아보았습니다. 이러한 기능을 추가함으로써 앱 사용자들은 편리하고 즐거운 경험을 얻을 수 있을 것입니다.

더 자세한 내용은 카메라 패키지 문서를 참고하시기 바랍니다.