Flutterexperts

Introduction:

Barcode scanners are machine-lucid codes addressed outwardly as numbers and equal lines. At this point when checked by the laser beam emission barcode scanner, these symbols produce an extraordinary computerized digital code. Barcode scanners are fastened to and related to items to recognize and recognize them.

Barcode scanner identifications are utilized in POS frameworks, distribution centers, stock administration frameworks, or whatever other data set that requires stock information collection and storage.

Demo Module :

The above demo video shows how to integrate a barcode scanner in a flutter. It shows how the barcode scanner will work using the flutter_barcode_scanner package in your flutter applications. It shows when the user scans the barcode and then shows the result on your devices.

Methods:

In order to achieve functionality, we have two important methods in this package.

> scanBarcode:

The camera is utilized to scan the barcode /QR code till it is recognized. It will return the outcome as String.

static Future<String> scanBarcode(String lineColor, String cancelButtonText,
    bool isShowFlashIcon, ScanMode scanMode

• String lineColor: This property allows us to provide a color to a scan line within a scan window.
• String cancelButtonText: This property allows us to specify a string to cancel an action.
• bool isShowFlashIcon: If it is true, the Flas icon will appear on the screen, otherwise not.
• ScanMode scanMode: We can use this property to control the scan mode. [QR, BARCODE, DEFAULT] mods are available here.

> getBarcodeStreamReceiver:

It will return the persistent stream of standardized barcode scans until the client drops the activity. Returns a stream of barcode strings that were recognized.

static Stream? getBarcodeStreamReceiver(String lineColor,
    String cancelButtonText, bool isShowFlashIcon, ScanMode scanMode)

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_barcode_scanner:

Step 2: Import

import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

Step 3: For ios

Add add this line in Info.plist.Because you will use the camera of an iOS device and you have to mention why you will use it.

<key>NSCameraUsageDescription</key>
<string>Camera permission is required for barcode scanning.</string>

Step 4: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In main. dart file, we will add BarcodeScannerDemo class. In this class, we will add a String variable _scanBarcode is equal to string text.

String _scanBarcode = 'Unknown';

In the body, we will add the Builder method. In this method, we will return a Container widget. Inside the widget, we will add alignment in was center and also a Flex widget. in this widget, we will add direction as the vertical axis and mainAxisalignmnet was the center.

Builder(builder: (BuildContext context) {
  return Container(
      alignment: Alignment.center,
      child: Flex(
          direction: Axis.vertical,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Image(
              image: AssetImage("assets/logo.png"),
              height: 150,
            ),
            const SizedBox(
              height: 50,
            ),
            Text('Scan result : $_scanBarcode\n',
                style: const TextStyle(
                    fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(
              height: 45,
              child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.cyan,
                  ),
                  onPressed: () => barcodeScan(),
                  child: const Text('Barcode Scan',
                      style: TextStyle(
                          fontSize: 17, fontWeight: FontWeight.bold))),
            ),
          ]));
})

In the children, we will add an image, text ‘Scan result: $_scanBarcode\n’, and ElevatedButton. In this button, we will add the text ‘Barcode Scan’ and the onPressed method. In this method, we will add barcodeScan() function. We will define below the code.

Now, we will deeply define barcodeScan() function are:

In this function, we will add a String barcodeScanRes and we can pass scan mode as — { QR, BARCODE, DEFAULT } for graphic overlay for QR or Barcode.

Future<void> barcodeScan() async {
  String barcodeScanRes;
  // Platform messages may fail, so we use a try/catch PlatformException.
  try {
    barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
        '#ff6666', 'Cancel', true, ScanMode.QR);
    print(barcodeScanRes);
  } on PlatformException {
    barcodeScanRes = 'Failed to get platform version.';
  }
  if (!mounted) return;

  setState(() {
    _scanBarcode = barcodeScanRes;
  });
}

In this function, we will add setState()method. In this method, we will add _scanBarcode is equal to the barcodeScanRes. When the user scans the code then the result will be shown otherwise it is shown as an empty/unknown result.

For continuous scanning, you can use :

If you want to scan barcodes constantly without shutting the camera use FlutterBarcodeScanner.getBarcodeStreamReceive params will be similar like FlutterBarcodeScanner.scanBarcodefor example

Future<void> startBarcodeScanStream() async {
  FlutterBarcodeScanner.getBarcodeStreamReceiver(
          '#ff6666', 'Cancel', true, ScanMode.BARCODE)!
      .listen((barcode) => print(barcode));
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode/splash_screen.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class BarcodeScannerDemo extends StatefulWidget {
  const BarcodeScannerDemo({Key? key}) : super(key: key);

  @override
  _BarcodeScannerDemoState createState() => _BarcodeScannerDemoState();
}

class _BarcodeScannerDemoState extends State<BarcodeScannerDemo> {
  String _scanBarcode = 'Unknown';

  /// For Continuous scan
  Future<void> startBarcodeScanStream() async {
    FlutterBarcodeScanner.getBarcodeStreamReceiver(
            '#ff6666', 'Cancel', true, ScanMode.BARCODE)!
        .listen((barcode) => print(barcode));
  }

  Future<void> barcodeScan() async {
    String barcodeScanRes;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
          '#ff6666', 'Cancel', true, ScanMode.QR);
      print(barcodeScanRes);
    } on PlatformException {
      barcodeScanRes = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _scanBarcode = barcodeScanRes;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Barcode Scanner Demo'),
          centerTitle: true,
          automaticallyImplyLeading: false,
          backgroundColor: Colors.cyan,
        ),
        body: Builder(builder: (BuildContext context) {
          return Container(
              alignment: Alignment.center,
              child: Flex(
                  direction: Axis.vertical,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Image(
                      image: AssetImage("assets/logo.png"),
                      height: 150,
                    ),
                    const SizedBox(
                      height: 50,
                    ),
                    Text('Scan result : $_scanBarcode\n',
                        style: const TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold)),
                    SizedBox(
                      height: 45,
                      child: ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            primary: Colors.cyan,
                          ),
                          onPressed: () => barcodeScan(),
                          child: const Text('Barcode Scan',
                              style: TextStyle(
                                  fontSize: 17, fontWeight: FontWeight.bold))),
                    ),
                  ]));
        }));
  }
}