QR.Flutter is a Flutter library for simple and fast QR code rendering

February 14, 2020 library, QR Code, Widgets

QR.Flutter is a Flutter library for simple and fast QR code rendering via a Widget or custom painter.

Features

Built on QR – Dart
Automatic QR code version/type detection or manual entry
Supports QR code versions 1 – 40
Error correction / redundancy
Configurable output size, padding, background and foreground colors
Supports image overlays
Export to image data to save to file or use in memory
No internet connection required

Installing

You should add the following to your pubspec.yaml file:

dependencies:
  qr_flutter: ^3.2.0

Note: If you’re using the Flutter master channel, if you encounter build issues, or want to try the latest and greatest then you should use the master branch and not a specific release version. To do so, use the following configuration in your pubspec.yaml:

dependencies:
  qr_flutter:
    git:
      url: git://github.com/lukef/qr.flutter.git

Keep in mind the master branch could be unstable.

After adding the dependency to your pubspec.yaml you can run: flutter packages get or update your packages using your IDE.

Getting started

To start, import the dependency in your code:

import 'package:qr_flutter/qr_flutter.dart';

Next, to render a basic QR code you can use the following code (or something like it):

QrImage(
  data: "1234567890",
  version: QrVersions.auto,
  size: 200.0,
),

Depending on your data requirements you may want to tweak the QR code output. The following options are available:

Property	Type	Description
`version`	int	`QrVersions.auto` or a value between 1 and 40. See http://www.qrcode.com/en/about/version.html for limitations and details.
`errorCorrectionLevel`	int	A value defined on `QrErrorCorrectLevel`. e.g.: `QrErrorCorrectLevel.L`.
`size`	double	The (square) size of the image. If not given, will auto size using shortest size constraint.
`padding`	EdgeInsets	Padding surrounding the QR code data.
`backgroundColor`	Color	The background color (default is none).
`foregroundColor`	Color	The foreground color (default is black).
`gapless`	bool	Adds an extra pixel in size to prevent gaps (default is true).
`errorStateBuilder`	QrErrorBuilder	Allows you to show an error state `Widget` in the event there is an error rendering the QR code (e.g.: version is too low, input is too long, etc).
`constrainErrorBounds`	bool	If true, the error `Widget` will be constrained to the square that the QR code was going to be drawn in. If false, the error state `Widget` will grow/shrink to whatever size it needs.
`embeddedImage`	ImageProvider	An `ImageProvider` that defines an image to be overlaid in the center of the QR code.
`embeddedImageStyle`	QrEmbeddedImageStyle	Properties to style the embedded image.
`embeddedImageEmitsError`	bool	If true, any failure to load the embedded image will trigger the `errorStateBuilder` or render an empty `Container`. If false, the QR code will be rendered and the embedded image will be ignored.

Examples

There is a simple, working, example Flutter app in the /example directory. You can use it to play with all the options.

Also, the following examples give you a quick overview on how to use the library.

A basic QR code will look something like:

QrImage(
  data: 'This is a simple QR code',
  version: QrVersions.auto,
  size: 320,
  gapless: false,
)

A QR code with an image (from your application’s assets) will look like:

QrImage(
  data: 'This QR code has an embedded image as well',
  version: QrVersions.auto,
  size: 320,
  gapless: false,
  embeddedImage: AssetImage('assets/images/my_embedded_image.png'),
  embeddedImageStyle: QrEmbeddedImageStyle(
    size: Size(80, 80),
  ),
)

To show an error state in the event that the QR code can’t be validated:

QrImage(
  data: 'This QR code will show the error state instead',
  version: 1,
  size: 320,
  gapless: false,
  errorStateBuilder: (cxt, err) {
    return Container(
      child: Center(
        child: Text(
          "Uh oh! Something went wrong...",
          textAlign: TextAlign.center,
        ),
      ),
    );
  },
)

FAQ

Has it been tested in production? Can I use it in production?

Yep! It’s stable and ready to rock. It’s currently in use in quite a few production applications including:

Sixpoint: Android & iOS

Outro

Credits

Thanks to Kevin Moore for his awesome QR – Dart library. It’s the core of this library.

For author/contributor information, see the AUTHORS file.

License

QR.Flutter is released under a modified MIT license. See LICENSE for details.

Download Flutter QR code rendering Library Source Code on GitHub

https://github.com/lukef/qr.flutter

Flutterappworld

Provides the list of the opensource Flutter apps collection with GitHub repository.