[flutter] get_it를 사용하여 플러터 앱에서 QR 코드 스캔 기능을 어떻게 구현하는가?

30 Nov 2023

flutter

이번 포스트에서는 Flutter 앱에서 QR 코드 스캔 기능을 구현하는 방법을 알아보겠습니다. 우리는 get_it 패키지를 사용하여 QR 코드 스캐너 컴포넌트를 주입하고 관리할 것입니다.

QRCode Scanner 패키지 설치

QR 코드 스캐너 기능을 구현하기 위해 qr_code_scanner 패키지를 사용하겠습니다. pubspec.yaml 파일에 다음 의존성을 추가해줍니다:

dependencies:
  qr_code_scanner: ^0.4.0

다음으로 패키지를 가져오기 위해 pub get 명령을 실행합니다.

QR 코드 스캐너 인터페이스 작성

QR 코드 스캐너를 사용하기 위해 인터페이스를 작성합니다. lib/services/qrcode_service.dart 파일을 생성하고 다음과 같이 코드를 작성해보세요:

import 'package:qr_code_scanner/qr_code_scanner.dart';

class QRCodeService {
  QRViewController _controller;
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');

  void onQRViewCreated(QRViewController controller) {
    this._controller = controller;
    controller.scannedDataStream.listen((scanData) {
      // QR 코드를 스캔한 데이터에 대한 로직을 여기에 작성하세요.
      print('Scanned data: ${scanData.code}');
    });
  }

  void dispose() {
    _controller.dispose();
  }
}

위의 코드에서는 qr_code_scanner 패키지에서 제공하는 QRViewController를 사용하여 QR 코드 스캐너 컨트롤러를 생성하고, 스캔된 데이터를 처리하는 로직을 작성했습니다.

QR 코드 스캐너 서비스 주입

이제 get_it 패키지를 사용하여 QR 코드 스캐너 서비스를 주입하는 작업을 해보겠습니다. lib/main.dart 파일을 열고 다음과 같이 코드를 수정하세요:

import 'package:flutter/material.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import 'package:get_it/get_it.dart';

import 'services/qrcode_service.dart';

void main() {
  // 앱 실행 전에 QRCodeService 인스턴스를 주입합니다.
  GetIt.instance.registerSingleton(QRCodeService());

  runApp(MyApp());
}

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

class QRCodeScanner extends StatefulWidget {
  @override
  _QRCodeScannerState createState() => _QRCodeScannerState();
}

class _QRCodeScannerState extends State<QRCodeScanner> {
  QRCodeService _qrCodeService;

  @override
  void initState() {
    super.initState();
    _qrCodeService = GetIt.instance<QRCodeService>();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('QR Code Scanner'),
      ),
      body: QRView(
        key: _qrCodeService.qrKey,
        onQRViewCreated: _qrCodeService.onQRViewCreated,
      ),
    );
  }
}

위의 코드에서는 GetIt 패키지를 사용하여 QRCodeService 인스턴스를 주입하고, QRCodeScanner 위젯에서 해당 서비스를 사용할 수 있도록 설정했습니다.

결론

이제 Flutter 앱에서 get_it 패키지를 사용하여 QR 코드 스캔 기능을 구현하는 방법을 배웠습니다. QR 코드 스캐너 패키지를 설치하고, QR 코드 스캐너 서비스를 작성하고, get_it 패키지를 사용하여 주입하는 방법을 알아냈습니다. 이제 앱을 실행하고 QR 코드를 스캔해보세요!