En este pequeño tutorial vamos a hacer un lector de códigos QR con Flutter.
Para leer códigos QR necesitamos acceder a la cámara, eso es algo que hace el sistema operativo en el que queramos que se ejecute nuestra app, así que necesitaremos un plugin. Por suerte tenemos unos cuantos plugins que nos pueden ayudar y en este caso usaremos uno llamado barcode scan.
Lo primero que vemos en la página del plugin es que tenemos que configurar un par de cosas en nuestro proyecto para poder usarlo:
- En primer lugar tenemos que solicitar permisos de acceso a la cámara, tanto en Android como en iOS (o solamente en aquel sistema que queréis usar)
- En segundo lugar, la parte Android de pluggin está escrita en kotlin, así que tenemos que asegurarnos de que en los build.gradle de la parte android del proyecto tenemos configurado el soporte para este lenguaje.
Estos pasos son sencillos y están bien explicados en la página del plugin.
Por si acaso también os pasa, a mí al instalarlo y ejecutar el proyecto he obtenido un error porque decía que el plugin necesita una versión mínima del SDK de android de 18, y en mi proyecto la tenía de 16. Esto se puede cambiar abriendo el build.gradle que está dentro del módulo «app» y modificando el valor en el parámetro minSdkVersion:
2
3
4
5
applicationId "es.guillermogarcia.lector_qr"
minSdkVersion 18
...
}
Una vez configurado el proyecto, podemos añadir la dependencia al pubspec.yaml:
2
3
4
flutter:
sdk: flutter
barcode_scan: ^3.0.1
Y ahora ya sí, empieza la magia de Flutter. Vamos a hacer una app muy sencilla con un floatingActionButton que ejecute este lector de códigos.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import 'package:barcode_scan/barcode_scan.dart';
void main() => runApp(MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green
),
home: MyHomePage(),
));
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScanResult _scanResult;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Lector códigos QR'),
),
body: Center(
child:_scanResult==null?Text('Esperando datos de código'):Column(
children: [
Text('Contenido: ${_scanResult.rawContent}'),
Text('Formato: ${_scanResult.format.toString()}'),
],
)
),
floatingActionButton: FloatingActionButton(
onPressed: (){
_scanCode();
},
child: Icon(Icons.camera),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
Future<void> _scanCode() async {
var result = await BarcodeScanner.scan();
setState(() {
_scanResult = result;
});
}
}
¿Qué tenemos aquí? pues como decía, básicamente se trata de un botón que al pulsarlo ejecuta el lector. Esto lo que hará es que se abra la cámara y se muestre el típico cuadradito en pantalla para enfocar al código QR que queramos. Cuando se detecte un código, recibiremos su información y podemos hacer lo que queramos con ella. En este caso lo que hago es mostrar por pantalla un par de datos que devuelve el escaneo, el tipo de código y su valor.
¡Y ya está! ya tenemos una pequeña app para leer códigos QR con flutter. Ahora solo faltaría hacer algo útil con el valor que leemos 🙂
Si queréis ver el código fuente de este ejemplo lo tenéis en github.
Solamente añadir que este plugin también funciona para códigos de barras, así que si buscáis cómo crear un lector de códigos de barras con flutter, también os servirá.