Scan Barcodes in Flutter Using Firebase’s ML Kit

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:

Final Thoughts

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.

Should you choose to use the cloud-based API, ensure that you have the right API access rights. This will ensure that your application doesn’t fail in production.

Using the repo below, you can try out different detectors.