Flutter QR Generator

Accessing websites, images, and files using QR codes. QR codes are used to make payments that are easy to use. Different apps are available For doing payment using QR like Gpay, phone, etc. so how to generate a QR code in the Flutter mobile application

Here is the step-by-step process.

QR code is one type of image that hides some text, URL, or any data. very easy to use.

Step 1: Create a new project in the Flutter project or you can use an already created Flutter project. 

Step 2: Open “ pubspec.yaml” file the project. Add below line .

dependencies :


           qr_flutter: ^4.1.0


          // url of qr flutter 


           url: https://github.com/theyakka/qr.flutter.git

Step 3: Create a main.dart file in your lib folder.lib>main.dart

import 'package:flutter/material.dart';

import 'package:qr_flutter/qr_flutter.dart';

void main() {

return runApp(


home: Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

centerTitle: true,

title: const Text('Candidroot solutions',

style: TextStyle(

color: Colors.blue,),),

backgroundColor: Colors.white),

body: const DicePage(),

), //Scaffold

), //Material App




class DicePage extends StatefulWidget {

const DicePage({Key? key}) : super(key: key);


// ignore: library_private_types_in_public_api

_DicePageState createState() => _DicePageState();


class _DicePageState extends State<DicePage> {

final TextEditingController _controller = TextEditingController();


Widget build(BuildContext context) {

return Center(

child: Column(

children: <Widget>[


padding: EdgeInsets.all(15),

child: TextField(

controller: _controller,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: 'Qr code or name',

hintText: 'Qr code or name',




padding: EdgeInsets.all(15),

child: ElevatedButton(

child: Text('Submit', style: TextStyle(fontSize: 20.0),),

onPressed: () {





padding: EdgeInsets.all(15),

child: TextButton(

child: Container(

color: Colors.white,

padding: const EdgeInsets.all(14),

child: QrImageView(

data: _controller.value.text,

version: QrVersions.auto,

size: 200.0,



onPressed: () {

_controller.value = _controller.value;





], //<Widget>

), //Row

); //center



Step 4:  Output of above example 

Happy coding!

365Bloggy May 14, 2024
Share this post