Sharing QR code in Flutter

QR code (Quick response code) is being used everywhere now. A need may arise where you want to also use it in your flutter app and share it to other users for them to scan and get the information encoded in it. This article will show you how to do it.

For the purpose of this article we would need to install some packages we would be using:

1. qr_flutter
2. share
3. path_provider
4. screenshot

The qr_flutter package is to generate our QR code, the share package is to share the image, the path_provider is to get access to a path where we can store the image and the screenshot package is to take a screenshot of our QR code(we would get to this later).

First, let’s create our QR code. Here is the code to do that:

Here, we added the QrImage widget, a textfield and 2 buttons. The data property in the QrImage widget suggests what the QR code will represent. Right here we are passing in the TextField’s text to the data property, so whatever the user types will be converted into a QR code. Notice we have a screenshotController and a Screenshot widget. We would use this to take the screenshot of the Qr code and get the screenshot as a Uint8List, this is what we would share as an image.

Let’s get into sharing the QR code, we would create a method for that:

The above code does some few things: Firstly, it gets the directory path we would save our image (the screenshot of the Qr code) to, then creates a File for it with a unique file name. Next, we called the screenshotController to capture our Qr Code and write it into the file we created. Lastly, we shared share what is in that directory, by sharing the path. Notice we called the .create() method on the File class, iOS requires this for it to work.

Note: If you try to share the Qr code and you are seeing a black background, wrap your QrImage widget inside a white container.

Bonus tip: If you want to save the qr code image to iOS phone gallery, you need to add this to your info.plist file (iOS brings out the Save to Gallery option when you try to share).

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs to store images in the phone gallery</string>

Note that the description inside the info.plist file doesn’t file doesn’t have to be exactly what I wrote, you can give a different description if you like.

Here is the final Code:

We use the shareFiles method when we want to share one for more files with the share package.

Here is the link to the code on github:

GitHub - Frankdroid7/Flutter-Playground at QRCodePlayground

Thanks for reading. If you found this useful, please clap👏 and leave a comment.