A Flutter Developer’s Guide to Barcode & QR Code Scanning

When integrating barcode scanning into your Flutter app, you must consider user experience (UX) elements and performance tuning for real-world use. Going beyond basic camera features and image processing helps users do their jobs, increases adoption rates, and ensures customer and business goals are met.

This blog explains the key UX and performance principles for successfully adding a Flutter barcode scanner, including QR codes, to iOS and Android applications. It also includes a step by-step tutorial for implementing these principles using the SparkScan pre-built UI component of the Scandit Flutter Barcode Scanner SDK, which handles a range of barcodes and QR codes in one package.

Why UX matters for Flutter barcode scanning

A recent Scandit study revealed that over 66% of store associates rate their devices as important or very important for their jobs. Over 50% stated that device intuitiveness is crucial for smartphones and scanning devices.

This means getting navigation, interaction, and feedback right in your Flutter barcode scanner only helps users. Conversely, failing to do so may lead to frustration, failure, and complaints.

UX workflows to consider for your Flutter barcode scanner

Understanding the following UX workflows helps you integrate a barcode scanner that works for your users rather than holds them back. They’re also important to consider when selecting your Flutter barcode scanner SDK and/or Flutter QR code SDK.

• Good UX requires a fast and seamless transition into scanning mode. The last thing users want to worry about is navigating complex menus or waiting for your Flutter barcode scanner plugin to start.
• To improve ergonomics, give users the ability to tap anywhere on the live camera interface to start and resume scanning. If a button is preferred, ensure the touch area is large enough for comfortable repeated use.
• Implement an appropriately sized viewfinder to help users aim the scanner, show that scanning is live and indicate how far to hold the camera.
• Restrict the scan area or use an aimer viewfinder to help users select the right barcode or QR code when multiple labels are crowded together.

The following video demonstrates how Scandit SparkScan enables users to swipe or tap a collapsed floating button to activate the scanner. It then provides a large, semi-transparent button to capture barcodes.

Supporting different scan modes

Providing options to switch between scanning single and multiple barcodes helps users work more efficiently when the number or configuration of barcodes varies (such as in a shipping warehouse or retail store):

• Single scan: Allows users to trigger scanning for every barcode, providing greater control over their scanning experience.
• Continuous scan: Allows users to trigger the scanner once and your app scans multiple barcodes without further interaction. This accelerates workflows in situations where there’s little risk of unwanted or unintentional scans.

Strong and clear feedback

Your app should provide clear and immediate feedback on a barcode scan’s success or failure. Delayed responses lead to user confusion, and unclear results may lead to missing or incomplete data on the back-end.

A combination of feedback techniques can be used to help the user, such as:

• Drawing a brush overlay at the coordinates of the barcode on the live camera view, confirming that the intended item was scanned.
• Playing sound, vibrating and haptic feedback on a successful capture.

Start barcode scanning with Flutter

Add enterprise-class barcode scanning in minutes with SparkScan

Try for free

Which barcode scanner is best for Flutter?

There are many open-source Flutter barcode scanner and QR code scanner plugins, but they may not be the best choice for business-critical environments. Warehouses, retail stockrooms, and last-mile delivery have high employee performance goals. Low light, awkward scan angles, torn barcodes and poor internet connectivity can impede scanning success.

You also want one plugin that scans a broad range of barcode and QR code types, to reduce complexity and avoid having to upgrade later on. Given the proliferation of options, always check that your chosen plugin comes with developer documentation and has a track record of regular feature updates and bug fixes.

Here are some considerations for choosing your Flutter barcode scanner SDK and Flutter QR code SDK for effective real-world operation.

1. Scan performance

Different device models and OS versions have different impacts on barcode scanning performance. Consider the following requirements to ensure scanning works effectively on your devices:

• Accuracy: Barcode scanning for inventory management, asset tracking, and similar operations requires a Flutter plugin that offers extremely high accuracy levels. A 95% success rate may not be enough for enterprise environments — you should aim for greater than 99% success.
• Speed: A Flutter barcode scanner that helps users capture and process barcodes fast means less time wasted and faster business operations.
• Start-up time: To avoid frustrated users and slower workflows, your barcode scanner should support a “standby mode” that minimizes camera start-up delays between scans.
• Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes, and distances from the camera.
• Scanning barcodes in degraded conditions: A barcode may be torn, obscured, wrapped in plastic, or moving — your Flutter plugin should work under all these scenarios.

2. Low-light environments

Lighting conditions in the real world vary widely from brightly lit to dark. Consider your stockrooms, back-of-store areas, or nighttime deliveries. Your chosen Flutter plugin should maintain speed and accuracy under these conditions.

3. Large device fleets with diverse models

Enterprises often have a diverse fleet of employee devices — especially in Bring-Your-Own-Device (BYOD) situations. Your barcode scanner plugin should support efficient operations on different platforms. They could range from the latest multi-core smartphone to a legacy, resource-constrained device.

We list key performance tests below to gauge how well your plugin performs.

The Scandit Data Capture SDK is built on a C/C++ foundation, ensuring that core barcode and QR code scanning features are loaded efficiently in the background and consume minimal system resources.

4. Support for different development frameworks

For developers working across platforms, check that your barcode scanner component supports it.

Scandit’s barcode scanning products are also available for Native iOS, Native Android, JavaScript, Xamarin and Xamarin.Forms, .NET (iOS and Android), React Native, Cordova, Capacitor, and Titanium.

How do I create a barcode scanner for Flutter apps?

SparkScan, part of the Scandit Data Capture SDK, makes it easy for you to integrate Flutter plugins with pre-built barcode and QR code scanning features. It supports advanced scanning capabilities using a device’s live, real-time camera and is built upon well-researched UX principles and optimized through feedback from thousands of customers across various environments.

SparkScan’s key feature is a pre-built scanning interface that floats on top of any application, reducing your development time and solving many common scanning pitfalls. This interface is customizable for different needs — for example, options to provide audio or haptic feedback, the choice of triggering scans using a phone’s physical button, and scanning in left-handed mode.

The next sections explain how to implement a customizable Flutter barcode scanning interface in just a few steps.

Get started with SparkScan for Flutter

Follow these steps to add single barcode and QR code scanning to your Flutter app. You can also run one of our SparkScan samples on GitHub.

If you get stuck, visit our Flutter documentation for detailed help, our API reference, and instructions on using advanced features like adjusting scan areas and augmented reality (AR).

The prerequisites for these steps are:

• The latest stable version of the Flutter SDK.
• A project with a minimum iOS deployment target of 13.0 or higher, or an Android project with target SDK version 23 (Android 6, Marshmallow) or higher.
• Kotlin 1.7.21 or higher.
• A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

Although not covered here, the Scandit Data Capture SDK also supports scanning multiple barcodes at once (batch scanning). The instructions for setting up and using this capability are located in our batch scanning documentation.

Testing the Scandit Flutter SDK is easy

Integrate with just a few lines of code or use our samples

Try for free

1. Add the SDK to your project

We support adding the Scandit Data Capture SDK’s Flutter plugins, including SparkScan, to your project in two ways. The simplest way is to use the pub.dev registry. Alternatively, you can manually download the plugins and add them to your Flutter project.

You should always add the scandit_flutter_datacapture_core plugin first, as all other plugins depend on it.

1. If you don’t have an existing Flutter project, create a new one using your desired IDE.

2. To add the Scandit Barcode Scanner SDK from the pub.dev registry

Open the pubspec.yaml file located inside the app folder, and add the scandit-flutter-datacapture-barcode plugin under dependencies.

dependencies:
  flutter:
    sdk: flutter
  scandit_flutter_datacapture_barcode: <version>

3. To add the Scandit Barcode Scanner SDK manually

After you download the archive containing all the plugins here, unzip the archive. It includes the available Flutter plugins, including the scandit-flutter-datacapture-core plugin.

Move the required Scandit Data Capture SDK Flutter plugins to some subdirectory within your app folder, e.g. to libs/. Open the pubspec.yaml file located inside the app folder, and add the scandit-flutter-datacapture-barcode plugin under dependencies.

dependencies:
  flutter:
    sdk: flutter
  scandit_flutter_datacapture_barcode:
    path: libs/scandit-flutter-datacapture-barcode

You don’t need to add the dependency to the scandit-flutter-datacapture-core plugin in the pubspec.yaml file. However, all the other Scandit Flutter plugins depend on it internally, so you must copy it to the same location as the other plugins.

4. Install the Scandit Data Capture SDK Flutter plugin(s)

From the terminal, run:

flutter pub get

If you’re using an IDE, click “Get Packages” in the action ribbon at the top of pubspec.yaml.

5. Additional steps

When using the Scandit Barcode Scanner SDK, you must set the camera as the frame source for various capture modes. On Android, you have to request camera permissions in your own application before starting scanning. To see how you can achieve this, take a look at our samples.

On Android, the Scandit Barcode Scanner SDK uses content providers to initialize the scanning capabilities properly. If your content providers depend on the Scandit Barcode Scanner SDK, choose an initOrder lower than 10 to ensure the SDK is ready first. If not specified, initOrder is zero by default and you have nothing to worry about. For more details, check the official Android <provider> documentation.

On iOS, if you want to use the camera as the frame source for barcode capture, you must set the “Privacy – Camera Usage Description” field in the Info.plist file.

2. Create a new data capture context instance

The next step to add capture capabilities to your application is to create a new Data Capture Context. The context expects a valid Scandit Data Capture SDK license key during construction.

var dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

3. Configure the SparkScan mode

The SparkScan Mode is configured through SparkScanSettings, allowing you to register one or more listeners that are informed whenever a new barcode is scanned.

For this blog, we set up SparkScan for scanning EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39).

var settings = SparkScanSettings();
settings.enableSymbologies({ Symbology.ean13Upca });

Next, create a SparkScan instance with the settings initialized in the previous step:

var sparkScan = SparkScan.withSettings(settings);

4. Setup the SparkScan View

The SparkScan built-in user interface includes the camera preview and scanning UI elements. These guide the user through the scanning process.

The SparkScanView appearance can be customized through SparkScanViewSettings.

var viewSettings = SparkScanViewSettings();
// setup the desired appearance settings by updating the fields in the object above

Adding a SparkScanView automatically adds the scanning interface (camera preview and scanning UI elements) to your Flutter app.

Next, add a SparkScan View to your view hierarchy:

var sparkScanView = SparkScanView.forContext(YOUR_WIDGET_TREE_BODY, widget.dataCaptureContext, sparkScan, null);

Additionally, make sure to call SparkScanView.onPause() in your app state handling logic. You have to call this for the correct functioning of the SparkScanView.

void didChangeAppLifecycleState(AppLifecycleState state) {
  if (state != AppLifecycleState.resumed) {
    sparkScanView.onPause()
  }
}

5. Register the listener to be informed when a new barcode is scanned

To keep track of the scanned barcodes, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register self as a listener to monitor the spark scan session.
sparkScan.addListener(this);

SparkScanListener.didScan() is called when a new barcode has been scanned. The result is retrieved from the first object in the provided barcodes list: SparkScanSession.newlyRecognizedBarcodes. Note that this list only contains one barcode entry.

Now your Android app is ready to scan!

How to test Flutter barcode scanning performance

The best way to test a potential Flutter barcode scanner SDK is to run it using real-world scenarios. Whether you’re using the SparkScan or another barcode scanning plugin, here are several performance-testing questions to ask:

• Is there clear guidance to foster a smooth workflow and instant feedback to avoid user confusion?
• Can you scan barcodes in different orientations, such as upside down and sideways? If you flip the device upside down, can you still scan easily and successfully?
• Can you scan barcodes with reflections and glare?
• Can you scan barcodes at a distance? Are you able to zoom in and capture barcodes if needed?
• Do you receive scanning feedback in loud environments and while wearing headphones?

You can also use our sample sheet of barcodes to evaluate your app’s performance quickly.

Your Flutter barcode scanner SDK is more than just a technical choice

Helpful UX and high performance are critical goals when selecting and implementing a Flutter barcode and QR code scanner. Fewer user frustrations and adaptability to growing business demands are far preferable to low adoption rates, bug reports, and unhappy business leaders.

Next: Dive deeper into how to make a barcode scanning app performant →