Flutter - QR Code Scanner and QR Generator
Last Updated :
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:
Step 1: First add the following dependency in your pubspec.yaml file
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.Â
Step 2: Now navigate to main.dart() file and return Material App()
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(),
);
}
}
Step 3: Declare StatefulWidget() for 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]),
),
),
],
),
)
);
}
}
Step 4: Navigating to ScanQR() page.
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),
),
),
],
),
),
);
}
}
Step 5: Navigating to GenerateQr() page.
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:
Similar Reads
Flutter - Build a Random Quote Generator App
Flutter is a UI toolkit developed by Google back in 2007. It is the first choice of most beginner cross-platform developers because of its straightforward learning curve and simple syntax. Flutter provides a simple API to generate beautiful UI without a hassle. One can develop apps for many platform
3 min read
Flutter - Make a Random Number Generator App
In Flutter we can create a random object using the Random() method to create a random number. We can use this concept to make an OTP that can be used for various authentication. In this article, we are going to Generate a 4-digit random pin in every click. A sample video is given below to get an ide
4 min read
How to Generate QR Code in Android?
QR codes are used in many apps to display data in machine-readable form. These codes are used to represent data in a secure manner that is readable only by machines and not by humans. We have seen many apps that provide QR codes and we can scan those QR codes with our mobile device. In this article,
4 min read
Flutter - Simple PDF Generating App
Flutter Community has created several packages to work with PDFs in our apps. In this article, we will be creating a simple PDF-generating app. This application will convert plain text to PDF. The packages that we are going to need are listed below with their uses:pdf: It is a PDF creation library f
9 min read
How to Generate SHA-1 Key in Flutter?
SHA-1(Secure Hash Algorithm) is the unique identity of your Application. In Flutter, you can use these keys for various purposes such as adding Firebase to your app, Google Maps API integration, and more. For example, to add Firebase to your app, you need to provide the SHA-1 and SHA-256 keys to the
2 min read
Reading and Generating QR codes in Python using QRtools
This article aims to introduce the use of the python library: qrtools. This library can be used to both read QR codes and generate them. What are QR codes? QR code, or quick response code, is a trademark for a type of 2 dimensional barcode. 2 dimensional barcodes are similar to one dimensional barco
5 min read
Generate QR Code in Android using Kotlin
Many applications nowadays use QR codes within their application to hide some information. QR codes are seen within many payment applications which are used by the users to scan and make payments. The QR codes which are seen within these applications are generated inside the application itself. In t
4 min read
Flutter - Generate Strong Random Password
In this article, we are going to make an application in Flutter that generates random passwords that cannot be easily cracked by hackers or attackers. Here we define a method named _generatePassword that is responsible for generating random passwords. It uses a mix of lowercase letters, uppercase le
4 min read
Flutter - Design Sample Registration Page
To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications, then register and then login. In this article, we are going to explain how to build a Registration page user interfa
5 min read
Flutter - Generate Dynamic Widgets
Dynamic widgets are a powerful feature in Flutter that allow you to generate widgets at runtime based on data or user input. In this article, we'll focus on generating dynamic text fields in Flutter. Use Cases Dynamic widgets in Flutter are extremely useful in situations where you need to create a v
5 min read