Flutter – Search using Barcode Scan

  • 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.
Image for post
pubspec.yaml
  • Make sure minSdkVersion > 18 in android/app/build.gradle file, which is declared in the barcode_scan library.
Image for post
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.
Image for post
Search using Barcode Scan
  • Finally, stitching everything together, our Product search delegate will look like this:
import 'package:barcode_scan/barcode_scan.dart';
import 'package:barcode_search/models/product.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class ProductSearch extends SearchDelegate<String> {
Future _scanBarcode(BuildContext context) async {
String barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
"#ff6666",
"Cancel",
true,
ScanMode.BARCODE,
);
query = barcodeScanRes;
}
@override
String get searchFieldLabel => 'Search (using scan)';
@override
List<Widget> buildActions(BuildContext context) {
//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 query into the search field.
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,
);
}
}
view raw product_search.dart hosted with ❤ by GitHub

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

Image for post

You can find the entire project : Github

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s