QR Code Creating, Scanning in Flutter: A Complete Guide

QR Code :

QR Code i.e., Quick Response codes 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 creation of QR Code and scanning it too in flutter app.

pubspec.yml :

Add the required dependencies to your flutter project for creating and scanning QR codes.

qr_flutter: ^4.0.0
qrscan: ^0.3.3

main.dart :

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(() {

    });
  }
}