Flutter의 QR 코드 스캔 사용법

QR 코드는 다양한 정보를 저장할 수 있는 2차원 바코드로, Flutter 애플리케이션에서 QR 코드를 스캔하여 빠르고 쉽게 데이터를 처리할 수 있습니다. 이번 글에서는 Flutter에서 QR 코드 스캔 기능을 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. QR 코드 스캔 패키지 설치

Flutter 애플리케이션에서 QR 코드를 스캔하기 위해 qr_code_scanner 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  qr_code_scanner: ^0.7.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 카메라 권한을 사용하기 위해 android/app/src/main/AndroidManifest.xml 파일을 수정해야 합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_project_name">

    <application>
        ...
    </application>

    <uses-permission android:name="android.permission.CAMERA"/>
</manifest>

 

위 코드는 카메라 사용 권한을 추가합니다.

3. iOS 설정

iOS 프로젝트에서 카메라 권한을 사용하기 위해 ios/Runner/Info.plist 파일을 수정해야 합니다.

<key>NSCameraUsageDescription</key>
<string>We need your camera to scan QR codes.</string>

 

위 코드는 카메라 사용 권한을 추가합니다.

4. QR 코드 스캔 구현

이제 Flutter 애플리케이션에서 QR 코드를 스캔하는 기능을 구현해보겠습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QRViewExample(),
    );
  }
}

class QRViewExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _QRViewExampleState();
}

class _QRViewExampleState extends State<QRViewExample> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;
  String? qrText;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR Code Scanner')),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 5,
            child: QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: (qrText != null)
                  ? Text('Scan result: $qrText')
                  : Text('Scan a code'),
            ),
          )
        ],
      ),
    );
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        qrText = scanData.code;
      });
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }
}

 

위 코드는 QR 코드를 스캔하여 결과를 화면에 표시하는 예제입니다. QRView 위젯을 사용하여 QR 코드를 스캔하고, scannedDataStream 스트림을 통해 스캔 결과를 받아옵니다.

 

 

반응형

 

 

5. QR 코드 스캔 기능 테스트

위 예제를 실행하여 QR 코드를 스캔해보세요. 카메라가 활성화되고, QR 코드를 인식하면 스캔 결과가 화면에 표시됩니다.

6. QR 코드 스캔 결과 처리

스캔한 QR 코드의 결과를 처리하는 방법을 추가해보겠습니다. 예를 들어, 스캔 결과를 특정 URL로 열거나 특정 동작을 수행할 수 있습니다.

void _onQRViewCreated(QRViewController controller) {
  this.controller = controller;
  controller.scannedDataStream.listen((scanData) {
    setState(() {
      qrText = scanData.code;
      if (qrText != null && qrText!.startsWith('http')) {
        _launchURL(qrText!);
      }
    });
  });
}

Future<void> _launchURL(String url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

 

위 코드는 스캔한 QR 코드 결과가 URL인 경우 해당 URL을 브라우저에서 여는 예제입니다. url_launcher 패키지를 사용하여 URL을 엽니다.

pubspec.yaml 파일에 url_launcher 패키지를 추가합니다.

 

dependencies:
  url_launcher: ^6.0.20

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

결론

Flutter에서 QR 코드를 스캔하는 기능을 구현하면 사용자가 빠르고 쉽게 다양한 정보를 얻을 수 있습니다. qr_code_scanner 패키지를 사용하여 QR 코드를 스캔하고, 스캔 결과를 처리하는 방법을 통해 QR 코드 스캔 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 QR 코드 스캔 기능을 효율적으로 사용해보세요. QR 코드 스캔을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.