Flutter QRCode Generator & Scanner Tutorial | Barcode and QRCode Generation and Scanning Flutter App

in today's video I'm going to be showing you guys how to scan and generate QR codes within your flutter application our application is going to have the following functionality the user is going to be able to use the camera on the device and then be able to actually scan a QR code and when a successful scan has been performed we'll show them the actual picture of the QR code as well as the actual value that that QR code had furthermore the user is going to be able to go onto another page where they can type something into the text field for example the URL to a website and then using this information is going to generate a QR code that you can use and share with other people so to get started the first thing that I'm going to be doing is actually showing you guys the actual dependencies that I'm going to be using within our project the first is going to be mobilecore scanner package and this package is basically going to allow us to implement the functionality of being able to use the devices camera to scan barcodes as well as QR codes so I'm going to copy this dependency and then I'm going to come to the pspec yaml file and under dependencies I'm going to be pasting this besides this we also going to be using the pretty QR code package which is going to allow us to take some string or some other data and then transform that into an actual QR code so copy this dependency as well come back to dependency section and then paste this here and then do command save and let flutter pup gets do its magic as a site note links to all of the resources as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point once this is done the next thing that we have to do is basically perform some operations that are going to allow us to successfully use these packages and build our application the first thing that we're going to be doing is making sure that we start running our application if you're running and then from here for the Android side of thing all you have to do is go to Android app build.gradle and then you have to change the actual minimum SDK version under default config to be 21 or higher once this is done that's all you have to do on the Android side of things for those of you who are using iOS what you have to do is come to iOS Runner and then from here open the info. pist file and then what you can do is come to the mobile scanner package page and here you can scroll down until you see the iOS section and then you can copy these key string pairs here and then come back to the info. pist file and add them to the dictionary as so so just copy and paste them in and if you're going to be deploying this app to production then make sure that you update these string values as well so once this is done this is basically going to let iOS know that hey our application requires some specific permiss and what's the reason for why we need access to these specific permissions in this case it's the access to the photo library and Camera usage once this is done that's pretty much all we have to do in terms of the setup so the next thing that I'm going to be mentioning is that if you're going to be testing the functionality that we're going to be coding within this tutorial then it's only going to be possible to test it on Android as iOS simulators do not have a camera that you can test on the simulator otherwise if you want to test it on an actual physical Android or iOS device that that's going to work for you and the code is going to remain the same so what I'm going to be doing is actually using an Android Simulator for the demonstration purposes but I highly recommend that for this tutorial you actually plug in a physical Android or iOS device so now that we have a good understanding of the actual dependencies that our project depends on I'm going to share with you guys the actual structure of our starting project so the starting project is pretty simple all I have is a Pages folder under which I have two pages both of them are stateful widgets and they contain a scaffold which just has an app bar underneath of which I've added a button that allows me to go from the scan QR code page to the generate QR code page and then from the generate back to the scan that's all there is there's no actual logic implemented within our application for generating a QR code or scanning one so let's get into it so the first thing that we're going to be doing in this tutorial is actually learning how to scan a QR code so for that I'll come to my scan code page and then here what I'm basically going to be doing is coming to the stateful widgets corresponding state class and all of the functionality is going to be added here the first thing that I'm going to be doing is that I'm going to be setting the body parameter for our scaffold to be a mobile scanner widget and this is an actual widget that is going to come to us from the mobile scanner package and then it's going to expect us to provide it with a function call back which is going to be run every time a actual QR code is detected or a barcode is red so on detect what we're going to do is that we're going to get a capture object and then we'll use that to perform some operations but for now let's just do this with this then you're going to see that the application is going to ask us for some permissions which we are going to say that we are going to allow it if you do not then it's not going to work as intended so now we're actually seeing the devic's camera output being displayed to us and what we can now do is implement the logic for actually detecting QR codes but before I do this if you're going to be using a simulator here's the basic premise of how you can manipulate the camera feed that you're seeing within the Android simulator so you can hold all on the keyboard and once this is done you can use the WDS as well as q&e to move up and down forward backward left and right within the camera view and when you're going to basically start the initial feed you're going to see that you're going to be in a position somewhat similar to this so to move you'll hold alt and then you'll move your camera and then you'll have the ability to scan this QR code to add the QR code if you're using a simulator what you can do is click on the three dot buttons here come to the section which says camera and then here for the virtual scene images you can add a QR code to the wall as well as a table by just selecting a file and adding it here and once you do that within the camera feed you're going to start seeing a QR code being displayed on the wall and then similarly on the table as well and then to look at these and actually scan them we'll Implement that functionality but for now you should be able to see this QR code being displayed so now that this is done the next thing that we have to do for the mobile scanner to work is actually give it a controller which is going to be of type mobile SC scanner controller and for this controller we have to Define some parameters the first is going to be the detection speed the detection speed is going to be set to detection speed. no duplicates and what this is basically going to allow us to do for every unique QR code that we scan only fire on detect once you can also do detection speed. normal but this is going to repeatedly fire for the same QR code on detect so if you have some logic which is going to determine within on detect if this QR code has already been seen or not then you can proceed with this but I'll recommend using no duplicates and this way if you are scanning duplicate QR code again and again it's not going to keep calling on detect do command save and that's pretty much it and then what I'm going to be doing is that within on detect I'm going to do print capture and it's just going to give us an output on our actual debug console saying that we get an instance of something so to actually test this what I'll do is I'll stop running my application hot reload for some reason on a virtual Android device doesn't work so what I'm going to do is stop running the application click run and start debugging again and hopefully this time when our application starts up and it scans that QR code you're going to see that we are going to basically get an output on our debug console letting us know that we got an instance of a barcode capture and here you can see within our debug log we say that there's an instance of barcode capture so we're getting something let's see what we can do with it well the first thing that I'm going to be doing is that I'm going to be showing you guys how you can access the value of the QR code so for that what I'll do is that I'll create a final list and this list is going to be of barcodes and then I'm going to say that this list is going to be called barcodes and I'm going to be setting this equal to capture. barcodes like so once this is done to actually access the image of the actual QR code that's detected by the mobile scanner what you can do is you can go to your mobile scanner controller and set the return image property here to be true this way what's going to happen is that when we get the capture object it's going to have an image attribute which we can use to access this image so what I'm going to do is that I'm going to say that I'm going to create a u list optional it's going to be called image and I'm going to set this equal to capture. image like so once this is done the next thing that I'm going to be doing is that I'm going to be creating a for Loop and in this for Loop I'm going to go over all of the barcodes so for barcode in barcodes like so and for each barcode all I'm going to do is actually print to the console and let me do print the following string which I'll copy and paste in which says barcode found and then the barcode value and here I'm going to say final so to define the actual barcode and do this so let's do command save let's not change anything else let's stop running our application this is one of the Annoying parts for using the mobile scanner package and I'm going to start the video Once the application starts running again so as you can see in our debug console now that the barcode was actually scanned successfully or the QR code it says that it found a barcode and the value for that was qr- r.x YC so it's pretty much working as intended so now what I want to do is that every time a successful capture happens I want to show a dialogue in which it's going to show us the picture of the actual QR code that it basically extracted the information from as well as the actual value that that actual QR code has so for this what I'm going to do is that I'm going to add an if Clause here I'm going to say if the image is not equals to null so we get an image then what I'm going to be doing is I'm going to be calling show dialogue and the show dialogue function basically expects to get past the context as well as a builder that defines how the dialogue is going to be built this is a function call back so we do this and within this function what I'm going to do is return an alert dialogue then for this alert dialogue all I'm going to do is I'm going to set the type title to be a text property and here I'm going to do barcodes and then from the barcodes I'm going to access the first value or the first element in the barcodes list and I'm going to get the raw value from it and do command save and then the final thing that I'm going to be doing is that I'm also going to set the content property for the alert dialogue to be an image and the image property here is going to be Memory image and then I'm going to pass it the image like so since our image is a uint 8 list then to actually render it we're going to be using the memory image object and and then passing that to our image widget so do command save stop running our application start rerunning it and hopefully this time it should work as intended so welcome back everybody so as soon as the application started you can see that it scanned that QR code and once the QR code was scanned it show us said alert dialogue where we can see the actual image of the QR code that was scanned as well as the actual value that that that QR code has so with this done what we can do is proceed to The Next Step which is actually the ability to generate QR codes within our flut application so to do that I'm going to come to the generate QR code page and here what I'm going to do is open the generate code page file and then we're going to be adding all of the logic for actually generating a QR code here so as I had alluded to before to generate a QR code we're going to be using the package pretty QR code and it doesn't require any kind of setup from our site so all I'm going to be doing is actually showing you guys how you can generate a QR code the first thing that I'm going to be doing is coming to the build section here and I am going to change the body property here to not be this anymore and instead of this be a padding widget then for this padding widget I'm going to add some padding and it's going to be edin sets. all um and then 10 pixels from all sides and once this is done for the child of this I'm going to add a column the reason I'm adding a column is because we're going to have a text field and then underneath of that we're going to actually have a widget that's going to render our QR code once there is something within that text field I'm also going to define the three properties for my column which are the alignment properties as well as the size and then once this is done I'm going to set the children's property to be an empty list for now once this is done the first thing that I'm going to be doing is that within this children's list I'm going to create a text field and then this text field is going to be basically shown to us as you can see and when we click on it a keyboard is is going to pop and then what I'm going to be doing is that I'm going to be setting the unsubmitted call back function on this text field like the following and we're going to get a value passed to us for this function call back and we're going to use this value and save it somewhere so where am I going to be saving this value well what I'm going to do is that I'm going to come to the top of my generate code page State class and here I'm going to create a variable string optional QR data and then when the actual value within the text field gets submitted then I'm going to call set State and within this I'm going to set the QR data to be equal to the value like so and do command save so now when we click on the actual text field and we add something to it like so then once I press this tick button here or done on iOS it's going to take this information or this value and it's going to save that within our QR data perable so now that this is done the next thing that I want to do is basically take this information which is a string and then render that in the form of an actual QR code so to do that what I'll do is that within my children's list after my text field I'm going to say if our QR data is not equals to null then we're going to show a very specific widget that we get from the Pretty QR code package and it's called pretty QR view if I'm not mistaken and here we have to provide it with an image but we can actually use a Constructor method on called data and using this we can just give it raw data and it's going to use that data and generate the QR code for us and the data in this case is going to be QR data and I could add an exclamation mark here because I know that this is not going to be rendered if QR data is null and then with this done if I do command save you're going to see that now the QR code is being shown to us so now if I go ahead and I change this information to some other website let's just say like this and press enter you're going to say that the QR code changes and this QR code is actually going to function as intended and it's going to be able to be scanned using other devices so that's pretty much it for today's tutorial if you want to learn more about how you can use the mobile scanner or the pretty QR code to actually either scan QR codes or generate QR codes then I highly recommend taking a look at the actual documentation for these packages there's a lot of cool things that for example the pretty QR code package can do such as actually embed a custom image within your Q R code as you can see here and that's pretty easy to do so with that said I hope that you enjoyed today's tutorial if you did then please don't forget to leave a like on the video as well as subscribe to my channel so that you get notified every time I release a new video and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 3,293

Keywords: flutter qr code scanner, qr scanner using flutter, qr code generator project, how to create qr code app, how to create qr code scanner, qr code generator flutter source code, qr code app development, qr generator app, qr code generator, bar code scanner in flutter, flutter barcode scanner, flutter scan, flutter scanner, flutter scanner app github, ios qr code generator, qr code in dart, qr code scanner, qr code scanner in flutter, qrcode flutter, qrcode scan flutter

Id: vdRCbg2FQ2M

Length: 15min 16sec (916 seconds)

Published: Wed Jan 10 2024