Create a QR based Identification Scanner App with Flutter

Icons made by phatplus, Vectors Market and Nikita Golubev from www.flaticon.com

On previous posts, I demonstrated how to display a dynamic list view from a JSON, and also how to create a QR code scanner. Those posts might seem as something easy to do, but I had main goal in mind. Initially what I had in mind was to create an QR-based user identification scanner app, and instead of just jumping into that, I decided to create two separate posts first, showing how to make basic things. Previously
I had the idea and the code ready to create the app, but I didn't have a nice design. If you see my previous posts, it is pretty clear that all the apps lack design. Luckily there are some people on Reddit that posts Flutter UI tutorials, which help me to save time and money. For this app, I used one of cybdom flutter designs: Flight Ticket App (my favorite btw) because looks and feels like a native app. Let's get started!

1. First, let's clone the Flight App UI project
2. Open the project with Visual Studio Code
3. Inside lib, create a models folder, and inside it, create a users.dart file:

4. Create the UsersModel, which will help us to find the user when we scan a QR code. Add the id, name, and userName, email and phone. Also add a Map from Json:

5. Create an api folder, and inside it create a active_users_api.dart file. Here we are going to get our users from an API:

6. Now, add the HTTP and QRscan library to your pubspec.yaml file:

7. Go to the folder "lib -> ui -> screens" and open the home.dart file:

8. Import the following libraries/packages:

9. Create an activeUsers variable, which will have our UserModels as list. Also, add a timer variable (for updating the list), an active variable, a barcode variable (to store the value of the QR code):

10. Create a future asynchronous function, that will get the json and will convert it to an iterable list, then as a map and finally it will pass it to the model to make it a list:

11. Load the active users by calling the _getFromApi function when the widget is created, and also load the timer. We will load users every 5 seconds (you can change that) by calling the _getFromApi function:

12. Create a future asynchronous function called _scanFromCamera, where you will await the response from the scanner and then set the value for the barcode variable:

14. For the purposes of this example, instead of sending the result of the scan to the backend, I will iterate through the users obtained from the API in Flutter, and search the user by ID with a for loop, and when the user has been found, it will push the result to the DetailScreen widget:

15. Open the details.dart file. Replace everything in that file with the code below, in which we change how the information is displayed, and some colors as well:

16. Finally, open the passangercontainer.dart file, and replace everything there with the code below:

17. And that's it! You can run the app and scan QR codes:

18. As you can see, there are few explanations about the code and that's because it is mostly copy and paste from previous posts I linked at the beginning of this post. As you can see, Flutter is extremely flexible. I could just grab a Flutter design from github and integrate already working code in just few steps.

You can grab the full code for this app here: Card Scanner App UI

Also, you can view the article about the original design here: Flight Ticket App

This concludes the Create a QR based Identification Scanner App with Flutter tutorial. If you have questions, drop a comment below!