Take your apps to the next level by storing and sharing data with customized QR codes

May 15, 2024

Serie: QR

Previously, we have seen how QR codes work and how they can be used to store specific information to be read by an external device. Their potential is vast as they offer an interface between the physical and digital worlds. In this article, we will create a small application that will allow us to create and read custom QR codes with information that we will input through the interface via a form.

We will use, as usual, the cross-platform development framework Flutter for our application. We could use any other language and/or tool, but since it is focused on mobile development and requires a camera, it will facilitate the code reading part by leveraging a device or the emulator itself. Initially, the only emulator that allows simulating QR code reading is Android; to test the iOS part, we will need a physical device.

Since in our previous article we learned all the important aspects about QR codes, we will proceed directly with the creation of the application. In it, we will store personal data in a QR code which we will then read to display the obtained information on the screen.

It will allow us to input data of a fictitious employee such as their first name, last name, position, and workplace. Data that will then be used to store in the QR code in JSON format. The QR code can be shared using the corresponding button. Something simple but useful to understand the potential of QR codes and how to integrate them into an application in a “real” case.

The application makes use of some libraries for both generating QR codes and reading them, as well as others for file access and sharing the created QR code; they are as follows:

• qr_flutter: ^4.1.0 - Used to generate QR codes in Flutter. Provides easy-to-use widgets to display QR codes on the application screen. With this library, we can convert any data string into a QR code that can be displayed in the user interface.
• qr_code_scanner: ^1.0.1 - Allows integrating a QR code scanner into the application. Uses the device’s camera to scan QR codes and decode the information stored in them. It is fundamental for the QR reading functionality in our application.
• share_plus: ^9.0.0 - Provides an easy way to share content from the application through the native sharing options of the operating system, such as email, messaging, social networks, etc. In our application, it is used to share the generated QR code image.
• path_provider: ^2.1.3 - Gets platform-specific file system paths, such as the documents directory or the temporary storage directory. We use it to temporarily save the QR code image before sharing it.

The source code is available in our GitHub repository, where you can see how all the logic has been implemented. The most important part is the creation and reading of the QR code. To create a custom QR code, we first need to define the structure of the data we want to store in it. In our case, since it is a basic example, we will input the data directly into the same JSON, but for a larger application, it would be good to organize the elements and sub-elements in a more optimal way. These fields are serialized and converted into a text string that is stored in the QR code and shapes it.

  
  Padding(
    padding: const EdgeInsets.all(10),
    child: ElevatedButton(
      onPressed: () async {
        var employeeData = {
          "id": idController.text,
          "name": nameController.text,
          "last_name": lastNameController.text,
          "position": positionController.text,
          "work_center": workCenterController.text
        };
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('QR code generated successfully!'),
          ),
        );
        setState(() {
          qrData = json.encode(employeeData);
        });
      },
      child: Text(
        "Generate QR",
      ),
    ),
  ),
  

In the above code, we create a map with the employee data and serialize it to JSON format using the convert library of Dart which allows us to handle JSON strings. The resulting string is stored in the qrData variable, which is used to generate the QR code. The QRImageView widget is responsible for displaying it at the top of the screen.

  
  QrImageView(
    data: qrData,
    size: 200,
    backgroundColor: Colors.white,
  ),
  

This uses the qr_flutter library to generate the QR code from the data string and display it in the interface. To see how it is converted into an image for sharing, you can check the _captureAndSharePng() method in the main.dart file.

To read QR codes, we use the qr_code_scanner library, which allows us to integrate a scanner into our application using the device’s camera. When the user scans the code, the camera is paused to prevent repeated readings while we try to decode the content of the information, which we then convert from JSON (the same format used to store the information) to a Dart map. After obtaining the information, we display the data in an AlertDialog allowing the user to see the data clearly.

      QRView(
        key: qrKey,
        onQRViewCreated: _onQRViewCreated,
      ),
      

Here we simply create a QRView widget that is responsible for displaying the camera view and detecting QR codes, providing the information once read, information that we will receive in the _onQRViewCreated method responsible for displaying it on the screen by listening to the event provided by the QRView.

  
  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.scannedDataStream.listen((scanData) {
      controller.pauseCamera();
      final employeeData = json.decode(scanData.code ?? "{}");
      // More code here...
      },
    );
  }
  

You can check the complete code in the GitHub repository to see how the entire logic has been implemented. You can also adapt it to your needs freely since the code is public. There are more interesting features like sharing the generated QR code or saving the image on the device, which you can check in the repository.

In this way, we see the ability of QR codes to store personalized information and how to use it in our applications, thus providing an interface between the physical and digital worlds. I hope this article has been interesting for you and that you are encouraged to try or improve this app for creating custom QR codes. If you have any questions, suggestions, or comments, leave them below. Happy Coding!