Flutter 2.0 QR code 인식하기

QR code를 읽어오라는 과제가 떨어졌다 !!

QR 코드를 읽어와보라는 직장 사수의 과제가 떨어졌습니다.

QR 코드는 플러터에서 어떻게 읽어올 수 있을까요? 

개인적으로 시간을 많이 쏟아가며 알아낸 것이지만, 여러분은 이러한 시행착오를 거칠 필요 없이 10분 안에 구현하실 수 있도록 정리해보았습니다 :)

 

권한 얻기 + qrscan 플러그인 설치

먼저 QR 정보를 받아오려면 반드시 카메라에 대한 접근 권한이 있어야 합니다.

이전 글에서 카메라 접근 권한에 대해 다루었는데, 참고하실 분들은 아래 링크를 통해 참고해주세요.

https://42kchoi.tistory.com/368

 

권한을 얻었다면 이제 qr코드를 scan해볼 차례입니다. 

일단 패키지를 하나설치해줍니다.

이름은 qrscan 입니다. 

설치하셨다면 QR 서비스를 진행할 클래스에 아래 한 줄을 import해줍니다.

 

import 'package:qrscan/qrscan.dart' as scanner;

(저는 scanner라는 이름으로 위 패키지를 쓰겠습니다.)

 

그리고 우리, 이러한 상황을 가정해봅시다.

qr code를 scan하면 특정 문자열을 읽어오게 돼 있습니다.

그렇다면 _qrString이라는 state를 하나 선언하고,

qr code 스캔 시 해당 state를 읽어온 문자열로 바꾸어봅시다.

코드는 아래와 같습니다:

Future _scan() async {
    await _getStatuses(); // 권한 동의 관련
    String? qrString = await scanner.scan();
    if (qrString != null) {
      setState(() {
        _qrString = qrString;
      });
    }
  }

 

끝입니다.

참 간단하죠?

혹시나 저처럼 어떤 버튼을 눌렀을 때 정보를 가져와야 하는 분들을 위해 샘플 코드를 남겨놓겠습니다.

 

 

https://github.com/ChoiKanghun/Flutter_Practice/blob/master/lms_webview/lib/views/qrview.dart

혹시 위 링크가 안 들어가진다면 아래 코드 참조 !

 

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:qrscan/qrscan.dart' as scanner;

class QrView extends StatefulWidget {
  const QrView({Key? key}) : super(key: key);

  @override
  _QrViewState createState() => _QrViewState();
}

class _QrViewState extends State<QrView> {
  var _qrString = "Empty Scan Code";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Text(_qrString),
          ElevatedButton(onPressed: () => _scan(), child: Icon(Icons.qr_code))
        ],
      ),
    ));
  }

  Future<bool> _getStatuses() async {
    Map<Permission, PermissionStatus> statuses =
        await [Permission.storage, Permission.camera].request();

    if (await Permission.camera.isGranted &&
        await Permission.storage.isGranted) {
      return Future.value(true);
    } else {
      return Future.value(false);
    }
  }

  Future _scan() async {
    await _getStatuses();
    String? qrString = await scanner.scan();
    if (qrString != null) {
      setState(() {
        _qrString = qrString;
      });
    }
  }
}