In the last piece in this series on developing with Flutter, we looked at how we can implement face detection using ML Kit, which belongs to the Firebase family.
In this 8th installment of the series, we’ll keep working with ML Kit, this time focusing on scanning barcodes from an image.
Application and Use Cases
Using barcode scanning in Firebase’s ML Kit enables you to read barcodes in an image without providing additional data. This happens on-device and as such doesn’t require an internet connection.
There are any number of applications that require the encoding and decoding of information via common formats such as QR codes. See all supported formats here. The algorithm is capable of giving you the contents of the code, as well as the format of the encoding.
Add Firebase to Flutter
Just like in the previous piece, the first step involves adding Firebase to your Flutter project. This is done by creating a Firebase project and registering your app. Follow the comprehensive guide below to set that up:
Install Required Packages
Now that your app’s communication with Firebase is set up, you have to install two packages. The first is image_picker and the second is firebase_ml_vision. We’ll use the image_picker to pick the images from the phone’s gallery or to take a new picture.
firebase_ml_vision will provide the barcode scanning functionality.
Select an Image
At this point, we can now select the image we’d like to use to scan the barcode. We start by declaring a couple of variables:
- pickedImage will hold the image selected from the gallery or camera, of type File
- text that will contain the contents of the barcode
- imageLoaded will signal whether or not the image has been loaded
Create a FirebaseVisionImage
In this step, we create a FirebaseVisionImage object from the selected image:
Create an Instance of a Detector
The next step is to create an instance of the detector that we’d like to use. Here, we’re using the BarcodeDetector:
Process the Image
We’re now ready to process the image using the detector:
Extract the Content
Obtaining information from the barcode is quite straightforward. To get the string representation of the contents of the barcode, you just call rawValue off the barcode.
To obtain the encoding type simply call the valueType on the barcode. Once you’re done, run barcodeDetector.close() in order to release the resources:
In this article, we covered the major building blocks for this application. The entire source code application can be viewed at the link below:
You can clearly see how fast and easy it is to incorporate machine learning in your mobile apps using Firebase’s ML Kit. Before you can launch this application into production, ensure that you check with Firebase’s checklist to make sure you have the right configurations.
Using the repo below, you can try out different detectors.