How to create a QR Code and share it in Flutter

Introduction

Hello everyone! I hope everybody having a great day. After this article, you will be able to generate QR codes using Flutter and share them in Android, iOS, MacOS and Windows devices. If you want to go straight to the point, full code is at the bottom.

Dependencies

We will be using these dependencies to make our lives easier.

share_plus: ^4.1.0
path_provider: ^2.0.11
qr_flutter: ^4.0.0

share_plus is a Flutter community package that allows you to easily implement native share functionality in your Flutter application.

path_provider is a package that developed by Flutter devs. It helps you to access your platforms directories.

qr_flutter is developed by an independent developer and it will be our star of the show.

Generating the QR code

First, you will be needing a string to generate code from. After you put your data to the data parameter in string format, validate function will generate the QR code and return it with error checking results.

final qrValidationResult = QrValidator.validate(
  data: url,
  version: QrVersions.auto,
  errorCorrectionLevel: QrErrorCorrectLevel.L,
);

Then after null checks are done according to your taste, by using QrPainter, we’ll create the QRPainter object to create an image later.

final QRPainter qrPainter = QrPainter.withQr(
  qr: qrCode, // QR object to create
  color: Colors.white, //defines the color of squares
  // embeddedImage: image, you can also embed an image to center of the code
);

flutter_qr’s API also allows us to directly generate an image from QRPainter object but note that it returns an Image from dart:ui library, not the widget. We will be utilising toImageData function since it returns ByteData and allows us to use it easier.

final ByteData? bytes = await qrPainter.toImageData(
  200,
  format: ImageByteFormat.png,
);

In order to use the share function, platforms require a local path from the device. Therefore, we must write our bytes to the device’s temporary directory. Path provider arrives to assist us at this point. We will access the temporary directory in type of Directory by using the package’s getTemporaryDirectory API. The directory of the image will be defined using File class from dart:io, and it will then be generated by invoking the create function. Writing a file requires the file to be in Uint8List format. So we parse into the required format and write the file data to created file.

final Directory tempDir = await getTemporaryDirectory();
final File tempQrFile = await File('${tempDir.path}/qr.jpg').create();
final Uint8List list = bytes.buffer.asUint8List();
tempQrFile.writeAsBytesSync(list);

In here I wanted users to share the QR code as JPG file. To achieve that simply write the extension and filename in the path.

Sharing it

Finally, share_plus package comes to help by calling native share functions with given parameters. I did also put the mime type of my file just in case.

await Share.shareFiles([tempQrFile.path], mimeTypes: ['image/jpg']);

DONE 🎉 🎉 🎉

You can check the full code below

Have a great day!