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.
This component puts a minimalistic UI on top of any Flutter application and handles a range of barcodes and QR codes in one package.
Creating a Flutter barcode scanner requires these steps:
Add the SparkScan SDK for Flutter to your project.
Create a Data Capture Context instance.
Change supported symbologies for your use case.
Change the scanning mode.
Customize the user interface.
Register a listener for new barcode scans.
If you want a head start with barcode scanning, download and run one of our Flutter samples on your development device now.
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.
Our blog on how barcode scanners work explains these technical complexities – users need more than code that differentiates between white and black lines.
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 you to build rich UIs without worrying about capture logic, decoding, or user workflows. It puts a collapsed floating button on top of any Flutter app that users tap or swipe to activate a camera preview.
You can adjust the position of this preview anywhere on screen to avoid obscuring UI elements or place it directly behind the hardware camera for easier aiming.
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 and vibrating the device (haptic feedback) on a successful capture.
Aiming assist
The SparkScan SDK for Flutter includes context-based AI scanning that reduces unwanted scans by up to 100%. Known as Smart Scan Intention, this feature uses contextual data, such as device movement and barcode characteristics, to capture the correct barcode even with imprecise aiming.
This video illustrates the difference Smart Scan Intention makes when capturing data with multiple barcodes in view:
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. To ensure accuracy isn't an issue, consider advanced features such as context-based scanning that captures the right data on every scan and reduces unwanted scans.
Speed: A Flutter barcode scanner that helps users capture and process barcodes fast means less time wasted and faster business operations.
Field-of-view and distance: Scanners must handle barcodes on items of various sizes, shapes, and distances from the camera. An advanced SDK like Scandit can accurately capture tiny barcodes and electronic shelf labels (ESLs) without compromising speed or user experience.
Multi-modal data capture: Smart scanning libraries extract barcode and text data simultaneously, eliminating the need to scan and enter these elements separately. Scandit software gives you this capability through multi-modal data capture, accelerating data entry up to seven times faster.
Capturing multiple barcodes at once: Flutter plugins for scanning single barcodes struggle when trying to capture multiple labels in the camera’s field-of-view. For environments where barcode labels are clustered in close proximity, such as warehouses, retailers, and delivery vans, consider a library with true multiple barcode support. For example, Scandit MatrixScan identifies and tracks tens of codes simultaneously without getting confused by different label types, device movement, or duplicate barcodes.
Scanning barcodes in degraded conditions: A barcode may be torn, obscured, wrapped in plastic, under low light, or moving — your Flutter plugin should work under all these scenarios.
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.
You can see the system requirements for the SparkScan pre-built component here and test the code out now using our Flutter List Building sample.
3. Support for different development frameworks
For developers working across platforms, check that your barcode scanner component supports it.
A Flutter barcode scanner SDK that goes beyond the basics makes it easier to add functionality when you need it. Even if you don’t need advanced features right away, the capability to improve performance and scale as you grow saves effort and frustration in the long run.
Scandit’s Flutter barcode scanning library includes these capabilities:
Multiple barcode scanning with MatrixScan. This allows users to scan multiple barcodes at once and track them over time without re-scanning. This reduces scan times for high-volume barcode operations.
Smart Label Capture to read barcodes and printed text simultaneously with your Flutter app. This multi-modal data capture extracts information up to 7 times faster for labels with different elements, such as pricing, serial numbers, and IMEI numbers.
Augmented reality (AR) with MatrixScan Find to help users find the right item among many in the camera’s field of view with minimal effort.
5. Data security and privacy
Your app must protect sensitive information in transit and at rest, and your barcode scanner plugin cannot break that trust. Always check the documentation to determine if the software complies with your organization’s security and privacy policies. If not, you may need to build in development time to ensure it’s brought up to the necessary security requirements.
Scandit follows the practice of security by design, giving you complete control over barcode scanning data collection and processing. This includes:
All image processing happens on the device to ensure confidentiality and high availability of scanning.
Any data you choose to share with Scandit is encrypted during transit and at rest.
Scandit is ISO 27001:2022 Certified and compliant with applicable privacy regulations that include GDPR and CCPA.
Regular updates that give you the latest features, bug fixes, and security patches. You can read our release notes to get an idea of how we do it.
Technical help from real developers familiar with the software and its users.
Scandit’s Enterprise-Level Success Team helps you go from free trial to day-to-day operations in production. They can ensure your integration and optimization of barcode scanning features into a Flutter app goes smoothly.
How do I create a barcode scanner for Flutter apps?
SparkScan for Flutter makes it easy for you to integrate 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 its minimalistic UI that floats on top of any application, reducing your development time and solving many common UX pitfalls.
This interface includes a small camera preview window and a large, semi-transparent capture button that can be moved to any screen position. When not in use, the preview window disappears and the capture button collapses to occupy minimum space on the user’s screen.
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).
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.
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 a 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.
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:
@console
flutter pub get
5. Additional steps
When using Scandit software, 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, Scandit software uses content providers to initialize the scanning capabilities properly. If your content providers depend on Scandit software, 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.
@dart
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.
SparkScanViewSettings viewSettings = new SparkScanViewSettings();
// setup the desired appearance settings by updating the fields in the object above
See SparkScan Workflow Options for instructions on how to change the scanning mode, set camera preview behavior, and set the scanning behavior to either single scan or continuous scan.
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.
@override
void didScan(SparkScan sparkScan, SparkScanSession session, Future<FrameData?> getFrameData()) {
if (session.newlyRecognizedBarcode.isEmpty) return;
// Gather the recognized barcode
var barcode = session.newlyRecognizedBarcode[0];
// Do something with the recognized barcode
}
6. Customize the scanning UI
The SparkScan UI and UX are customized using advanced configurations. You can change the colors of UI elements (i.e. icons, buttons, toolbar), the trigger button icon, the size of the preview window, and more.
This graphic illustrates different examples of how you can adjust colors, positions, and sizes to suit different UX scenarios.
Now your Flutter app is ready to scan barcodes!
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. Our guide on how to measure barcode scanning performance gives you a systematic, use-case-based approach to validate different runtime aspects of your Flutter app.
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.
:format(jpeg))
:format(jpeg))
:format(jpeg))
:format(jpeg))