Scan and Generate QR Code In Flutter

Do you have got any requirement to implement barcode read or barcode generate flow to your application? Then this article is for you. I will cover how to add QR generate and scan feature to your application with two nice plugins. Before further delay let’s first talk about QR generate part

QR Generate

Even though multiple plugins available for the QR reader, this plugin contains a detail explanation with an example. So it will be easy for you to implement it.

First, create a new flutter project and add this plugin to your pubspec.yaml under the dependencies

qr_flutter: ^3.0.1

Then open the terminal and type flutter pub get and it will download the necessary plugin component to your project.

flutter pub get

Next open the main.dart file or the file which you are going to use QR widget and import the plugin like this

import 'package:qr_flutter/qr_flutter.dart';

Now the setup part is done and dusted.

Finally, you should add the widget where the QR code is going to display. When adding QR widget the only required property is data. In there you must past the data which need to represent as a QR. In here I use some simple text. You can use whatever text you want.

QrImage( data: "this is qr", )

Other than that property there are very useful optional properties also available and These are some of them.

version — Version of the QR. Check this to learn about this

• size — Set the size of the QR widget
• backgroundColor — Set background colour of the QR
• embeddedImage — Add image center of the QR. Like your logo or something.

So that all about QR generate in Flutter and next move to the QR Scan part.

Scan QR

Scanning the QR in flutter will require a little bit of code than generate. But don’t panic it just a little bit, not much.

First of all, you need to add Flutter barcode scanner plugin to your project. Wait what? barcode scanner? Yes actually. This will allow you to scan the barcode as well as QR.

flutter_barcode_scanner: ^0.1.7

Next import the plugin to your main.dart or whatever file which you are going to use this library.

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

After that, you need to call scanBarcode static method inside FlutterBarcodeScanner class and It will return the scanned result. This call must happen inside the async method and you can implement it like this in below.

Future scanBarcodeNormal() async {
    String barcodeScanRes;

      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          "#ff6666", "Cancel", true, ScanMode.QR);
      print(barcodeScanRes);

    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }

In here we can customize a few things.

The first property is line colours which are moving up and down until the scan completes. Second property is the text of the cancel button and the third is indicate whether we need to show Flash icon or not. The last one defines the type whether it’s a QR or a barcode.

In here I set the barcodeScanRes to the _scanBarcode variable and you can show that value in the UI.

Now you can try this in a real device and you can see the QR result will assign to the _scanBarcode variable and If you have set that to show it somewhere it will appear.

Hope you get an idea about how to implement QR Scan and Generate in Flutter application and If you have further question please let me know in the comment.

You can check all the samples inside this repo

Happy coding 😀

Originally published at https://mightytechno.com on October 1, 2019.