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 Dart 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 App',  
    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 App'),  
    ),  
    body: Padding(  
     padding: const EdgeInsets.all(16.0),  
     child: Column(  
      children: [  
       TextField(  
        controller: _controller,  
        decoration: InputDecoration(  
         labelText: 'Enter Text',  
         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,  
        ),  
      ],  
     ),  
    ),  
   );  
  }  
 }  

The above flutter code can be used to create QR codes from any text, for example you can use this code to convert a URL to QR code.

Testing QR Code Generator App

Follow the below steps to test the above code:

• Run the project.
• Enter any test to generate QR code.
• Click on the Generate QR Code button.
• A QR will be displayed on the screen like below. The below screenshot is example a link to QR code.

QR Code QR Code Generator

Thanks