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 :

           //depencies 

           qr_flutter: ^4.1.0

           qr_flutter:

          // url of qr flutter 

           git:

           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(

MaterialApp(

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);

@override

// ignore: library_private_types_in_public_api

_DicePageState createState() => _DicePageState();

}

class _DicePageState extends State<DicePage> {

final TextEditingController _controller = TextEditingController();

@override

Widget build(BuildContext context) {

return Center(

child: Column(

children: <Widget>[

Padding(

padding: EdgeInsets.all(15),

child: TextField(

controller: _controller,

decoration: InputDecoration(

border: OutlineInputBorder(),

labelText: 'Qr code or name',

hintText: 'Qr code or name',

))

),

Padding(

padding: EdgeInsets.all(15),

child: ElevatedButton(

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

onPressed: () {

},

),

),

Padding(

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;

print("submit"+_controller.value.text);

},

),

),//Expanded

], //<Widget>

), //Row

); //center

}

}


Step 4:  Output of above example 



Happy coding!










365Bloggy May 14, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive