Hi Guys, Welcome to Proto Coders Point.
In this Flutter Tutorial we will learn How to implement QR Code Scanner or Bar code scanner in our Flutter App.
so to make this work we gonna use flutter library called QRSCAN
Introduction on QR Code Scanner Flutter
When it comes to barcode scanner each QR or bar code will contain uinque identity number that are used to identify the product. Using this QR code scanner, flutter app you will be able to find out the data value stored in that bar code or QR code.
In the end of this tutorial, our Flutter app will be able to scan both Barcode as well as QRCode.
Then now Let’s begin implementing QR Scan flutter library
DEMO
Video Tutorial
QR Code scanner in flutter development with Example
A Flutter plugin to scanning. Ready for Android and iOS devices
Step 1 : Add QR Scanner Dependencies in pubspec.yaml file
To make use of this library you need to add the library into your flutter project, to do so you need to add required dependencies in pubspec.yaml file.
dependencies: qrscan: ^0.2.17
Step 2 : Add Camera Permission for Android
offcourse to make use of any physical device of mobile you firstly need to ask for the permission from the user.
under your project open android > app > src > main > AndroidManifest.xml and just add the below permissions.
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
Step 3 : Add Camera Permission for iOS
Then, even you need to add the camera permission on iOS device so that user can make use of camera to scan the QR or bar code.
Add this Permission open ios > Runner > Info.plist
<key>NSCameraUsageDescription</key> <string>Need Camera Permission for Scanning QR</string>
Now, once you add permission your flutter code can easily make use of camera to scan QR code.
Step 4 : Code to open scanner camera
Firstly, you need to import the qrscan.dart package in you main.dart file or where you want to use QR camera Scanner.
import 'package:qrscan/qrscan.dart' as scanner;
Then, on button pressed you need to run this scanner.scan(); method
String cameraScanResult = await scanner.scan();
Here, the String cameraScanResult will hold the value that is scanned by the camera.
Complete Source code to Scan a QR or BarCode using Flutter application
Copy Paste below code in main.dart
import 'package:flutter/material.dart'; import 'package:qrscan/qrscan.dart' as scanner; import 'package:flutter/services.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { String result = "Hello World...!"; Future _scanQR() async { try { String cameraScanResult = await scanner.scan(); setState(() { result = cameraScanResult; // setting string result with cameraScanResult }); } on PlatformException catch (e) { print(e); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("QR Scanner Example In Flutter"), ), body: Center( child: Text(result), // Here the scanned result will be shown ), floatingActionButton: FloatingActionButton.extended( icon: Icon(Icons.camera_alt), onPressed: () { _scanQR(); // calling a function when user click on button }, label: Text("Scan")), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, ); } }
And there you go, you Flutter app is now ready to work on both Android and iOS devices to scan QR code.
Check out : QR scanner app development in android