QR Code Scanner in Flutter

Getting to websites, pictures, and records using QR codes is broadly utilized these days. These QR Codes are used in various daily used apps like BHIM, PhonePe, Paytm, google pay and numerous more and it’s quite easy to build QR Code Scanner in Flutter. Most of the shops, restaurants and bars have started to replace paper menus with QR codes, and retailers now allow you to pay with a QR code rather than touching anything.

Read more about Flutter app development from mobikul

In today’s article, we are going to describe how to build QR code scanner in Flutter apps for android and iOS. There are many packages available but we are going to use qr_code_scanner plugin. Currently this plugin supports android, iOS and web. While I evaluated various barcode scanning apps that didn’t use Google Services (or the ML Kit Vision API), they had certain limitations, such as requiring your app to support Android 7 or newer. Other initiatives appeared to have been abandoned.

Follow the underneath steps to construct a straightforward QR scanner flutter application:

Implementation of QR Code Scanner in Flutter

Step 1. Initial setup

Import “qr_code_scanner: ^latest_version” package in your pubspec.yaml file under dependencies like

dependencies:

       qr_code_scanner: ^0.6.1" //

dependencies:

qr_code_scanner: ^0.6.1" //

The most recent version is 0.6.1. Before importing package version, please make sure that you have the most recent one in your pubspec.yaml file.

Step 2. Import Package

Import QR code scanner package path in the class file, where you need to use this package

<strong>import</strong> 'package:qr_code_scanner/qr_code_scanner.dart';

1	<strong>import</strong> 'package:qr_code_scanner/qr_code_scanner.dart';

Step 3. Integration

Android Integration

To use this dependency, please update the Gradle, Kotlin and Kotlin Gradle Plugin:

Go to project level gradle file and change ext.kotlin_version = '1.3.50' to ext.kotlin_version = '1.5.0'

In android/build.gradle change classpath 'com.android.tools.build:gradle:3.5.0' to classpath 'com.android.tools.build:gradle:4.2.0'

In app/build.gradle change minSdkVersion 16 to minSdkVersion 21

if you don’t upgrade the kotlin, gradle and min sdk verison you will get the error like

e: Incompatible classes were found in dependencies. Remove them from the classpath or use '-Xskip-metadata-version-check' to suppress errors
e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/185d46b6321985f52dcc07c04b9e0199/jetified-kotlin-stdlib-common-1.5.31.jar!/META-INF/kotlin-stdlib-common.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/3b4231ab8018cfab964f203a82e1a180/jetified-kotlin-stdlib-jdk7-1.5.31.jar!/META-INF/kotlin-stdlib-jdk7.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/META-INF/kotlin-stdlib.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/CustomFramingRectBarcodeView.kt: (38, 14): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class
e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/CustomFramingRectBarcodeView.kt: (39, 9): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class
e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/FlutterQrPlugin.kt: (14, 13): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.
The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class
e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.o

e: Incompatible classes were found in dependencies. Remove them from the classpath or use '-Xskip-metadata-version-check' to suppress errors

e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/185d46b6321985f52dcc07c04b9e0199/jetified-kotlin-stdlib-common-1.5.31.jar!/META-INF/kotlin-stdlib-common.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/3b4231ab8018cfab964f203a82e1a180/jetified-kotlin-stdlib-jdk7-1.5.31.jar!/META-INF/kotlin-stdlib-jdk7.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

e: /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/META-INF/kotlin-stdlib.kotlin_module: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/CustomFramingRectBarcodeView.kt: (38, 14): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class

e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/CustomFramingRectBarcodeView.kt: (39, 9): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class

e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/qr_code_scanner-0.6.1/android/src/main/kotlin/net/touchcapture/qr/flutterqr/FlutterQrPlugin.kt: (14, 13): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.

The class is loaded from /Users/kapil/.gradle/caches/transforms-2/files-2.1/7ed1fc227d449123990dfe95b91bbf13/jetified-kotlin-stdlib-1.5.31.jar!/kotlin/Unit.class

e: /Users/kapil/Documents/KapilWorkspace/Flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.o

iOS Integration

Add the following permissions into your info.plist file in iOS package of your project

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to scan QR codes</string>

<key>io.flutter.embedded_views_preview</key>

<true/>

<key>NSCameraUsageDescription</key>

<string>This app needs camera access to scan QR codes</string>

Web Integration

Add the following code into your Web/index.html file

<script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script>

1 2	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js"></script>

Step 4.

You can use following code to create QR code view in your app

  Widget _buildQrView(BuildContext context) {
    // For this example we check how width or tall the device is and change the scanArea and overlay accordingly.
    var scanArea = (MediaQuery.of(context).size.width < 400 ||
        MediaQuery.of(context).size.height < 400)
        ? 150.0
        : 300.0;
    // To ensure the Scanner view is properly sizes after rotation
    // we need to listen for Flutter SizeChanged notification and update controller
    return QRView(
      key: qrKey,
      onQRViewCreated: _onQRViewCreated,
      overlay: QrScannerOverlayShape(
          borderColor: Colors.red,
          borderRadius: 10,
          borderLength: 30,
          borderWidth: 10,
          cutOutSize: scanArea),
      onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),
    );
  }

Widget _buildQrView(BuildContext context) {

// For this example we check how width or tall the device is and change the scanArea and overlay accordingly.

var scanArea = (MediaQuery.of(context).size.width < 400 ||

MediaQuery.of(context).size.height < 400)

? 150.0

: 300.0;

// To ensure the Scanner view is properly sizes after rotation

// we need to listen for Flutter SizeChanged notification and update controller

return QRView(

key: qrKey,

onQRViewCreated: _onQRViewCreated,

overlay: QrScannerOverlayShape(

borderColor: Colors.red,

borderRadius: 10,

borderLength: 30,

borderWidth: 10,

cutOutSize: scanArea),

onPermissionSet: (ctrl, p) => _onPermissionSet(context, ctrl, p),

);

}

Step 5.

For getting result data from QR Code scanner, you can use the following code

  void _onQRViewCreated(QRViewController controller) {
    setState(() {
      this.controller = controller;
    });
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

void _onQRViewCreated(QRViewController controller) {

setState(() {

this.controller = controller;

});

controller.scannedDataStream.listen((scanData) {

setState(() {

result = scanData;

});

}

It’s done!

Please let us know if you have any questions or concerns in the comments area.

You can go through our latest blogs on – https://mobikul.com/blog/

Kapil Sharma 27 April 2023

. . .

QR Code Scanner in Flutter

Implementation of QR Code Scanner in Flutter

Android Integration

iOS Integration

Web Integration

Leave a comment

Message Sent!