QR Code scanner in flutter with Example – qrscan flutter package

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