







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:(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 Code3. Inside lib, create a models folder, and inside it, create afile:4. Create thewhich 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 anfolder, and inside it create afile. Here we are going to get our users from an API:6. Now, add the HTTP and QRscan library to yourfile:7. Go to the folder "" and open thefile:8. Import the following libraries/packages:9. Create anvariable, which will have ouras list. Also, add a timer variable (for updating the list), anvariable, avariable (to store the value of the QR code):10. Create a, that will get theand will convert it to an, 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 thefunction when the widget is created, and also load the. We will(you can change that) by calling the12. Create a future asynchronous function called, where you will await the response from the scanner and then set the value for thevariable:14. For the purposes of this example,, 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,the result to thewidget:15. Open thefile. 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 thefile, 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 thefor this app here: Card Scanner App UI Also, you canabout the original design here: Flight Ticket App This concludes the. If you have questions, drop a comment below!