[flutter] 플러터 바코드 스캔 앱에서 자동 포커스 기능 구현하기

플러터를 사용하여 바코드 스캔 앱을 개발 중이라면, 사용자가 앱을 실행하고 바로 스캔할 수 있도록 자동 포커스 기능을 구현할 수 있습니다. 이 기능을 통해 사용자 경험을 향상시킬 수 있으며 실제 사용 중에 더 편리하게 바코드를 스캔할 수 있습니다.

1. 카메라 제어 패키지 추가

먼저, 카메라를 제어하는 데 사용할 패키지를 설치해야 합니다. 플러그인 중에서 camera 패키지를 사용할 것입니다. pubspec.yaml 파일에 다음과 같이 camera 패키지를 추가합니다.

dependencies:
  camera: ^0.6.1+12

저장 후 패키지를 다운로드하기 위해 터미널에서 flutter packages get 명령을 실행합니다.

2. 카메라 초기화 및 포커스 기능 추가

다음으로, 앱에서 카메라를 초기화하고 포커스 기능을 추가해 보겠습니다.

import 'package:camera/camera.dart';

// 카메라 초기화
Future<CameraController> initCamera() async {
  final cameras = await availableCameras();
  final camera = cameras.first;

  final cameraController = CameraController(
    camera,
    ResolutionPreset.medium,
  );

  await cameraController.initialize();
  return cameraController;
}

// 포커스 기능 추가
void addAutoFocus(CameraController cameraController) {
  final streamSub = cameraController.onCameraInitialized.listen((_) {
    cameraController.setFocusMode(FocusMode.auto);
  });

  cameraController.onCameraClosing.then((_) {
    streamSub.cancel();
  });
}

위 코드에서 initCamera 함수는 사용 가능한 카메라 중 첫 번째를 선택하고, 카메라 컨트롤러를 초기화합니다. addAutoFocus 함수에서는 카메라가 초기화될 때 포커스 모드를 자동으로 설정하도록 설정합니다.

3. 위젯에 카메라 및 포커스 기능 추가

카메라 초기화와 포커스 기능을 추가한 후, 위젯에 해당 기능을 포함시킵니다. 플러터에서는 camera 패키지와 함께 camera_view 위젯을 사용하여 카메라 뷰를 구성할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Barcode Scanner',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BarcodeScanScreen(),
    );
  }
}

class BarcodeScanScreen extends StatefulWidget {
  @override
  _BarcodeScanScreenState createState() => _BarcodeScanScreenState();
}

class _BarcodeScanScreenState extends State<BarcodeScanScreen> {
  CameraController _cameraController;

  @override
  void initState() {
    super.initState();

    initCamera().then((controller) {
      setState(() {
        _cameraController = controller;
      });

      addAutoFocus(_cameraController);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    if (_cameraController == null || !_cameraController.value.isInitialized) {
      return Container();
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Barcode Scanner'),
      ),
      body: Column(
        children: [
          Expanded(
            child: AspectRatio(
              aspectRatio: _cameraController.value.aspectRatio,
              child: CameraView(_cameraController),
            ),
          ),
        ],
      ),
    );
  }
}

class CameraView extends StatelessWidget {
  final CameraController cameraController;

  CameraView(this.cameraController);

  @override
  Widget build(BuildContext context) {
    return CameraPreview(cameraController);
  }
}

위 코드에서 BarcodeScanScreen 위젯은 카메라를 초기화하고 포커스 기능을 추가합니다. _BarcodeScanScreenState 클래스에서 카메라 컨트롤러를 생성하고 초기화한 후 addAutoFocus 함수를 호출하여 포커스 모드를 자동으로 설정합니다.

카메라 뷰를 보여주기 위해 CameraView 위젯을 생성하여 CameraPreview 위젯에 카메라 컨트롤러를 전달합니다.

4. 결과 확인 및 추가 작업

이제 앱을 빌드하고 실행하여 바코드 스캔을 시도해 볼 수 있습니다. 앱이 실행될 때 카메라가 자동으로 포커스되고, 스캔할 준비가 된 상태가 됩니다.

추가로, 바코드를 스캔할 때 발생하는 이벤트 등을 처리하기 위해 camera 패키지의 문서와 예제 코드를 참고하는 것이 도움이 될 수 있습니다.

참고 자료