Generating QR-Code in a Flutter App

QR Codes are increasingly becoming part of our lives. Many Businesses in Retail Sales, manufacturing, pharmaceutical, Distribution, and Services among others are adopting the use of QR Codes in their daily operations to help users get various access to their sites or even to pay for services. QR Code stands for Quick Response Code, originally developed in Japan.

QR Codes are used to scan/read QR data using smartphones with the embedded URLs in the QR Code which are used to navigate to various links that provide information about what was scanned.

This tutorial focuses on a simple way how to Generate QR Codes in a Flutter App.

Note: This article assumes you already know the basics of Flutter, in case you are new to Flutter, check out this article:

How to get started on fun Flutter.

Let’s Get Started.

In this article, am gonna use the QR-Flutter Library, that's built on top of QR Dart. The library offers a simple and fast way of rendering QR codes via a Widget or custom painter.

1. Create a Simple Flutter Project

Let’s create our demo app. On the terminal, type in the $ flutter create Command followed by the name of the app. In this case, we’ll use the name flutter_qr_code.

$ flutter create flutter_qr_code

2. Add the Flutter QR Code Package in the pubspec.yml file.

qr_flutter: ^4.1.0

Always make sure you check the latest version of the package from its official page.

3. Remove the pre-generated code in the main.dart file

(This step assumes you have a basic idea of Flutter project structure). If you are new to Flutter, please check the Official Flutter Documentation.

In this demo, we’ll create 3 files but am gonna make it as simple as possible. This will include:

• main.dart file
• generate_qr_code.dart file
• qr_image.dart file

After successfully creating the flutter_qr_code sample app, in the main.dart file, remove the default generated code, and replace it with the code below. This is the main entry point of the App:

4. Create the file generate_qr_code.dart file.

In the generate_qr_code.dart file, we will have the following code which contains the contents of the User Interface(UI) for generating the QR Code.

generate QR Code UI

The above code shows a simple UI that allows you to paste a URL that you wanna generate its QR Code and pressing the Generate QR Code button, triggers the actual rendering of the QR Code which shows on the next page.

5. Create the qr_image.dart file.

In the qr_image.dart file, Create a QR Image class.

Next, import the Flutter QR Code package in the qr_image.dart file

import 'package:qr_flutter/qr_flutter.dart';

The actual rendering of the QR code is shown on this page using the QR Image widget from the Flutter QR library.

In the above code example, we are using the following QR Image widget properties:

• Data -> This is a required param on the QR Image widget that takes in a String and it represents the data we are passing in for the QR Code to be generated.
• Size -> This describes the size of the QR Code that we wanna Display. You can define the size according to what you desire.
• EmbeddedImageStyle -> This gives styling options for the image overlay if you wanna include an image in your QR Code.

QR Image widget offers a variety of properties that you can tweak depending on your needs.

The generated QR Code will look like this:

Generated QR Code

You can then Scan the generated QR Code above for use. To test this on a physical device, you can use your smartphone’s camera to scan the generated QR Code and this leads to the link you had pasted before generating the QR Code.

Below is a demo of how it works:

In the above Demo, a URL has been pasted in the Text Input field, (you can try this with your own URL) then pressing the generate QR Code button navigates to the next page with the generated QR Code 😄.

Find the full Github Code here:

Conclusion.

In this tutorial, you have learned how to generate QR Code in your Flutter App by embedding the URL whose QR Code you wanna generate into the Text Input field using the QR-Flutter Library.

This article doesn’t cover scanning of QR Codes, if you wanna learn how to scan an already generated QR Code with #Flutter, you can check out the QR Scanner library.

Thank you 😍

Happy Fluttering 🙌.

Should you have any questions, feel free to ping me on Twitter or on the comment sections below.