QR Code Create, Scan in Flutter ? A Complete Guide

QR Code :

QR Code i.e., Quick Response codes(qr code full form) are used to provide information in the fastest way possible such that when user scans the code information is received onto their device.

There is a wide usage of these codes which are similar to that of the barcodes used for products, commodities to get the product information.

In banking app’s these scanners are mostly used to make transactions super fast and convenient for even common man.

In this blog we will be dealing with the qr code generator and QR scanner too in flutter app.

What is qr code and how does it work ?

QR (Quick Response) code is a two-dimensional barcode that is readable by smartphones and other mobile devices equipped with cameras. It was invented in 1994 by a Japanese company named Denso Wave to track vehicles during the manufacturing process. Since then, QR codes have become widely used for a variety of purposes, including advertising, product labeling, and payments.

QR codes store information in a matrix of black and white squares that can be read quickly and accurately by a smartphone camera. The information can be anything from a website URL, contact information, or a message.

To use a QR, a user needs a smartphone with a camera and a QR reader app. When the camera is pointed at the QR code, the app decodes the information and takes the user to the corresponding website, displays contact information, or performs another action related to the information stored in the code.

QR codes have become popular because they offer a quick and convenient way to access information, eliminating the need for users to type in long web addresses or manually input contact information.

Video Tutorial :

Watch the following video tutorial for a more comprehensive step-by-step guide.

pubspec.yml :

Add necessary dependencies for QR creation and scanning in your Flutter project.

qr_flutter: ^4.0.0
qrscan: ^0.3.3

main.dart :

Unlock the full potential of QR integration with this comprehensive code snippet. Easily generate and scan QR in your Flutter project with our complete solution. Seamlessly incorporate features for QR creation, scanning, and data retrieval using Flutter widgets and dependencies.

Simplify data transfer and enhance user experience with our efficient and versatile QR implementation.

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:qrscan/qrscan.dart' as scan;

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late String scannedMsg = "";
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("QR Generator"),
        ),
        body: Column(
          children: [
            const SizedBox(height: 50,),
            TextField(
              controller: controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter your string',
              ),
            ),
            const SizedBox(height: 30,),
            TextButton(
              onPressed: () {
                setState(() {});
              },
              child: const Text("Generate QR"),
            ),
            TextButton(
              onPressed: scanQr,
              child: const Text("Scan QR"),
            ),
            const SizedBox(height: 50,),
            Text(scannedMsg),
            const SizedBox(height: 100,),
            QrImage(
              data: controller.text,
              size: 200.0,
            ),
          ],
        ),
      ),
    );
  }

  void scanQr() async {
    String? scanResult = await scan.scan();
    scannedMsg = scanResult.toString();
    setState(() {});
  }
}

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates