Fled 바코드 스캐너 만들기

반응형

사람들이 당신의 앱을 사용하여 데이터를 시각적으로 빠르게 인식하기를 원한다면, 당신은 바코드와 QR코드를 사용하는 것을 그냥 지나칠 수 없다. 그들은 오랫동안 오류나 오해의 가능성 없이 광학적으로 데이터 조각을 인식해 왔습니다.

오늘날, 바코드에 대한 많은 용도가 여전히 있다. 우리가 최근에 본 더 흔한 용도 중 하나는 식당이다. 식당에서는 고객들이 QR코드를 스캔하여 메뉴에서 특정 품목을 주문할 수 있다.

이 기사에서는 바코드와 QR코드가 모바일 앱에서 어떻게 동작할 수 있는지 보여 주기 위해 다음과 같은 간단한 앱을 만들 것입니다.

 

이 앱은 사용자가 먹거리로 인식되는 QR코드를 스캔하도록 한다. 이 단계를 생성하려면 다음 단계를 완료해야 합니다.

• 메뉴 옵션으로 QR 코드 생성
• qr_code_scanner에 의존성을 추가하여 앱에서 QR 코드 및 바코드를 스캔할 수 있습니다.
• 메뉴 옵션을 앱에 추가하고 이러한 항목을 탐지할 때 반응하도록 합니다.
• 테스트를 위해 시뮬레이션 환경에서 QR 코드를 표시하도록 Android 에뮬레이터 구성

준비됐나요? 시작하죠.

Fluting 프로젝트 만들기

우리가 가장 먼저 해야 할 일은 우리의 Fluting 프로젝트를 만드는 것인데, 이 프로젝트를 fluting을 입력하면 명령줄에 빈약하게 된다.

 

명령이 완료되면 qr_code_scanner를 프로젝트에 추가할 수 있습니다. 명령줄에 다음 코드를 기록하면 됩니다.

이렇게 하면 QR 코드 스캔 패키지에 대한 종속성이 추가됩니다. 사용자의 핸드폰에 있는 카메라를 사용하여 작업을 실행할 것이기 때문에, 우리는 이 작업을 수행하기 위해 약간의 설정을 해야 합니다.

Android 플랫폼 구성

일반적으로 Flutder는 모든 버전의 안드로이드와 광범위하게 호환되며, 심지어 매우 오래된 버전도 마찬가지입니다. 그러나 qr_code_scanner 패키지는 Android KitKat에서만 사용할 수 있는 기능을 사용하기 때문에 이 변경에 영향을 미치려면 일부 구성 설정을 조정해야 합니다.

이 플러그인을 사용하려면 Gradle, Kotlin 및 Kotlin Gradle 플러그인이 최신 상태인지 확인하십시오. 이렇게 하려면 qr_code_scanner 저장소에 설명된 통합 프로세스를 따르십시오.

 

여기서 우리는 앱이 사용하는 Kotlin과 Gradle 버전을 간단히 조정하고, 최소 SDK 버전을 20으로 설정해야 합니다. 이것은 단지 그 앱이 안드로이드 킷캣 이상에서만 작동한다는 것을 의미한다.

iOS 플랫폼 구성

우리가 전화기의 카메라에 액세스하고 있기 때문에, 애플 앱 스토어는 우리가 카메라에 액세스하기 위해 이 요청을 하고 있다는 것을 알 수 있고, 왜 그러한 요청을 하는지 알고 싶어할 것입니다.

다음을 Info.plist 파일에 추가하여 플러그인에 대한 iOS를 구성할 수 있습니다.

이제, 사용자가 그들의 카메라로 앱의 QR 코드를 스캔하려고 할 때, 그들은 그 앱이 그들의 카메라를 사용하는 것을 받아들이거나 거부할 수 있는 경고를 보게 될 것이다.

 

샘플 Flutding 앱 만들기

플랫폼이 구성되어 이제 QR코드 Fled 앱을 만들 수 있습니다. 쉽게 사용할 수 있도록 프로젝트를 몇 개의 파일로 나누어 이해했습니다. 프로젝트의 레이아웃은 다음과 같습니다.

이 기사의 초점이 QR코드를 스캔하는 과정이기 때문에 우리는 대부분의 시간을 home.dart 파일을 보면서 보낼 것입니다.

인식 가능한 항목 목록 만들기

먼저 스캐너가 인식해야 하는 항목 목록을 만듭니다. 바코드 스캐너가 모든 바코드를 인식할 수 있으며 미리 정의된 항목 목록에만 반응하도록 제한하고 싶기 때문에 이 작업을 수행해야 합니다.

 

또한 사용자에게 주문할 항목을 시각적으로 나타낼 수 있도록 각 항목에 특정 아이콘을 연결하려고 합니다.

ExpectedScanResult에 대한 클래스는 다음과 같습니다.

그러면 home.dart 15번 라인에 다음과 같은 코드를 초기화할 수 있습니다.

그러면 검색 시 관련 아이콘을 포함하여 승인된 항목 목록이 추가됩니다.

바코드 결과 설정

 

다음으로 우리가 해야 할 일은 바코드 결과와 QRViewController를 설정하는 것입니다.

이렇게 하려면 변수를 에 추가하되, 접미사를 붙여서 null로 만들겠습니다. 사용자가 바코드를 스캔한 후에야 바코드 결과를 알 수 있고 QR 코드 스캐너가 초기화되어야 QRView 컨트롤러에 액세스할 수 있기 때문에 이렇게 합니다.

바코드? 결과;

QRViewController? 컨트롤러;

QRView 위젯 구성

 

이제 위젯 트리 내에서 QRView 위젯을 구성할 수 있습니다. 샘플 앱에서는 QR 스캐너를 스택 위젯 내에 배치하여 QR 코드 스캐너가 작동 중일 때 스캔해야 할 내용을 사용자에게 알려줍니다.

QRView를 다음과 같이 구성합니다.

_onQ 내에서RViewCreated 기능은 우리가 볼 것으로 예상되는 음식 목록을 끌어옵니다. 그러면 QR코드 스캐너에서 수신하는 이벤트를 구독할 수 있습니다.

검색 중인 항목의 값이 수락 목록에 있으면 다음과 같이 주문을 확인할 수 있는 다른 페이지로 이동합니다.

그리고 이를 통해, 우리는 우리 앱에 QR코드 스캐너를 위한 토대를 마련했습니다. 그러나 현재 문제가 약간 있습니다. QR 코드가 있는 실제 종이를 스캔하려면 디버깅을 위해 이 애플리케이션을 물리적 장치에 배포해야 하는 번거로움이 있습니다.

 

다행히도, 안드로이드 에뮬레이터는 우리가 사진을 찍을 수 있는 가상 환경을 갖추고 있습니다. 또한 QR 코드 스캔을 테스트하는 데 사용할 수 있는 환경 내의 이미지를 설정할 수 있습니다. 어떻게 하는지 보자.

테스트를 위해 Android 에뮬레이터 구성

코드가 정상화되거나 샘플 앱이 복제되면 안드로이드 에뮬레이터를 시작할 수 있습니다. Visual Studio Code를 사용하는지 Android Studio를 사용하는지에 따라 작업 방식이 달라집니다.

Android 에뮬레이터를 시작한 후 카메라 설정을 열어 이미지를 설정합니다. 먼저 메뉴 하단에 있는 점 세 개를 클릭한 다음 아래의 스크린샷처럼 카메라, 이미지 추가를 클릭합니다.

 

다음으로, Qrcodes 디렉토리의 이미지 중 하나를 선택합니다. 이를 통해 코드가 가상 카메라 환경 내에 나타납니다.

지금 에뮬레이터에서 카메라를 열고 왼쪽 ALT 키를 누른 상태에서 W를 사용하여 앞으로 걸어가고 마우스를 사용하여 QR 코드가 표시되는 "위로 걸어갑니다"를 둘러봅니다.

가상 환경 내의 벽에 QR코드를 붙이는 것이 복잡하다는 것은 인정하겠지만 QR코드가 있는 실제 종이를 인쇄하여 스캔하는 것보다 낫습니다.

그리고 샘플 앱에서도 똑같이 하면 QR코드가 인식되고 사용자에게 해당 제품을 주문할 수 있는 옵션이 제공됩니다(첫 번째 동영상 참조).

 

씌우다

QR코드와 바코드는 데이터를 빠르게 광학적으로 인식할 수 있는 강력한 도구다. 이 기사에서는 Fled 패키지를 사용하여 이러한 코드를 인식하고 무엇인가를 수행하는 방법에 대해 알아보았습니다.

또한 이러한 코드 중 하나를 표시하도록 에뮬레이터를 구성하여 코드가 있는 물리적 종이를 사용하여 작업 흐름을 가속화했습니다.

샘플 앱의 전체 코드는 여기서 볼 수 있습니다. 해피 스캔!

원래 https://www.epicprogrammer.com에서 출판되었습니다.