QR code makes it easier to share data with other users. The data embedded in the QR code can be retrieved easily by scanning it with an app like Google Lens (Android), Apple Camera (iOS), or using your own app created using FlutterFlow!

Today, you will learn to build a QR code generator widget using Flutter and add it as a Custom Widget to your FlutterFlow app.

Disclaimer: This article assumes that you already have some knowledge of Flutter development and have a basic understanding of Dart code.

If you don't have coding knowledge of using Flutter, fear not; you can directly use this pre-built custom widget for the QR code generator:

TL;DR, head over to this section if you want to directly use the QRCode widget inside your FlutterFlow app without going into the details of building the widget from scratch.

Package overview

Let's look at a Flutter package that can help you build a QR code generator widget.

You can find the Flutter packages by visiting pub.dev, the official package repository of Dart and Flutter apps. A decent package would be qr_flutter which is quite popular and has a good amount of likes.

There could be several packages providing similar functionalities. While choosing, make sure the package:

• Has good scores: Likes, Pub Points (out of 130), and Popularity percentage (out of 100%). More information about package scores is here.
• Has Web support, this will allow you to test out the widget in the Run/Test mode of FlutterFlow.

Setup Flutter locally

While working with a custom widget, it's recommended to build and test it locally on your system. It also allows you to take advantage of Flutter's hot reload feature that helps to iterate over the widget quickly.

NOTE: If it's a simple widget, you can directly add the code to the Custom Widget of FlutterFlow (follow the instructions in this section), but it might be harder to debug in case of any error (compilation of custom widget takes around 2 minutes on FlutterFlow).

To use Flutter on your system, you must install the Flutter SDK. Go to this link and select your operating system to get the instructions for installing it.

Once you have the Flutter SDK installed, run the following command from the terminal:

flutter doctor

This command checks your environment and reports if there are any issues or any further steps required to complete the installation correctly.

Flutter being a cross-platform framework, can run on mobile, desktop, web, and various other platforms. But you should run the app on the platform which you have selected as the target platform (just to be sure that everything works properly on that particular platform).

⚠️

There are some additional steps for running on certain platforms like Android and iOS. If you want to run the app on an emulator or Simulator, you have to configure that as well. All the instructions are present on the installation page of Flutter (according to your operating system).

If the package supports Web platform, then it's always faster to use web while testing, because it doesn't require any additional steps. You just need to have Chrome installed on your system.

You will also require an IDE for writing the Dart code for your Flutter app. The three most popular IDEs among Flutter developers are:

• Visual Studio Code
• IntelliJ IDEA
• Android Studio

Setup any one of them using the respective link present above.

Create basic Flutter app structure

For testing the widget, let's create a basic Flutter project.

Run the following command from the terminal:

flutter create qr_code_generator

It will generate the required files inside a folder called qr_code_generator. Open the folder using your preferred IDE.

Now, head over to your main.dart file present inside the lib folder.

Replace the entire code present inside main.dart with the following:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Widget Preview',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PreviewPage(),
    );
  }
}

class PreviewPage extends StatelessWidget {
  const PreviewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Widget Preview'),
      ),
      body: Center(
        // TODO: Replace Container with the widget
        // that you would be building
        child: Container(),
      ),
    );
  }
}

The above code will help you preview the QR code widget once we add it. PreviewPage is just a page with an AppBar and an empty Container widget. We would replace this Container with the QRCode widget once we complete building it in the step.

Testing QR Code widget locally

To install the qr_flutter package in your Flutter project, open the terminal, navigate to the project folder, and run the following command:

cd project/folder/path
flutter pub add qr_flutter

This command would install the package inside your project and add it to the pubspec.yaml file under the dependencies section:

dependencies:
  qr_flutter: ^4.0.0

Now, create a new file inside the lib folder, called qr_code.dart. Add these two import statements to the file:

// Required for getting access to basic Flutter widgets
import 'package:flutter/material.dart';
// QR Flutter package
import 'package:qr_flutter/qr_flutter.dart';

You can get this import statement of any package by going to the Installing tab of that Flutter package page on pub.dev.

Add the structure of the QRCode widget to the file after the import statements:

class QRCode extends StatelessWidget {
  const QRCode({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  Widget build(BuildContext context) {
    // TODO: Replace with the QrImage widget
    // of the package
    return Container();
  }
}

This structure is similar to the boilerplate code generated by the Custom Widget page of FlutterFlow.

Usually, most popular packages have a basic example code for using their package. If you go to the qr_flutter page and scroll down, you will find an Examples section. A basic QR code generation widget example is given there; you can use this code to get started.

To get more customizability, you can take some of the data used inside the widget as parameters. Here's a sample version of the widget with all available parameters, this will help you to set these parameters directly from FlutterFlow once the widget is added to the project:

class QRCode extends StatelessWidget {
  const QRCode({
    Key? key,
    this.width,
    this.height,
    this.qrSize,
    required this.qrData,
    this.gapLess,
    this.qrVersion,
    this.qrPadding,
    this.qrBorderRadius,
    this.semanticsLabel,
    this.qrBackgroundColor,
    this.qrForegroundColor,
  }) : super(key: key);

  // Required by FF (NOT USED IN WIDGET)
  final double? width;
  final double? height;
  // The (square) size of the image
  final double? qrSize;
  // Text data to the encoded
  final String qrData;
  // Adds an extra pixel in size to prevent gaps (default is true).
  final bool? gapLess;
  // `QrVersions.auto` or a value between 1 and 40.
  // See http://www.qrcode.com/en/about/version.html for limitations and details.
  final int? qrVersion;
  // Padding on all sides
  final double? qrPadding;
  // Circular border radius beside the QR code
  final double? qrBorderRadius;
  // Will be used by screen readers to describe the content of the QR code.
  final String? semanticsLabel;
  // 	The background color (default is transparent).
  final Color? qrBackgroundColor;
  //	The foreground color (default is black).
  final Color? qrForegroundColor;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(qrBorderRadius ?? 0),
      child: QrImage(
        size: qrSize,
        data: qrData,
        gapless: gapLess ?? true,
        version: qrVersion ?? QrVersions.auto,
        padding: EdgeInsets.all(qrPadding ?? 10),
        semanticsLabel: semanticsLabel ?? '',
        backgroundColor: qrBackgroundColor ?? Colors.transparent,
        foregroundColor: qrForegroundColor ?? Colors.black,
      ),
    );
  }
}

If you notice carefully, the QrImage widget is wrapped inside a ClipRRect widget. It's added to create a rounded border if the user wants it. By default, it is set to "0", which means the borders would have sharp pointed corners.

In the above code, ?? signifies if the user does not provide the parameter value (on its left), the right one will be used as the default value.

For example, qrBackgroundColor ?? Colors.transparent signifies that if the value of qrBackgroundColor is null or empty, then Colors.transparent will be used as the default background color.

Now, go to the main.dart file and import the qr_code.dart file by adding the following: