web analytics

Flutter : สแกน QR และ Barcode ใน Flutter

สวัสดีครับ มาลองเล่น library ใน Flutter กันต่อ บล็อกนี้จะพามาลองเล่น เกี่ยวกับการสแกน barcode และ QR code ครับ ซึ่งก็มี library อยู่หลายตัว แต่ตัวที่จะใช้ในบล็อกนี้เป็นตัวที่ง่ายที่สุด ชื่อว่า barcode scanner ซึ่งหลักการทำงานของมันก็คือไปเรียก Native library ของแต่ละ platform อีกทีนึง

เพิ่ม dependencies

เพิ่ม dependencies ลงไปใน pubspec.yaml

เพิ่ม Permission

เนื่องจากมีการใช้กล้องในการสแกนก็ต้องเพิ่ม permission ต่างๆ ใน android เพิ่มที่ android/src/main/AndroidManifest.xml

ที่ build.gradle ระดับโปรเจค หรือที่ไฟล์ android/ build.gradle เพิ่ม dependencies เกี่ยวกับ kotlin gradle plugin

build.gradle ระดับแอป หรือที่ไฟล์ android/app/build.gradle เพิ่ม plugin และ dependencies เกี่ยวกับ kotlin

ใน iOS เพิ่ม permission ใน Info.plist

การใช้งาน

ประกาศตัวแปร String สำหรับผลลัพธ์ของ barcode

method สำหรับการสแกน แค่เรียก Barocde.scan() มันก็จะเปิดหน้ากล้องสำหรับให้สแกนเลย

มาลองเพิ่ม UI กัน ผมเพิ่มไอคอนกล้องสำหรับเปิดหน้าจอสแกนไว้มุมขวา แล้วเอาผลลัพธ์มาแสดงที่ text

ลองรัน ที่ AppBar มีไอคอนกล้อง

จากนั้นกดแล้วจะเปิดหน้าจอกล้องขึ้นมา มีการถาม permission ซึ่งอันนี้ library จัดการให้แล้ว ไม่ต้องเขียนเช็คเอง

ลองสแกน Barcode

สแกน QR code ก็ได้

ตัวอย่างโค้ดบน Github
https://github.com/benznest/flutter_scan_barcode

Cr.
https://pub.dartlang.org/packages/barcode_scan