Hi, Flutter developer in this flutter article I am sharing how to create a flutter barcode scanner app. As you know flutter is a cross-platform App development toolkit and for barcode scanning we need the camera hardware so both platform hardware configuration is different.
So I am using a flutter package for this integration mobile_scanner this is An universal barcode and QR code scanner for Flutter based on MLKit. Uses CameraX on Android, AVFoundation on iOS and Apple Vision & AVFoundation on macOS.
Platform-specific setup for mobile_scanner
Table of Contents
Android – flutter barcode & QR code scanner
This package makes use of the included version of MLKit Barcode-scanning that is compatible with Android. This version is more precise and is immediately accessible to devices. But, it will also increase the size of the application by 3-10 MB.
Another option is to utilize MLKit Barcode-scanning non-bundled version of MLKit Barcode scanner for Android. This version is a bit older than the version that is bundled, but it only makes the file larger by about 600KB. To use this version you must alter the mobile_scanner gradle file to replace com.google.mlkit:barcode-scanning:17.0.2 with com.google.android.gms:play-services-mlkit-barcode-scanning:18.0.0.
Be aware that if you change the gradle file directly within your project, it could be overridden when you update your pubspec.yaml. I’m still looking for the best way to modify the module in Gradle however I am yet to find one.
iOS – flutter barcode & QR code scanner
Add the following keys to your Info.plist file, located in NSCameraUsageDescription – describe why your app needs access to the camera. This is known as Privacy – Description of Camera Usage inside the Visual Editor.
If you want to use the local gallery feature from image_picker NSPhotoLibraryUsageDescription – describe why your app needs permission for the photo library. This is known as Privacy – Photo library Usage description in the Visual Editor.
flutter barcode & QR code scanner example
Lets’s Start to make an example for a barcode and QR code scanner example using with mobile_scanner package. So that firstly you can make a new project and if you have an old project where you want to add this open and follow bellow steps.
Add Dependency in pubspec.yaml file
dependencies:
flutter:
sdk: flutter
mobile_scanner: ^2.1.0
After that update your yaml file to click on the get pub link at the top of the screen. And Get to all classes for the mobile_scanner package. After that, you can add the below code to your dart file.
Scanner.dart file code
import 'package:flutter/material.dart';
import 'package:scanner_app/Screens/Custom/BorderBox.dart';
import 'package:scanner_app/Utils/constants.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
class AddChargerScanner extends StatefulWidget {
const AddChargerScanner({Key? key}) : super(key: key);
@override
_AddChargerScannerState createState() => _AddChargerScannerState();
}
class _AddChargerScannerState extends State<AddChargerScanner> {
bool isAddCharger = true;
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
final ThemeData themeData = Theme.of(context);
const padding = 25.0;
return Scaffold(
backgroundColor: COLOR_WHITE,
body: Container(
width: size.width,
height: size.height,
// color: COLOR_WHITE,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Container(
padding: EdgeInsets.fromLTRB(20, 62, 20, 0),
child: Column(
children: [
Row(children: [
BorderBox(
child: Icon(Icons.arrow_back_ios_new),
width: 44,
height: 44,
isAction: 1,
tabHandler: () {
Navigator.of(context).pop();
},
)
]),
SizedBox(
height: size.height * 0.07,
),
Row(
children: [
Flexible(
child: Text(
"Scan QR code on a Charger",
style: themeData.textTheme.headline2,
),
),
],
),
Text(
"Please make sure SPIN Charger is in bluetooth area",
style: themeData.textTheme.subtitle1,
),
SizedBox(
height: size.height * 0.04,
),
Expanded(
child: Center(
child: Container(
width: 230,
height: 230,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 0,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: MobileScanner(
allowDuplicates: false,
onDetect: (barcode, args) {
if (barcode.rawValue == null) {
debugPrint('Failed to scan Barcode');
} else {
final String code = barcode.rawValue!;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
AddDeviceView(barcodeId: code),
));
print("Barcode found :$code");
//debugPrint('Barcode found! \$code');
}
},
),
),
),
),
),
SizedBox(
height: size.height * 0.02,
),
Text(
"Code is not valid",
style: themeData.textTheme.bodySmall,
),
SizedBox(
height: size.height * 0.04,
),
],
),
),
),
Container(
padding: EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Column(
children: [
TextButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => AddDevice(
barcodeId: '',
),
),
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Add Device",
style: themeData.textTheme.headline5,
),
],
),
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.fromLTRB(70, 18, 70, 18)),
backgroundColor:
MaterialStateProperty.all<Color>(COLOR_LIGHT_GRAY),
foregroundColor:
MaterialStateProperty.all<Color>(Colors.white),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
),
),
),
SizedBox(
height: size.height * 0.02,
),
],
),
),
],
),
),
);
}
}
After adding the code run your app and see the output of the QR code scanner. when you open the app firstly the ass permission on camera app access then you can use it to scan any barcode and QR code. on Sucess result the redirect to another screen with the barcode scanned value.
Also, read