QR.Flutter

To use qr_flutter in your Flutter project, add the dependency to your pubspec.yaml file.

For the stable release:

dependencies:
  qr_flutter: ^4.1.0

If you are using the Flutter master channel or want to use the latest development version from GitHub:

dependencies:
  qr_flutter:
    git:
      url: https://github.com/theyakka/qr.flutter

After adding the dependency, run flutter packages get or use your IDE's package update feature.

Import the package and use the QrImageView widget to render a QR code. You must provide the data string to be encoded. You can specify the version (using QrVersions.auto for automatic detection) and the size of the square image.

import 'package:qr_flutter/qr_flutter.dart';

QrImageView(
  data: '1234567890',
  version: QrVersions.auto,
  size: 200.0,
),

To explore the capabilities and various options exposed by the qr_flutter library, you can run the provided example project. This project serves as a sandbox for testing different configurations of the QR code generator.

flutter run

To change the image displayed during the app's launch on iOS, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

Using Xcode:

1. Open the iOS workspace using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Locate the LaunchImage asset set.
4. Drag and drop your desired images into the asset set to replace the existing ones.

You can embed a ui.Image in the center of the QR code using the embeddedImage and embeddedImageStyle properties.

QrEmbeddedImageStyle allows you to control:

• size: The desired size of the image.
• shape: The shape of the background behind the image (EmbeddedImageShape.square, EmbeddedImageShape.circle, or none).
• borderRadius: For rounded square backgrounds.
• safeArea: If true, the image will respect a safe area to prevent overlapping with QR modules.
• safeAreaMultiplier: Adjusts the safe area size.
• shapeColor: The color of the shape behind the image.
• color: A ColorFilter to apply to the embedded image.

To avoid deprecated properties, use the following styling objects to customize the QR code's appearance:

• eyeStyle: Controls the appearance of the three large finder patterns (the 'eyes') at the corners. You can customize the color and shape (QrEyeShape).
• dataModuleStyle: Controls the appearance of the individual data pixels (modules). You can customize the color, shape (QrDataModuleShape), border radius, and whether outside corners are rounded.
• gradient: If provided, applies a Gradient to the entire QR code.
• gapless: A boolean that, when set to true, removes the 1px gap between modules.

You can overlay an image in the center of the QR code using the embeddedImage and embeddedImageStyle properties. Use AssetImage or any other ImageProvider.

QrImageView(
  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),
  ),
)

Use the errorStateBuilder property to provide a fallback UI when the QR code cannot be rendered (for example, if the input data is too long for the specified version). The builder provides the context and the error object.

QrImageView(
  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 went wrong...',
          textAlign: TextAlign.center,
        ),
      ),
    );
  },
)

Instead of a solid color, you can use the gradient property to apply a Gradient (such as LinearGradient) to the QR code modules.

QrImageView(
  data: 'Rainbow after the rain',
  version: QrVersions.auto,
  size: 320,
  gradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [
      Color(0xffff0000),
      Color(0xffffa500),
      Color(0xffffff00),
      Color(0xff008000),
      Color(0xff0000ff),
      Color(0xff4b0082),
      Color(0xffee82ee),
    ],
  ),
)

Use QrEyeStyle to customize the appearance of the QR code's finder patterns (the large squares in the corners). You can control the shape, color, and corner rounding.

Properties:

• eyeShape: Use QrEyeShape.square or QrEyeShape.circle.
• color: The tint color for the eye.
• borderRadius: The corner radius for the eye shape.

const eyeStyle = QrEyeStyle(
  eyeShape: QrEyeShape.circle,
  color: Colors.blue,
  borderRadius: 4.0,
);

The QrPainter provides methods to convert the rendered QR code into standard Flutter image formats:

• toPicture(double size): Returns a ui.Picture containing the QR code rendered at the specified size.
• toImage(double size): Returns a Future<ui.Image> of the QR code.
• toImageData(double size, {ui.ImageByteFormat format}): Returns a Future<ByteData?> containing the raw image bytes (defaults to ui.ImageByteFormat.png).

// Exporting to an image
Future<void> exportQr(QrPainter painter) async {
  final ui.Image image = await painter.toImage(300.0);
  // Use the image...
}

// Exporting to PNG bytes
Future<void> exportBytes(QrPainter painter) async {
  final ByteData? bytes = await painter.toImageData(
    300.0,
    format: ui.ImageByteFormat.png,
  );
}