Flutter QR Code Reader Tutorial

In this tutorial, we want to make a small QR code reader app. With a tap on the FloatingActionButton, we open the camera and then show the scanned result.

Create a New Flutter Project

After creating a new Flutter project, delete everything that we don’t need, so that it looks like the following:

View the code on Gist.

We just modified the FloatingActionButton a little bit, so it gets invisible, once we are in camera mode. And we added _qrInfo, _camState and an empty _scanCode(), which all will be needed soon.

The Package needed for the Flutter QR Reader Tutorial:

For this example, we are going to use the qr_mobile_vision package. There are others out there, but let’s just stick with this one for that tutorial. So just add the package to your pubspec.yaml file:

View the code on Gist.

Then click on Packages get on the top right.

The Reader Widget

First, let us not forget to import the qr_mobile_vision package. Next, we add the reader widget form the package to our app. But we only want to show it, when _camState is active. So we change our body to something like this:

View the code on Gist.

If there is an error, we show it at the screen. Also, we added an empty _qrCallback(), which will handle the string we get from the scanned QR code. Keep in mind, that the author of the package mentioned putting the reader widget into a SizedBox. So we do that.

Handling the QR Callback

Last but not least, we fill in the missing parts. When we want to scan something, we change the _camState to active. Then, when we get the callback we just assign the code to our _qrInfo, which then shows the result in our text widget.

View the code on Gist.

Also, don’t forget to set the _camState back to false. And we are done. If you tap the FAB, the camera should open and after scanning a QR Code you should get the string.

If you liked this Flutter QR Code Reader Tutorial, check out the following links

In the case, you want to learn more about the BottomNavigationBar, check out this one. If you want to know more about dynamic localization in Flutter, then this one might interest you. I also made a short one about the GridView.