Friday, December 1, 2023

QR Code Scanner for Flutter

QR Code Scanner for Flutter

A QR code scanner that works on both iOS and Android by natively embedding the platform view within Flutter. The integration with Flutter is seamless, much better than jumping into a native Activity or a ViewController to perform the scan.





Run this command:

With Flutter:

 $ flutter pub add qr_code_scanner

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart pub get):

  qr_code_scanner: ^0.5.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:qr_code_scanner/qr_code_scanner.dart';

Get Scanned QR Code

When a QR code is recognized, the text identified will be set in ‘result’ of type Barcode, which contains the output text as property ‘code’ of type String and scanned code type as property ‘format’ which is an enum BarcodeFormat, defined in the library.

class _QRViewExampleState extends State<QRViewExample> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  Barcode result;
  QRViewController controller;

  // In order to get hot reload to work we need to pause the camera if the platform
  // is android, or resume the camera if the platform is iOS.
  void reassemble() {
    if (Platform.isAndroid) {
    } else if (Platform.isIOS) {

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
            flex: 5,
            child: QRView(
              key: qrKey,
              onQRViewCreated: _onQRViewCreated,
            flex: 1,
            child: Center(
              child: (result != null)
                  ? Text(
                      'Barcode Type: ${describeEnum(result.format)}   Data: ${result.code}')
                  : Text('Scan a code'),

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

  void dispose() {

Android Integration

In order to use this plugin, please update the Gradle, Kotlin and Kotlin Gradle Plugin:

In android/build.gradle change ext.kotlin_version = '1.3.50' to ext.kotlin_version = '1.5.10'

In android/build.gradle change classpath '' to classpath ''

In android/gradle/wrapper/ change distributionUrl=https\:// to distributionUrl=https\://


If you are using Flutter Beta or Dev channel (1.25 or 1.26) you can get the following error:

java.lang.AbstractMethodError: abstract method "void io.flutter.plugin.platform.PlatformView.onFlutterViewAttached(android.view.View)"

This is a bug in Flutter which is being tracked here:

There is a workaround by adding android.enableDexingArtifactTransform=false to your file.

iOS Integration

In order to use this plugin, add the following to your Info.plist file:

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

Web Integration

Add this to web/index.html:

<script src=""></script>

Please note: on web, only QR codes are supported. Other barcodes and 2D codes cannot be scanned.

Web support is in very earlt stage. Features such as flash, pause or resume are not implemented. Moreover, the camera preview does not respect the surrounding constraints. This is not at last due to Flutter’s early state of platform views on web.

Flip Camera (Back/Front)

The default camera is the back camera.

await controller.flipCamera();

Flash (Off/On)

By default, flash is OFF.

await controller.toggleFlash();


Pause camera stream and scanner.

await controller.pauseCamera();

Resume camera stream and scanner.

await controller.resumeCamera();