Lleva tus apps al siguiente nivel almacenando y compartiendo datos con códigos QR personalizados

may. 15, 2024

Anteriormente, hemos visto cómo funcionan los códigos QR y cómo se pueden utilizar para almacenar en ellos una información determinada para ser leída con un dispositivo externo. Su potencial es amplio ya que ofrecen una interfaz entre el mundo físico y el digital. En este artículo crearemos una pequeña aplicación que nos permitirá crear y leer códigos QR personalizados, con información que introduciremos a través de la propia interfaz mediante un formulario.

Vamos a utilizar, como es habitual, el framework de desarrollo multiplataforma Flutter para nuestra aplicación, podríamos utilizar cualquier otro lenguaje y/ó herramienta pero al estar enfocado en el desarrollo móvil y necesitar una cámara, nos facilitará toda la parte de lectura del código aprovechando la de un dispositivo o del propio emulador. De primeras el único emulador que permite simular lectura de código QR es el de Android, para probar la parte de iOS necesitaremos un dispositivo físico.

Como ya, en nuestro anterior artículo, conocimos todo lo más importante sobre los QR, vamos a proceder directamente con la creación de la aplicación. En ella almacenaremos datos personales en un código QR que luego leeremos para mostrar la información obtenida en pantalla.

Aplicación de ejemplo para crear y leer códigos QR personalizados

Nos permitirá introducir datos de un empleado ficticio como su nombre, apellidos, puesto y lugar de trabajo. Datos que luego serán utilizados para almacenar en el código QR en formato JSON. Código QR que podremos compartir utilizando el botón correspondiente. Algo sencillo pero útil para entender el potencial de los códigos QR y cómo integrarlos en una aplicación en un caso “real”.

La aplicación hace uso de algunas librerías tanto para la generación de códigos QR como para la lectura de los mismos y otras para el acceso a ficheros y compartición del QR creado; son las siguientes:

• qr_flutter: ^4.1.0 - Utilizada para generar códigos QR en Flutter. Proporciona widgets fáciles de usar para mostrar códigos QR en la pantalla de la aplicación. Con esta librería, podemos convertir cualquier cadena de datos en un código QR que se puede mostrar en la interfaz de usuario.
• qr_code_scanner: ^1.0.1 - Permite integrar un escáner de códigos QR en la aplicación. Utiliza la cámara del dispositivo para escanear códigos QR y decodificar la información almacenada en ellos. Es fundamental para la funcionalidad de lectura de QR en nuestra aplicación.
• share_plus: ^9.0.0 - Proporciona una forma sencilla de compartir contenido desde la aplicación a través de las opciones nativas de compartición del sistema operativo, como correo electrónico, mensajería, redes sociales, etc. En nuestra aplicación, se utiliza para compartir la imagen del código QR generado.
• path_provider: ^2.1.3 - Obtener rutas del sistema de archivos específicas de la plataforma, como el directorio de documentos o el directorio de almacenamiento temporal. La utilizamos para guardar temporalmente la imagen del código QR antes de compartirla.

El código fuente lo tienes disponible en nuestro repositorio de GitHub, donde podrás ver cómo se ha implementado toda la lógica. La parte más importante es la de creación y lectura del código QR. Para la creación de un código QR personalizado, primero necesitamos definir la estructura de los datos que queremos almacenar en él. En nuestro caso, al tratarse de un ejemplo básico introduciremos los datos directamente en el mismo JSON pero para una aplicación más grande estaría bien organizar los elementos y subelementos de una forma más óptima. Estos campos se serializan y se convierten en una cadena de texto que se almacena en el código QR y le da forma.

  
  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",
      ),
    ),
  ),
  

En el código anterior, creamos un mapa con los datos del empleado y lo serializamos a formato JSON utilizando la librería convert de Dart que nos permite tratar cadenas JSON. La cadena resultante se almacena en la variable qrData, que se utiliza para generar el código QR, el Widget QRImageView se encarga de mostrarlo en la parte superior de la pantalla.

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

Esto hace uso de la librería qr_flutter para generar el código QR a partir de la cadena de datos y mostrarlo en la interfaz, para ver cómo se convierte en imagen para compartir puedes consultar el método _captureAndSharePng() en el archivo main.dart.

Para la lectura de códigos QR, utilizamos la librería qr_code_scanner, que nos permite integrar un escáner en nuestra aplicación utilizando la cámara del dispositivo. Cuando el usuario escanea el código, la cámara se pausa para evitar lecturas repetidas mientras intentamos decodificar el contenido de la información, que luego convertiremos de JSON (el mismo formato utilizado al almacenar la información) a un mapa de Dart. Tras obtener la información, mostramos los datos en un AlertDialog permitiendo al usuario ver claramente los datos.

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

Aquí simplemente creamos un widget QRView que se encarga de mostrar la vista de la cámara y detectar los códigos QR, proporcionando la información una vez leída, información que recibiremos en el método _onQRViewCreated encargado de mostrarla en pantalla escuchando el evento proporcionado por el QRView.

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

Puedes consultar el código completo en el repositorio de GitHub para ver cómo se ha implementado la lógica completa, también puedes adaptarlo a tus necesidades libremente ya que el código es público. Hay más funcionalidades interesantes cómo la de compartir el código QR generado o la de guardar la imagen en el dispositivo, que puedes consultar en el repositorio.

De esta manera vemos la capacidad de los códigos QR para almacenar información personalizada y cómo utilizarla en nuestras aplicaciones, dotándolas así de una interfaz entre el mundo físico y el digital. Espero que este artículo te haya resultado interesante y que te animes a probar o mejorar esta app para creación de códigos QR personalizados. Si tienes alguna duda, sugerencia o comentario déjanoslo abajo. ¡Happy Coding!