[Flutter] QR Code Scanner 만들기

어제 Mini~(Or Micro, 설마 Nano 정도는 아니겠죠?) 프로젝트를 진행할 겸 공부도 다시 할 겸 해서 플러터에 대해 기본을 다시 들어보고, 간단히 잘 만들어진 소스들을 찾아서 QR코드 스캐너를 만들어 보았습니다.

 

제가 필요한 기능은 아래와 같아서 해당 기능들을 할 수 있는 예제 코드를 찾아서 합쳐두었습니다.

 

기능 1. QR Code Scan -> QR코드를 읽어서 해당 값을 받아온다.

기능 2. (QR Code로 읽어온) URL을 브라우저에서 열어준다.

 

기능 2는 기능 1, QR Code 스캔을 하면 당연히 복권당첨 결과가 나올 줄 알았지만(물론 나중에 찍어보고 아닐 수 있는 것도 알았습니다.) 세상에 당연한 것이 없듯, QR Code 스캔 앱 소스를 만들고 테스트를 해 보니 주소로 이동이 되지 않았습니다. 그래서 URL을 확인하여 브라우저로 열 수 있는 값이면 여는 기능 2를 추가하여 작업을 하였습니다.

 

 

 

 

작업은 플러터 기본 프로젝트를 하나 만들고 그 것을 바탕으로 작업을 했습니다.

 

 

 

1) 기능 1, URL launcher를 활용하기 위해 추가 필요한 부분

 

프로젝트 Tree에 표시한 pubspec.yaml파일을 열어서 qrscan을 추가해줍니다. 

dependencies에 qrscan이라고 입력을 한 후, 위의 화면과 같이 마우스를 두고 전구 모양 팝업 아이콘이 나오면 아래로 확장하여 Pub get을 해 줍니다.

 

 

위의 Tree처럼 확장해 경로를 잘 찾아 AndroidManifest.xml에 권한관련 내용을 추가해줍니다.

카메라 사용과 저장소를 읽고 쓰는 권한으로 충분히 짐작할 수 있을정도로 이름이 잘 지정되어있습니다.

 

 

 

2) 기능 2, URL launcher를 활용하기 위해 추가필요한 부분

 

 

위에서 qrscan을 추가한 것과 같은 작업입니다.

프로젝트 Tree에 표시한 pubspec.yaml파일을 열어서 url_launcher:를 추가합니다.

 

 

 

3) 기능 1, 2를  구현하는 소스 부분 - Main.Dart

 

import 관련 소스 내용

소스코드인 Main.dart에서 위의 qr관련 패키지와 url launcher관련 패키지를 Import 해줍니다.

 

 

 

 

앱의 기본 화면을 처리하는 부분과 플로팅 버튼 클릭할 때 호출할 함수 지정하는 부분

 

 

 

url launcher 처리하는 부분과 QR Code 스캔하는 부분

 

URL을 처리하는 함수는 저도 아직 Dart 문법에 익숙하지 않지만(사실 Dart를 본 적도 없었...) 제가 이해하고 수정한 부분에 대해 간단히만 정리하면, URL이라는 입력값을 받아서 그 값이 수행될 수 있는 URL인지 확인하고 가능하면 수행(브라우저를 통해 해당 주소로 이동)을, 그렇지 않으면 예외를 발생시키는 식으로 처리했습니다.

 

scan함수의 경우는 스캔이 될 때까지 기다리고 스캔이 되면 해당 text 값을 반환합니다. 

 

그러면 이 앱이 동작을 해야 하는 방식은 앱이 구동되면 스캔된 값이 없기 때문에 기본값으로 초기에 output에 설정한 값인 'Empty Scan Code'가 화면에 출력이 되며, 오른쪽 하단의 플로팅 버튼을 누르면 QR코드 스캔 작업을 하고, 스캔이 되면 해당 주소로 이동이 가능하면 이동을 하고 아니면 예외를 반환, 그리고 그다음에 QR코드를 읽어온 값을 화면 중앙에 출력합니다.

 

해당 구현이 완료되어 테스트 한 내용은 아래의 포스팅에서 확인하실 수 있습니다.

 

2020/07/13 - [프로젝트/Lotto 확인 App] - [QR Code] QR Scan 기능 구현 및 테스트

[QR Code] QR Scan 기능구현 및 테스트