Logo

K-Learn

Learn Flutter Step by Step

Posted on

< Previous

Flutter's qr_code_scanner package is a library that provides an easy-to-use and customizable QR code scanner widget for your Flutter applications. It allows you to scan QR codes with your device's camera and obtain the information encoded in the QR code.

To use the qr_code_scanner package, add the following line to your pubspec.yaml file:

dependencies:
  qr_code_scanner: ^0.4.0

Next you can start using it by importing it in your code:

import 'package:qr_code_scanner/qr_code_scanner.dart';

Basic Usage

To use the qr_code_scanner package, you need to create a QRViewController widget, which is responsible for controlling the camera and handling the QR code scanning.

Here's an example of how to use the QRViewWidget :

class QRViewExample extends StatefulWidget {
  @override
  _QRViewExampleState createState() => _QRViewExampleState();
}

class _QRViewExampleState extends State {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: QRView(
        key: qrKey,
        onQRViewCreated: _onQRViewCreated,
      ),
    );
  }

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

In the example above,

we create a QRViewExample widget that contains a QRView widget. We use a GlobalKey to identify the widget for debugging purposes. We then create a QRViewController object to control the camera and handle the QR code scanning. We also define a method called _onQRViewCreated, which is called when the QRView widget is created. Inside this method, we set the controller variable to the QRViewController object and listen for scanned data by calling the scannedDataStream method on the QRViewController object.

When the user scans a QR code with the camera, the QRViewController object will emit the scanned data as a Barcode object through the scannedDataStream. In the example above, we simply print the scanned QR code data to the console.

Customizing the Scanner

The qr_code_scanner package also allows you to customize the appearance and behavior of the QR code scanner. You can customize the scanner by passing various parameters to the QRView widget.

Here's an example of how to customize the QR code

QRView(
  key: qrKey,
  onQRViewCreated: _onQRViewCreated,
  overlay: QrScannerOverlayShape(
    borderColor: Colors.red,
    borderRadius: 10,
    borderLength: 30,
    borderWidth: 10,
    cutOutSize: 300,
  ),
  cameraFacing: CameraFacing.back,
  formatsAllowed: [BarcodeFormat.qr],
  autoFocus: true,
  beepDuration: Duration(milliseconds: 300),
  qrCodeCallback: (code) {
    print(code);
  },
),

In the example above,

we customize the QR code scanner by passing various parameters to the QRView widget.

Here are some of the parameters we are using:

overlay:The shape of the scanner we use the QrScannerOverlayShape class to define the appearance of the scanner overlay. In this example, we set the border color to red, the border radius to 10, the border length to 30, the border width to 10, and the cut-out size to 300. This will create a red border with rounded corners, and a cut-out area in the middle of the scanner.

cameraFacing: The facing direction of the camera.We set the cameraFacing parameter to CameraFacing.back to use the rear-facing camera. You can also set it to CameraFacing.front to use the front-facing camera.

formatsAllowed:The allowed barcode formats.We set the formatsAllowed parameter to [BarcodeFormat.qr] to only allow scanning of QR codes. You can also include other barcode formats if you want to scan other types of barcodes.

autoFocus:Whether to enable autofocus.We set the autoFocus parameter to true to enable autofocus. This will help the scanner focus on the QR code more accurately.

beepDuration:The duration of the beep sound when scanning a code.We set the beepDuration parameter to Duration(milliseconds: 300) to set the duration of the beep sound when a QR code is scanned.

qrCodeCallback:A callback function to handle the scanned QR code data.We define a qrCodeCallback function to handle the scanned QR code data. In this example, we simply print the scanned QR code data to the console.

Conclusion

The qr_code_scanner package is a powerful tool for adding QR code scanning capabilities to your Flutter applications. With its easy-to-use API and customizable parameters, you can easily create a custom QR code scanner that meets your needs.

< Previous