How to Open Camera and Scan QR/Bar Code Easily

Flutter makes so many complex tasks very easy to implement. Opening the camera to scan QR/Bar code and to get the scan result output is very easy, you need a single line of code to implement this feature in your Flutter app.

In this example, We have used QR Code flutter package in the project. Some of the reasons to use this package are mentioned below:

This Package Supports: 

  • Scan BR-CODE
  • Scan QR-CODE
  • Control the flash while scanning
  • Apply for camera privileges
  • Scanning BR-CODE or QR-CODE in albums
  • Parse to code string with uint8list
  • Scanning the image of the specified path
  • Display the switch button of the flashlight according to the light intensity
  • Generate QR-CODE
  • Generate BR-CODE

To use this “QR code package”, add the following line on pubspec.yaml file as a dependency.

dependencies:
  flutter:
    sdk: flutter
  qrscan: ^0.2.19

Add “Camera” permissions in android/app/src/main/AndroidManifest.xml file before <application> tag.

<uses-permission android:name="android.permission.CAMERA" />

Code to implement QR Scanner on you app:

import 'package:qrscan/qrscan.dart' as scanner; 
//import scanner package file

String cameraScanResult = await scanner.scan(); 
//open camera and scan

Full Dart Code:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:qrscan/qrscan.dart' as scanner; 
//put this line manually

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
          home: CamScanner(),
    );
  }
}

//apply this class on home: attribute at MaterialApp()
class CamScanner extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _CamScanner(); //create state 
  }
}

class _CamScanner extends State<CamScanner>{
  String scanresult; //varaible for scan result text

  @override
  void initState() {
    scanresult = "none"; //innical value of scan result is "none"
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("QR or Bar code Scanner"),
        backgroundColor: Colors.redAccent
      ),
      body:Container(
         alignment: Alignment.topCenter, //inner widget alignment to center
         padding: EdgeInsets.all(20),
         child:Column(
           children:[
                Container(
                  child: Text("Scan Result: " + scanresult)
                ),
                Container(
                  margin: EdgeInsets.only(top:30),
                  child: FlatButton( //button to start scanning
                  color: Colors.redAccent,
                  colorBrightness: Brightness.dark,
                  onPressed: () async {
                    scanresult = await scanner.scan();
                    //code to open camera and start scanning,
                    //the scan result is stored to "scanresult" varaible.
                    setState(() { //refresh UI to show the result on app
                    });
                  }, 
                  child: Text("Scan QR or Bar Code")
                  )
                )
           ],
         )
      ),
    );
  }
}

This is the way you can open a camera to scan QR or Bar code with Flutter app.

No any Comments on this Article


Please Wait...