Flutter — Search using Barcode Scan

Amit Bhave Follow

Jul 19 · 2 min read

Barcodes are applied to products as a means of quick identification. They are used in
retail stores as part of the purchase process, in warehouses to track inventory etc. So
for apps like e-commerce, inventory management, there is a common use case to
search products in product catalogue using barcode. Now these barcodes are usually
of big length(12/13 digits), so entering that manually in search box would be
cumbersome.

. . .

So now let’s see how can we integrate barcode scan in search box in a flutter application.

Add barcode_scan package in pubspec.yaml file, and type command “flutter pub
get” to install the dependency.

pubspec.yaml

Make sure minSdkVersion > 18 in android/app/build.gradle file, which is declared

in the barcode_scan library.
 build.gradle

Now to add search bar in app bar, you have to extend SearchDelegate class, and
override its methods.

1. List<Widget> buildActions(BuildContext context) : Widgets to display after the

search query in the AppBar (typically clear search query button). We will also add
button to trigger the barcode scan.

2. Widget buildLeading(BuildContext context) : A widget to display before the current

query in the AppBar (typically back button).

3. Widget buildResults(BuildContext context) : The results shown after the user submits
a search from the search page.

4. Widget buildSuggestions(BuildContext context) : Suggestions, to be shown in the

body of the search page while the user types a query into the search field.

SearchDelegate provides you with special getter and setter called “query”, which is
the current query string shown in the AppBar. So in our use case, we can easily
assign the result of the barcode scan to this query, to update the search string in the
search bar.
 Search using Barcode Scan

Finally, stitching everything together, our Product search delegate will look like this:

mport 'package:barcode_scan/barcode_scan.dart';
mport 'package:barcode_search/models/product.dart';
mport 'package:flutter/material.dart';
mport 'package:flutter/services.dart';

lass ProductSearch extends SearchDelegate<String> {

Future _scanBarcode(BuildContext context) async {

try {
ScanResult scanResult = await BarcodeScanner.scan();
query = scanResult.rawContent;
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.cameraAccessDenied) {
_showErrorSnackbar(context, 'The user did not grant the camera permission!');
} else {
_showErrorSnackbar(context, 'Unknown error: $e');
}
} catch (e) {
_showErrorSnackbar(context, 'Unknown error: $e');
}
}

void _showErrorSnackbar(BuildContext context, String error) {

Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(error),
),
);
}

@override
String get searchFieldLabel => 'Search (using scan)';

@override
List<Widget> buildActions(BuildContext context) {
//Wid t t di l ft th h i th A B
 //Widgets to display after the search query in the AppBar.
return [
IconButton(
icon: Icon(Icons.scanner),
color: Theme.of(context).primaryColor,
onPressed: () => {_scanBarcode(context)},
),
IconButton(
icon: Icon(Icons.clear),
color: Theme.of(context).primaryColor,
onPressed: () {
query = '';
},
),
];
}

@override
Widget buildLeading(BuildContext context) {
//A widget to display before the current query in the AppBar.
return IconButton(
icon: BackButtonIcon(),
color: Theme.of(context).primaryColor,
onPressed: () {
close(context, null);
},
);
}

@override
Widget buildResults(BuildContext context) {
//The results shown after the user submits a search from the search page.
}

@override
Widget buildSuggestions(BuildContext context) {
//Create suggestions, to be shown in the body of the search page while the user types a que
final productNames = [
Product('7921815609741', 'Dove'),
Product('8908001158244', 'Fogg'),
Product('8921815609743', 'Nivea'),
Product('9921815609744', 'Engage'),
];
final products = query.isEmpty
? productNames
 : productNames.where((p) =>
p.barcode.toLowerCase().startsWith(query.toLowerCase()) ||
p.name.toLowerCase().startsWith(query.toLowerCase())
);

return ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
//You can navigate to product details page from here
},
title: Text(
products.elementAt(index).name,
),
),
itemCount: products.length,
);
}

product_search.dart hosted with ❤ by GitHub view raw

 . . .

Once you build the project, following will be the result:

You can find the entire project : Github

Flutter Barcode Scanner Flutter App Development

About Help Legal

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the
Google Play store