How to Make a QR Code Scanner in Flutter

Hello everyone, welcome back at porkaone. On this occasion we will learn how to build a QR code scanner or QR code reader in Flutter. Are you curious? Come on, follow the tutorial below.

On this occasion we will learn how to make a QR code scanner on Android or Flutter. We can create a QR code scanner easily by using the qr_code_scanner package. It's simple, there will be a camera that can scan QR codes. Then the results will be displayed at the bottom of the camera. The camera will actively read every QR code that is successfully scanned and display the results again. Scroll to the bottom of this article to see the final results.

Read Another Article ✨

📰 1. How to Display a Website in Flutter with Webview  read more

📰 2. How to Make a Bubble Bottom Bar in Flutter read more

📰 3. How to Install Java Development Kit and Add Variable Path to ENV read more

📰 4. How to Make Copy Feature in Flutter Apps read more

Quick and Easy Way to Make a QR Code Scanner in Flutter

1. Create a new flutter project with the name you want. And use the latest version of flutter or flutter that supports null safety.

2. Open pubspec.yaml then add the qr_code_scanner: as shown below.

3. Create a new file with the name qr_code_scanner_widget.dart in the lib folder. Follow the script as below.

  import 'package:flutter/material.dart';
  import 'package:qr_code_scanner/qr_code_scanner.dart';
  
  class QRCodeScannerWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => _QRCodeScannerWidgetState();
  }
  
  class _QRCodeScannerWidgetState extends State<QRCodeScannerWidget> {
    final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
    QRViewController? controller;
    String qrText = "";
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(
            'QR Code Exercise',
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10),
              child: Text(
                'point the camera at the qr code to start scanning',
                style: TextStyle(fontSize: 20),
                textAlign: TextAlign.center,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Align(
              alignment: Alignment.center,
              child: Container(
                padding: EdgeInsets.only(left: 10, right: 10),
                width: double.infinity,
                height: 300,
                child: QRView(
                  key: qrKey,
                  onQRViewCreated: _onQRViewCreated,
                  overlay: QrScannerOverlayShape(
                    borderColor: Colors.red,
                    borderRadius: 10,
                    borderLength: 20,
                    borderWidth: 5,
                    cutOutSize: MediaQuery.of(context).size.width * 0.6,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              'Hasil Scan: $qrText',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      );
    }
  
    void _onQRViewCreated(QRViewController controller) {
      this.controller = controller;
      controller.scannedDataStream.listen((scanData) {
        setState(() {
          qrText = scanData.code!;
        });
      });
    }
  
    @override
    void dispose() {
      controller?.dispose();
      super.dispose();
    }
  }

Explanation of the script above:

1. The import packages required are flutter/material.dart and qr_code_scanner/qr_code_scanner.dart.
2. Create a QRCodeScannerWidget class which is an instance of StatefulWidget.
3. In the _QRCodeScannerWidgetState class, declare a globalKey with the GlobalKey type used to access the QR code scanner object.
4. Declare a controller of type QRViewController? which is used to control the QR code scanner.
5. Declare qrText with type String which will store the results of scanning the QR code.
6. Override the build method which will build the widget display. In the build method, create a Scaffold as the main page framework.
7. Inside Scaffold, create an appBar containing the page title using the AppBar widget.
8. Inside the Scaffold, create a body that contains the main view using the Column widget.
9. In Column, set mainAxisAlignment to MainAxisAlignment.center so that the widgets in it are in the vertical center of the page.
10. In Column, add a Text widget containing the message "point the camera at the qr code to start scanning".
11. Inside the Column, add a SizedBox widget to provide distance between the widgets.
12. Inside a Column, use the Align widget with its alignment property set to Alignment.center to position the widget horizontally in the center.
13. In Align, create a Container to set the QR code scanner display to a certain size and padding.
14. Inside the Container, use the QRView widget to display the QR code scanner.
15. Inside the QRView, set the key to the previously declared qrKey.
16. In QRView, set onQRViewCreated to _onQRViewCreated which is the method for handling the QR code successfully scanned event.
17. In QRView, use an overlay of type QrScannerOverlayShape to set the appearance of the QR code scanner environment such as line color, size, and so on.
18. Inside the Column, add a SizedBox widget to provide distance between the widgets.
19. In Column, add a Text widget that will display the scanned QR code.
20. In the _onQRViewCreated method, save the scanned QR code into the qrText variable and update the view by calling setState.
21. Override the dispose method to perform cleanup when the widget is removed.
22. In the dispose method, call dispose on the controller to clean up the resources used by the QR code scanner.

4. Open main.dart in the lib folder. Then replace the script in it with the script below.

import 'package:flutter/material.dart';
  import 'qr_code_scanner_widget.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: QRCodeScannerWidget()
      );
    }
  }

5. We have done all the steps, it's time for us to test it. Run the emulator. If successful, the display will look like the image below.

Flutter QR Code Scanner

Now you can use the Android camera to read QR codes. Next, you can improvise by combining api data to check whether the QR code was found or not. And also improvise on other applications.

That's it for this tutorial on how to make a QR Code Scanner in Flutter. Hopefully this short article helps. If you have any questions, please ask directly in the comments column below. That's all and receive a salary.