Flutter - QR Code Scanner and QR Generator - GeeksforGeeks

21 Aug, 2021
Accessing websites, images, and files using QR codes is widely used these days. These QR Codes are used for doing payments which is easy to use. You can see this feature in various payment apps such as Google Pay, Amazon Pay, and many more. In today’s article, we are going to see how to generate QR codes for certain links and QR code scanners in the flutter app.
Follow the below steps to build a simple QR scanner and generator app in Flutter:
Dart
dependencies:     path_provider: ^1.6.24  qr_flutter: ^3.2.0  barcode_scan_fix: ^1.0.2
 Now click on pub.get to configure. 
First, we have declared MyApp() in runApp in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as primarySwatch as indigo. Then we have given our first screen of or slider app in the home: HomePage()
Dart
void main() {  runApp(MyApp());} class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      //Given Title      title: 'Flutter Demo',      debugShowCheckedModeBanner: false,      //Given Theme Color      theme: ThemeData(       primarySwatch: Colors.indigo,      ),      //Declared first page of our app      home: HomePage(),    );  }}
In StatefulWidget() return Scaffold() widget. In Scaffold() Widget in the body section, we have declared Container() having width and height. In that Container() we have given Column inside which we have given mainAxisAlignment as center and CrossAxisAlignment as a stretch. After that we have given an Image as Network Image below that Image we have given rounded FlatButton() having color, border-radius, and border side. On that FlatButton we have given onPressed method which is used to navigate to the next screen ScanQR().
Below that we have given another rounded FlatButton() having color, border-radius, and border side.  On that FlatButton we have given onPressed method which is used to navigate to the next screen GenerateQR().
Dart
class HomePage extends StatefulWidget {  @override  _HomePageState createState() => _HomePageState();} class _HomePageState extends State<HomePage> {   @override  Widget build(BuildContext context) {    return Scaffold(           body: Container(        width: 500,        height: 500,        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          crossAxisAlignment: CrossAxisAlignment.stretch,          children: [            //Display Image            Image(image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQyYwscUPOH_qPPe8Hp0HAbFNMx-TxRFubpg&usqp=CAU")),                         //First Button            FlatButton(              padding: EdgeInsets.all(15),              onPressed: (){                Navigator.of(context).push(MaterialPageRoute(builder: (context)=> ScanQR()));              },                child: Text("Scan QR Code",style: TextStyle(color: Colors.indigo[900]),),              shape: RoundedRectangleBorder(                borderRadius: BorderRadius.circular(20),                side: BorderSide(color: Colors.indigo[900]),              ),            ),            SizedBox(height: 10),             //Second Button            FlatButton(              padding: EdgeInsets.all(15),              onPressed: (){                Navigator.of(context).push(MaterialPageRoute(builder: (context)=>                                                             GenerateQR()));              },              child: Text("Generate QR Code", style: TextStyle(color: Colors.indigo[900]),),              shape: RoundedRectangleBorder(                borderRadius: BorderRadius.circular(20),                side: BorderSide(color: Colors.indigo[900]),              ),            ),          ],        ),      )    );  }}
In this file first, we have imported package barcode_scan_fix. Then we have created StateFulWidget for ScanQR class. In that state we have declared String as qrcoderesult = ‘Not yet Scanned’. After that in Scaffold() we have declared Appbar with the title. In the body section, we have declared Column() wrapped with Container() and given mainAxisAlignment as center and CrossAxisAlignment as a stretch. After that, we have declared two text widgets first text widget has declared for the given title. And the second text widget is used to declare the String which we have given. After that, we have given a FlatButton() and on its onPressed method, we have given codeScanner which is used to scan QR code which we have imported from the bar_code_scan_fix library.
Dart
import 'package:barcode_scan_fix/barcode_scan.dart';import 'package:flutter/material.dart'; class ScanQR extends StatefulWidget {  @override  _ScanQRState createState() => _ScanQRState();} class _ScanQRState extends State<ScanQR> {   String qrCodeResult = "Not Yet Scanned";   @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Scan QR Code"),      ),      body: Container(        padding: EdgeInsets.all(20),    child: Column(    mainAxisAlignment: MainAxisAlignment.center,    crossAxisAlignment: CrossAxisAlignment.stretch,    children: [      //Message displayed over here      Text(        "Result",        style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.bold),        textAlign: TextAlign.center,      ),      Text(        qrCodeResult,        style: TextStyle(          fontSize: 20.0,        ),        textAlign: TextAlign.center,      ),      SizedBox(        height: 20.0,      ),       //Button to scan QR code      FlatButton(        padding: EdgeInsets.all(15),        onPressed: () async {          String codeSanner = await BarcodeScanner.scan();    //barcode scanner          setState(() {            qrCodeResult = codeSanner;          });        },        child: Text("Open Scanner",style: TextStyle(color: Colors.indigo[900]),),        //Button having rounded rectangle border        shape: RoundedRectangleBorder(          side: BorderSide(color: Colors.indigo[900]),          borderRadius: BorderRadius.circular(20.0),        ),      ),          ],        ),      ),    );  }}
First we have given StateFulWidget() for GenerateQr() class. In that, we have given the final variable as TextEditingController(). In the Scaffold() section we have given appbar along with the title. In the body section, we have given Container() having Column() with mainAxisAlignment as center and CrossAxisAlignment as a stretch. Wrapped with SingleChildScrollView(). After that, we have given TextField() for giving input link to convert into a barcode. After that, we have given FlatButton() which will convert our link into a QR code. In the onPressed of this FlatButton() we have declared its logic in which the imported library qr_link is used to convert the link into QR code.
Dart
import 'package:flutter/material.dart';import 'package:qr_flutter/qr_flutter.dart'; class GenerateQR extends StatefulWidget {  @override  _GenerateQRState createState() => _GenerateQRState();} class _GenerateQRState extends State<GenerateQR> {   String qrData="https://github.com/ChinmayMunje";  final qrdataFeed = TextEditingController();  @override  Widget build(BuildContext context) {    return Scaffold(      //Appbar having title      appBar: AppBar(        title: Center(child: Text("Generate QR Code")),      ),      body: Container(        padding: EdgeInsets.all(20),        child: SingleChildScrollView(                     //Scroll view given to Column          child: Column(            mainAxisAlignment: MainAxisAlignment.center,            crossAxisAlignment: CrossAxisAlignment.stretch,            children: [              QrImage(data: qrData),              SizedBox(height: 20),              Text("Generate QR Code",style: TextStyle(fontSize: 20),),                             //TextField for input link              TextField(                decoration: InputDecoration(                  hintText: "Enter your link here..."                ),              ),              Padding(                padding: const EdgeInsets.all(8.0),                //Button for generating QR code                child: FlatButton(                    onPressed: () async {                      //a little validation for the textfield                      if (qrdataFeed.text.isEmpty) {                               setState(() {                          qrData = "";                        });                      } else {                        setState(() {                          qrData = qrdataFeed.text;                        });                      }                    },                  //Title given on Button                    child: Text("Generate QR Code",style: TextStyle(color: Colors.indigo[900],),),                  shape: RoundedRectangleBorder(                    borderRadius: BorderRadius.circular(20),                    side: BorderSide(color: Colors.indigo[900]),                  ),                ),              ),            ],          ),        ),      ),    );  }}
Output:
surindertarika1234
android
Flutter
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Dialogs