[flutter] 플러터에서 훅(hook)을 활용하여 카메라 기능 구현하기

14 Dec 2023

flutter

이번에는 플러터(Flutter) 앱에서 훅(hook)을 활용하여 카메라 기능을 구현하는 방법에 대해 알아보겠습니다. 플러터에서 훅(hook)을 사용하면 상태 관리와 라이프사이클 관리가 간편해지며, 카메라와 관련된 기능을 빠르게 구현할 수 있습니다.

1. flutter_hooks 패키지 설치하기

먼저, 훅(hook)을 사용하기 위해 flutter_hooks 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 flutter_hooks 패키지를 추가합니다.

dependencies:
  flutter_hooks: ^0.18.0

그리고 터미널에서 아래 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

2. 카메라 기능 구현하기

카메라 기능을 훅(hook)을 활용하여 구현하는 예제 코드를 작성해보겠습니다.

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final cameras = await availableCameras();
  runApp(MyApp(cameras: cameras));
}

class MyApp extends StatelessWidget {
  final List<CameraDescription> cameras;

  const MyApp({Key? key, required this.cameras}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraScreen(camera: cameras.first),
    );
  }
}

class CameraScreen extends HookWidget {
  final CameraDescription camera;

  const CameraScreen({Key? key, required this.camera}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useCameraController(camera);
    useEffect(() {
      controller.initialize();
      return () {
        controller.dispose();
      };
    }, []);
  
    if (!controller.value.isInitialized) {
      return Container();
    }
  
    return AspectRatio(
      aspectRatio: controller.value.aspectRatio,
      child: CameraPreview(controller),
    );
  }
}

위 예제 코드는 flutter_hooks 패키지를 사용하여 카메라 기능을 구현한 예제입니다. CameraScreen 위젯에서 useCameraController 훅을 사용하여 카메라 컨트롤러를 초기화하고 프리뷰를 보여주는 방식으로 동작합니다.

마무리

플러터에서 훅(hook)을 활용하여 카메라 기능을 구현하는 방법에 대해 알아보았습니다. 플러터의 풍부한 패키지 생태계와 편리한 훅 지원을 통해 더욱 간편하게 카메라와 관련된 기능을 구현할 수 있습니다. 이를 참고하여 자유롭게 플러터 앱에 카메라 기능을 추가해 보세요.