[Flutter] QR코드 인식하기

 봄 날씨가 지나고 꽃가루의 무차별 공격이 멈추고 나니, 비염에 예민한 나의 코도 어느 정도 회복이 되어가고 있었다.

축농증으로 고생한 적이 있어 약을 복용해가며 빠르게 치료를 진행해온 덕에 큰 문제없이 숨을 쉰다는 권리를 보장받으며 살 수 있게 되었다. 내년 이맘때 또다시 전쟁이 시작되겠지.

여담은 여기까지 하고 이번에는 QR코드로 특정 단어를 추출해오는 기능을 구현해보려 한다.

 

 이번 포스팅에서는 현재 Flutter에서 가장 보편적으로 사용되고 있는 플러그인인 qr_code_scanner를 이용해보려 한다.

https://pub.dev/packages/qr_code_scanner

qr_code_scanner | Flutter Package

나는 여기서 가장 안정화되어 보이는 버전인 0.6.1을 가져다 쓸 것이다.

 

pubspect.yaml 에서 아래와 같이 의존성을 추가해주도록 하자.

 

그리고 해당 플러그인은 minSdkVersion 이 20부터이기 때문에

앱 수준의 build.gradle 안으로 이동하여 minSdkVversion을 20으로 맞추도록 한다.

 

그다음 코틀린 버전도 최소 1.5.1을 요구하기 때문에 빌드 수준의 build.gradle의 코틀린 버전도 수정한다.

 

이제 터미털에서 flutter clean을 해준 후 pub-get을 하자.

빌드 오류가 발생하면 오류 메시지를 잘 확인하고 구글링을 하도록 하자.

 

이제 플러그인 세팅은 완료하였으니 기본 화면을 만들어주도록 하자.

main.dart

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String qrResult = '';

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '여기에 링크가 뜨게 됩니다.',
            ),
            Text(
              qrResult,
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onPressedFAB,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  void _onPressedFAB() async{

  }
}

 

main.dart 화면

 

이제 저 아래 있는 FloatingActionButton을 클릭하게 되면 QR 스캔 화면으로 이동되게 해야 되는데 우선 QR 스캔 화면을 만들어 주도록 하자.

qr_check_screen.dart

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

class QRCheckScreen extends StatefulWidget {
  static const String ROUTE_NAME = '/qr_check_screen';

  final String eventKeyword; //건져올 특정 키워드

  QRCheckScreen({required this.eventKeyword});

  @override
  State<QRCheckScreen> createState() => _QRCheckScreenState();
}

class _QRCheckScreenState extends State<QRCheckScreen> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;

  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
        appBar: AppBar(title: Text('QR스캐너'),),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                child: QRView(
                  key: qrKey,

                  onQRViewCreated: this._onQRViewCreated,
                  formatsAllowed: [
                    BarcodeFormat.qrcode
                  ],
                  overlay: QrScannerOverlayShape(
                    borderRadius: 10,
                    borderColor: Colors.blue,
                    borderLength: 30,
                    borderWidth: 5,
                    cutOutSize: screenSize.width/1.4,
                  ),
                ),
              ),
            )
          ],
        ));
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((event) {
      print('QRCheckScreen_onQRViewCreated.listen : result=${event.code}');

      if (event.code != null) {
      //스캔된 QR코드에 특정 키워드가 들어있다면
      //QR스캔을 정지하고 이 화면을 닫으면서 QR결과값을 보내주도록한다.
        if (event.code!.contains(widget.eventKeyword)) {
          this.controller!.dispose();
          Navigator.pop(context, event.code);
        }
      }
    });
  }
}

코드에 주석으로 설명을 해두긴 했지만 조금 더 설명이 필요할 것 같다.

 

우선 맨 위에

class QRCheckScreen extends StatefulWidget {
  static const String ROUTE_NAME = '/qr_check_screen';

  final String eventKeyword; //건져올 특정 키워드

  QRCheckScreen({required this.eventKeyword});

  @override
  State<QRCheckScreen> createState() => _QRCheckScreenState();
}

이 부분에서는 QR코드 스캐너가 연속으로 작동되기 때문에 QR이 인식될 때마다 0.1초 단위로 결괏값을 출력하는

이벤트를 발생시킨다. 따라서 내가 얻고자 하는 특정 키워드를 지정해주어야 하는데 위 코드에서 생성자를 호출할 때 값을 지정하도록 한다.

 

 void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((event) {
      print('QRCheckScreen_onQRViewCreated.listen : result=${event.code}');

      if (event.code != null) {
      //스캔된 QR코드에 특정 키워드가 들어있다면
      //QR스캔을 정지하고 이 화면을 닫으면서 QR결과값을 보내주도록한다.
        if (event.code!.contains(widget.eventKeyword)) {
          this.controller!.dispose();
          Navigator.pop(context, event.code);
        }
      }
    });
  }

그리고 이 부분에서는 qrView가 생성되는 동시에 onQRViewCreated를 호출하도록 한다.

그리고 QRViewController를 인자로 건네주어 원하는 액션을 수행할 수 있도록 도와준다.

여기서 QRViewController에 listner에서 이벤트가 발생하게 되면

event라는 인자를 받게 되고 해당 인자가 null이 아니고 이전에 지정한 keyword 가 결괏값에 포함되어 있다면

QRViewController를 종료하고 화면을 닫으면서 결괏값을 보내도록 지정하고 있다.

 

 

이제 다시 main.dart로 이동하여

FloatingActionButton을 누르면 QR스캐너 화면으로 이동하도록 구현하자.

main.dart

  void _onPressedFAB() async { //비동기 실행으로 QR화면이 닫히기 전까지 await으로 기다리도록 한다.
    dynamic result = await Navigator.push(context, MaterialPageRoute(builder: (context) {
      return QRCheckScreen(eventKeyword: 'userId');
    }));

    if(result != null) {
      setState(() {
      //qr스캐너에서 받은 결과값을 화면의 qrResult 에 적용하도록 한다.
        qrResult = result.toString();
      });
    }
  }
}

 

 

이제 실행해서 결과를 확인해보자.

 

첫 번째 qr코드는 userId가 포함된 url링크이고

두 번째 qr코드는 userId가 포함되지 않은 url링크이다.

세 번째는 text만을 이용해 userId를 포함하여 인식을 시켜봤다.

 

본인이 원하는 파라미터로 지정할 수 있고 스캔 결과도 마음대로 조작하여 다룰 수 있을 것이다.

이번 포스팅은 여기까지.

 

아래는 앱 전체 소스코드이다.

https://github.com/jwk9022648/flutter_qr_test

GitHub - jwk9022648/flutter_qr_test