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

| Developers

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 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.

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.

Get your Flutter barcode scanner SDK

Fast, accurate and easy to integrate scanning performance.

Try for Free

Performance and other development considerations for your Flutter barcode scanner SDK

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. 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 Barcode Scanner 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 (iOS, Android, and Forms), .NET (iOS and Android), React Native, Cordova, Capacitor, and Titanium.

Flutter Barcode scanner SDK

Try the Scandit Barcode Scanner SDK for fast, user-focused scanning

The Scandit Barcode Scanner SDK, part of the Scandit Smart Data Capture Platform, makes it easy for you to integrate a single, high-performance Flutter plugin that supports a range of barcodes and QR codes. This SDK supports advanced scanning capabilities using a device’s live, real-time camera and is built on an extensible foundation allowing you to add helpful UX features and capabilities.

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

Testing the Scandit Barcode Scanner SDK is Easy

Integrate scanning quickly or use our samples.

Try for Free

Get started with the Scandit Flutter Barcode Scanner SDK

Follow these steps to add single barcode and QR code scanning to your Flutter app. You can also browse our Scandit Barcode Scanner SDK Flutter 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 Barcode Scanner 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.

1. Add the SDK to your project

We support adding the Scandit Barcode Scanner SDK’s Flutter plugins 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

To add barcode capture capabilities to your Flutter app, you must first initialize the barcode plugin.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await ScanditFlutterDataCaptureBarcode.initialize();
  runApp(MyApp());
}

Next, create a new data capture context. The context expects a valid Scandit Barcode Scanner SDK license key during construction.

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

3. Configure the barcode scanning behavior

Barcode and QR code scanning are orchestrated by the BarcodeCapture data capture mode. This class is the main entry point for scanning barcodes. It is configured through BarcodeCaptureSettings and registers one or more listeners that are informed whenever new codes are recognized.

We set up scanning for a small list of barcode and QR code symbologies for this blog. Change this to the correct symbologies for your use case.

var settings = BarcodeCaptureSettings()
  ..enableSymbologies({
    Symbology.code128,
    Symbology.code39,
    Symbology.qr,
    Symbology.ean8,
    Symbology.upce,
    Symbology.ean13Upca
  });

If you are not disabling capture immediately after scanning the first code and do not want the same code to be scanned more than once, consider setting the BarcodeCaptureSettings.codeDuplicateFilter to around 500 or even -1.

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

var barcodeCapture = BarcodeCapture.forContext(context, settings);

4. Register the barcode capture listener

To get informed whenever a new code has been recognized, add a BarcodeCaptureListener through BarcodeCapture.addListener() and implement the listener methods to suit your application’s needs.

Implement the BarcodeCaptureListener interface:

@override
void didScan(BarcodeCapture barcodeCapture, BarcodeCaptureSession session) {
  var recognizedBarcodes = session.newlyRecognizedBarcodes;
  // Do something with the barcodes.
}

Add the listener:

barcodeCapture.addListener(this);

5. Use the built-in camera

The data capture context supports different frame sources to perform recognition. Most applications use the device’s built-in camera, such as a smartphone’s world-facing camera. This blog assumes you are using the built-in camera.

On iOS, the user must explicitly grant permission for each app to access cameras. Your app must display static messages to the user when the system asks for camera permission. To do this, include the NSCameraUsageDescription key in your app’s Info.plist file.

On Android, the user must explicitly grant permission for each app to access cameras. Your app must declare the use of the Camera permission in the AndroidManifest.xml file and request it at runtime so the user can grant or deny the permission. To do that follow the Android guidelines to request the android.permission.CAMERA permission.

The built-in camera has recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following code shows how to get the recommended settings and create the camera from it:

var cameraSettings = BarcodeCapture.recommendedCameraSettings;

// Depending on the use case further camera settings adjustments can be made here.

  var camera = Camera.defaultCamera..applySettings(cameraSettings);

As the frame source is configurable, the data capture context must be told which frame source to use via a call to DataCaptureContext.setFrameSource():

context.setFrameSource(camera);

The camera is off by default and must be turned on by calling FrameSource.switchToDesiredState() with a value of FrameSourceState.On:

camera.switchToDesiredState(FrameSourceState.on);

6. Use a Capture View to visualize the scan process

When using the built-in camera as the frame source, it helps to provide the user with a camera preview on the screen and UI elements that guide the barcode capture process.

To do this, add a DataCaptureView to your view hierarchy:

var dataCaptureView = DataCaptureView.forContext(dataCaptureContext);
// Add the dataCaptureView to your widget tree

To visualize the results of barcode scanning, add the following overlay:

var overlay = BarcodeCaptureOverlay.withBarcodeCaptureForView(barcodeCapture, dataCaptureView);

7. Disable barcode capture

To disable barcode capture, such as when a barcode is recognized, set BarcodeCapture.isEnabled to false.

Disabling barcode capture stops the SDK from processing frames. However, the camera continues to stream frames until the user turns it off. If a frame is in the middle of processing, it is completely processed and delivers any results/callbacks to the registered listeners.

Testing 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 Scandit Barcode Scanner SDK 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.

Get your Flutter barcode scanner SDK now

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.

Interested in how the Scandit Barcode Scanner SDK can be used to add intuitive, high-performance scanning to enterprise apps with minimal set-up time? Sign up for our free 30-day test SDK now.