Build A QR Code Generator APP in Flutter

In this post, we’ll walk through creating a simple yet fully functional QR Code Generator app using Flutter, which will take a text value and generate a QR code for the given input.

What We’ll Need

• Flutter (>=3.0.0)
• Dart
• qr_flutter package
• Provider (optional, for state management)
• Visual Studio Code

Build A QR Code Generator APP in Flutter

Getting Started

A Quick Response code (QR code) is a type of 2d code generator (two-dimensional barcode) that stores information in a machine-readable format. It consists of black squares arranged on a white background and can be scanned using a smartphone camera or QR code scanner.

To Generate QR codes in Dart Programming or Fullter app(flutter mobile app or flutter web or flutter desktop), we will be needed the qr_flutter package in flutter code as mentioned in the above.

The qr_flutter package in Flutter is a Dart library used to generate QR codes directly in your Flutter apps. It provides a simple and flexible way to convert text to QR codes and render it as widgets, making it easy to integrate into any Flutter UI.

Add qr_flutter Package

Open the pubspec.yaml and add the qr_flutter package, currently latest version 4.1.0 version is available hence add this version:

 dependencies:  
  flutter:  
   sdk: flutter  
  qr_flutter: ^4.1.0  

Then click on the terminal run the below command

 flutter pub get  

The flutter pub get command is used in Flutter projects to fetch the dependencies listed in the pubspec.yaml file.

QR Code Maker Flutter App Code

the following code examples create QR codes based on the provided inputs and renders the QR codes on the screen with help of widgets.

 import 'package:flutter/material.dart';  
 import 'package:qr_flutter/qr_flutter.dart';  
 void main() {  
  runApp(QRCodeApp());  
 }  
 class QRCodeApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'QR Code Generator',  
    theme: ThemeData(  
     primarySwatch: Colors.blue,  
    ),  
    home: QRGeneratorScreen(),  
    debugShowCheckedModeBanner: false,  
   );  
  }  
 }  
 class QRGeneratorScreen extends StatefulWidget {  
  @override  
  _QRGeneratorScreenState createState() => _QRGeneratorScreenState();  
 }  
 class _QRGeneratorScreenState extends State<QRGeneratorScreen> {  
  final TextEditingController _controller = TextEditingController();  
  String _data = '';  
  @override  
  Widget build(BuildContext context) {  
   return Scaffold(  
    appBar: AppBar(  
     title: Text('QR Code Generator'),  
    ),  
    body: Padding(  
     padding: const EdgeInsets.all(16.0),  
     child: Column(  
      children: [  
       TextField(  
        controller: _controller,  
        decoration: InputDecoration(  
         labelText: 'Enter data to encode',  
         border: OutlineInputBorder(),  
        ),  
       ),  
       SizedBox(height: 20),  
       ElevatedButton(  
        child: Text('Generate QR Code'),  
        onPressed: () {  
         setState(() {  
          _data = _controller.text.trim();  
         });  
        },  
       ),  
       SizedBox(height: 40),  
       if (_data.isNotEmpty)  
        QrImageView(  
         data: _data,  
         version: QrVersions.auto,  
         size: 200.0,  
        ),  
      ],  
     ),  
    ),  
   );  
  }  
 }  

QR Code QR Code Generator

Thanks