- 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.
- Make sure minSdkVersion > 18 in android/app/build.gradle file, which is declared in the barcode_scan library.
- Now to add search bar in app bar, you have to extend SearchDelegate class, and override its methods.
- 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.
- Widget buildLeading(BuildContext context) : A widget to display before the current query in the AppBar (typically back button).
- Widget buildResults(BuildContext context) : The results shown after the user submits a search from the search page.
- 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.
- 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, | |
| ); | |
| } | |
| } |
Once you build the project, following will be the result:
You can find the entire project : Github
