Awesome QR Codes in #FlutterFlow using Custom Widgets

foreign [Music] so welcome to this particular video where I'm going to show you how to create QR codes with inside flutterflow at the time recording QR codes are not natively supported with inside flutter flow so we need to pull them in from an external Source in this particular video I'm going to talk to you about custom widgets and how you can use pub.dev to bring in a library into flutterfly which can produce you some lovely looking QR codes if you are new to custom widgets then this is the video for you because I'm going to take it nice and slowly nice and gentle through the process on getting custom widgets up and running with inside your flutterflow application so without further Ado let's get cracking so here we are then with inside the widget tree of flutter flow and you can see here that I've created this really really simple screen that looks a little bit more visually interesting because it kind of looks like a virtual ticket and you can see here that we've got some various kind of text widgets and and some sort of dividers and all that kind of stuff it just makes up the more um sort of interesting parts of the the UI but we've got this white container in the middle that's just waiting for our QR code that's where we're now going to need to focus our attention so let's now start thinking about how do we get a QR code with inside flutterfly so right we're ready to now then start looking at how do we get a QR code with inside our application now of course we already know that flutter flow at the time recording here at the beginning of July in 23 there is no QR code widget available to us with inside the UI Builder so we need to go external we need to go and find the actual a widget that we can actually bring in to our application so the way that we do that is we move over to a website called pub.dev which kind of is like a package repository okay it contains a whole host of packages that we can actually bring into our flutterflow application now um please do bear in mind that actually not all packages that you will find on here will work with inside flutter flow um so do bear that in mind if you're struggling and you're trying to work something out it's not working then you may be struggling because the package does not work but in our case um the particular package that we're looking for is a QR code so I do already know that there is some QR code packages on here that will be of interest to us so what I'll do is I'll go to this website and I'll type in q our barcode here just do a search and up Pops a whole host a whole list of options available to us of course now that just a couple of sort of guiding principles really in terms of when you're actually looking at packages to pull into flutter flow some of the ones you need to look out for here is to make sure that certainly it contains the term flutter because not all do on here but it's the flutter the one you're looking for and you also want to consider as well the platform of your application for example if you are just focusing on a web application then you and you're not interested in an Android or an iOS deployment of your of your actual application then you don't need to worry about where it says Android iOS and you may just be looking there for web so just make sure the platform that you are targeting is supported but of course most packages do kind of work across the Android and iOS web is kind of up and coming but of course what we're looking for in our application is one that will also work with web and will pretty well much work across the board now the package that I've identified the one that I'm interested it in here is this QR barcode okay so I've just looked at this and I can see here just one of the other things I need to look out for is is whether it's Dart 3 compatible now I highly recommend at the time recording flutter flow supporting flutter three okay so you can see that by simply going back to the project you can see up here we've got flutter three 10.4 so you pretty well much know that flutter three is currently being supported and of course here you can see this is Dart 3 compatible now what'll probably happen here is that when flutter moves to four then there'll be Dart version four it's highly likely it may not be the case but it's highly likely that will be the case so you want to just try to make sure that um whichever version flutter is running on to make sure that actually it's it's compatible with that particular version okay so just keep that as a as something to look out for okay I mean you'll find that some some of the older packages on here will will not be compatible with dart free because it's just old right there haven't actually been updated or they've been neglected by the community that have actually built them so um pretty much this is the one that we're looking for okay is QR barcode just select that and then you're into this particular screen that will give you some various details here about the package now of course if you're not a programmer I'm going to try to help you as much as I can and I tried to do that as much as I can in all of my videos here to try to guide you through a little bit more slower instead of just jumping Deep dive in I'm trying to explain a little bit more about what's going on okay so don't worry too much about this at the particular moment I'll talk you through as we start developing the custom widget on how all of this stuff works so pretty much this is what we need and we need to pull this now into our actual flutter flow project so what we're going to do let's hop back over to flutter flow now and let's start setting ourselves up for our custom widget so here we are back in Florida flow so let's now start creating this custom widget so on the left hand side here choose the custom code option and we pretty much got no custom code so this should be if you're creating a brand new project this is what it's going to look like down here you can see we've got custom widgets so we're going to now need to load up this particular custom widget with our QR code custom we're just we can hit the little add button up here we're going to go to widget okay and we're going to give our our kind of our widget a name okay so I'm going to call this uh generate QR code okay so it's called generate QR code and then on the right hand side here this is where we now need to start adding some parameters in okay so I'm just going to hit the add parameters option so one thing about a QR code of course is once it actually gets scanned it's going to need to do something okay so say for example you are creating an application that gets scanned by like a like like a ticket machine or something like that you the user will put their their kind of their mobile phone on the actual scanner the QR code is going to get scanned now calls behind the scenes the system that's actually scanning the QR code is going to make a call out to something okay it's going to take the data with inside that QR code and something is going to happen with it okay so with inside our example here it's just going to be a website address okay but that could be anything depending on your use case all right so what we're going to do is we're just going to call this data okay so I'm just going to pass the website address as I said to that and we need to take nullable off because we know that this is going to be a parameter that will always going to be required from within site so when we actually drag this custom widget into our UI we're gonna always gonna set the data parameter okay so just take another ball off and it's going to be a string of course and that's all that we need to do now the next bit we need to set up is this dependency now okay we need to tell this this this generate QR code um to actually bring in the package that we looked at with inside the um the actual pub.dev websites we now need to go and do that so let's move over to the QR barcode uh sort of page that you saw earlier on here and we just want to go up to this little copy option up here so just choose that and it's going to move to our clipboard the dependency information that we now need to bring into final flow so move back over to flutter flow where it says add dependency just hit add dependency and then all you simply need to do is just paste whatever you copied to the clipboard into the dependency section now that's pretty well my setup for everything we need to do we now want to generate the code with inside the middle here that's going to kind of be the the kind of like the boilerplate the the kind of the the the the kind of the structure of the widget that we now need to get ready to then start bringing more information in in order to set that widget up so hit the little option up here there's an option called view boilerplate code just choose that and you'll see the the guest generated here is kind of like the boilerplate of everything we need to start using with inside our applications just just hit the copy to editor and you'll see here that the actual editor in the middle gets populated with our generated boilerplate code so this as well now this is now ready for us now to start extending to be more specific about the use of the package that we've pulled in Okay so we've told flutter here that they were actually using this QR barcode so behind the scenes we know we're ready for it we now need to now start now padding this out with the code it's actually going to make the QR code actually get displayed with inside our application so let's move back over to pub.dev and let's start bringing that in now so they're back within pub.dev now you can see here we're back on the QR barcode page here and you can see we've got some various details that talk a little bit about examples how to use them of course if you're a developer you're going to be very very familiar with this kind of stuff but if you're not let's have a look at the example let's see what we can pull from that that will be more obvious to us so go to example and you can see here that actually if you look carefully between this and what we've actually got with inside a flutter flow there will be some similarities okay now what we need to look at is we need to say okay well what do we need to pull from this that will actually make this actual widget work now in this particular example um pretty well much none of this we're kind of actually interested in because this is just very specific to the example that's being displayed here but you can see here that we've actually got some some code here that drops down to color now we should all be familiar with inside flutterflow what a column is by now if you've been using photofo for a little bit so this is really you're just looking kind of more programmatically at what actual flood of flow is actually generating you from behind the scenes so what you've got to remember is that flutter flow is actually generating all of this code behind the scenes you just don't see it because you're you're working in a no code way okay but behind the scenes you should be able to draw some similarities with some of these names here like padding and column and all this kind of stuff so Colin we know that it's actually a vertically stacked almost like a container widget with inside a flood flow we know that everything we put inside a column is going to be vertically stacked but what it's actually stacking with inside this column and with inside the children itself is these two sections here now these two sections here are the specific packages and the widgets that are actually are part of this package that we want to use ourselves with inside flutter flow so what we need to do is we need to take these out okay and we need to bring these actually into our application okay and the way that we do that is we just simply um what I'm going to do actually here is I'm going to take the actual column itself so we need to look at you need to be a little bit sort of cautious of where the kind of the starting sort of like the sort of opening closing brackets are we know that the the square bracket we got there and the square bracket we got there is everything in between so we know we're going to want to we're going to want to take this so we want to take the color we know we've got a single opening uh sort of sort of bracket there so we want to take this down to this particular bracket just here okay so we're just we're literally just going to copy that now to the actual clipboard so let's just do a an apple C Ctrl V if you're on Windows and let's move over to our actual code here and we're going to want to actually put that just here so at the moment we're just returning back a container so in in programming world with inside flutter this is just really going to be something very similar to what you would use with inside uh flutter flow itself and it is just our container okay it doesn't contain any styling or anything like that we're going to replace this I okay so just take all of that and then just just do an apple V or control V just to paste that in now don't worry too much here about some of the the errors or the red or anything like that's being displayed and the reason why it's coming up at the moment because it doesn't know nothing about this QR code it's not standard okay doesn't know anything about it yet because we haven't told this widget to actually use these particular packages now if you go back to Pub Dev and go to the top here you can see here that we've got these kind of imports okay which is part of the actual package so what we need to do is whenever you're using any particular packages with inside pub.dev and you're trying to copy make sure you look for any packages that are referenced here that are related to the actual name that you've got here okay so just make sure you take these so we just want to copy this now because we know that's QR barcode barcode let's just copy those move back over to flutter flow and then what we want to do is we don't want to put them up here okay so it says here do not remove or modify the code above this is automatically generated okay where we want to put them is just here so it still means the same because these are just comments All right but we just want to put them just there okay so let's bring them in so that's pretty well I've bought those packages in for us now what I want to do at this particular point is I just want to save the actual widget itself so just hit the save widget like that say yes so if I hit the little we've still got a few uh sort of errors here so you can see here that we've kind of got some project issues here various bits cannot be passed the first thing we want to do is just try compiling the code so let's just compile the code that's going to take just a few moments there to compile and then everything should be good for me we likely might just need to put a semicolon here actually so in fact I think I'm just going to need to do up a little semicolon there let's get rid of that particular error because I didn't I forgot to copy that across so just hit the save again as you just one other thing that we need to do actually is just hit the little refresh option here because we pasted this in here we haven't actually hit the little refresh option so let's just do that let's move back out to compile code and everything should be good for us on the compilation so please be patient with the compiling it can take quite a while for it to actually do its thing so just bear with it a little bit excellent so things are looking good okay so up the top right here you can see it says no errors that's a really really good style I don't worry too much about why we've got some squiggly underlines that look a little bit more disastrous but um but that's just um flutter flow here just getting a little bit confused with the status of everything so pretty well much if we were to now drag and drop this particular widget with inside our UI the actual UI would actually work okay but let me talk to you about a few additional changes that we need to make so with inside this particular application and the packages that we've actually used you can actually generate QR codes in a couple of different ways okay you can see here that with inside these two widgets you can see here we've got two widgets that we're bringing in okay one called a QR code and one called a code now you can use these um in in in in in a very very simple way you can either choose to use a QR code okay where we're just literally passing in a website address here and it's just going to generate a QR code or we've got this one all called code which is going to pass some data in but it's also going to pass in this actual code Type okay now in inside our application we're going to want to actually in the future we might want to extend it to actually include a like a barcode because this particular package can actually do barcoding and a whole host of different barcodes but we know that um that flutterflow also does provide a barcode okay so if you wanted to you can actually take this particular one out so let's just take out the actual code one so let's just delete this line out we don't need this make sure you take the comma with it and then we're left then with just a QR code it's a really really basic and and that's all we need to do now of course every time you make a change here we're going to have to do a save and then we're going to have to actually do a compile again so off we go again we'll just hit the little compile button and then leave that to do its magic there we go it's got no errors everything's compiled for us now so what I'm going to do now is I'm just going to Simply get this actual widget running with inside the UI so let's go and do that now so here we are then back with inside the UI Builder and I'm going to move it over to this particular option this just up here called components choose choose components and then magically you can see that we've now got this custom code widget called generate QR code now I'm just going to grab hold of this I'm going to drag this over to our QR code container let's just drop that in there now you can see here magically we've actually now got this a QR code automatically generated this is the Fantastic thing about flutterfly because because flutter flow itself is built with inside flutter we can actually see almost at runtime here and we're not even actually we're in design mode actually we're not even actually running our application we can actually see the QR code get generated now if I was just to come along now and I was to scan that code to a mobile phone it will take me off to the website that was hard coded with inside the actual code itself you can see here we've got that actually in here so I can actually go over here now in fact let's move over to the uh the UI Builder so the widget train you can see here we've got generate QR code so I can just choose this particular generate here let's set some sizes on this okay so let's go down to the custom widget let's just choose 220 by 220 because that is the size of the actual container I think it I was 230 so let's uh let's just change that to 230. to 230 so we've now got the the actual QR code now generated of course we've got data dots we've got a data string here so if I was just type in a website address here okay www the digitalpro.co.uk was just a Shameless plug there for a redirect to my YouTube channel there but um the digitalpro.co.uk um now that won't do anything at this particular time but that's now all set up nicely in a moment when we get a hook our our custom widget up but pretty well much now if I was to run this in one mode the QR code will be magically working which is fantastic okay so now what we need to do now is we now need to go back into our custom widget and we need to now start enhancing it not only with hooking the data up to um to the actual so actually the QR code actually go to the website but we're also going to want to do to do some styling as well and the Fantastic thing about this particular package from pub.dev is it allows us to customize the look and feel of this particular QR code to just make it look a little bit more ink keeping with our application so let's head over to the custom code now let's start hooking some of these bits up so go back into our custom code here and I'm on the right hand sort of back into the code that we put in earlier on so what we need to do is we now need to get this a particular value hooked up to the actual data that we've got coming in so this is all just hard-coded at the moment and it's really straightforward to do we need to get a reference down here to what's up here okay so we know this is a parameter coming in and it's called Data now how do we do that with inside a custom widget well quite simply this is just a string right so we can actually just delete this out because not interested in that and I'm going to type in widget dot data simple as that so widget is referencing what we have up here okay so this just means that anything we put up here is then going to be referenced down here now this now means now that we've passed in a value as a parameter into our custom widget and we're passing it through actually into the actual QR code package itself and it's going to be inside it's going to be interpreted with inside this particular data so what we need to do we need to save it of course so we need we need then to compile it again so hit the compile code that's just going to do its thing and then the widget then should be fully supporting the fact that we can pass in a website address into the QR code itself so when I was having a little look closer at this particular QR code which I was thinking okay how can I actually style this how can I make it look a little bit more interesting with inside my application I don't just want to have like this big black QR code all right so I what I did was I kind of hovered my mouse over with inside the actual flutter flow editor here and it kind of gave me some interesting detail detail that I could actually look to utilize with inside the applications I've got to have a look here and I thought okay well look we can we can see some colors here we've got background color so um at the moment you can see here that transparent whenever it says equals you can see here that actually the background color by default is transparent well that's that's pretty useful of course it means if you wrap a container around your particular QR code whatever color you set the container then you know that actually the QR code is going to be kind of transparent and and show that color through and I had a look through here and I thought okay what bits can I sort of sort of look on to then I I saw these ones here called QR I style and QR data module style now the the QR I start now if you look at actually look at a QR code so let's um let's actually have a look here and go back to the UI here and once it pops up you can see here these are our eyes right so I'm thinking right okay well that looks like we can actually style these things up but we can also style this section up as well and which is which is quite smart we can actually apply some different colors to this so um how do we do that with inside our application so let's move back over to to um the actual the actual QR code code here and if we just um if we just come down here we know that we got some parameters some additional options should I say that is a part of this QR code so what I'm going to do is I'm going to actually now code up this qri style okay I'm going to give it some color so the way that you do that here with inside here and this way it all gets a little bit more interesting from a coding perspective is you now need to start adding some code in here okay so we know at the moment um we've got data that is just down here okay so you can see that we've got data whereabouts of data there it is at the top here we now need to do a comma and then we can actually then set this I style okay so here that's the kind of the type this is the actual name that we now need to reference I style so if we now do type in comma I style you can see here that we've got some some uh some context sort of completion here which is good I style and if you remember this is you need to type in QR I style and then you've got these this one here with the dot dot dot so this means that we can actually now pass some values or reference some values in here that will actually allow us to set up those particular parameters so we just do this here you can see here that as soon as I do an Open Bracket we can set the color and we can set the eye shape now this is fantastic because the eye shape can either be circular or it can be actually square if you remember back to the actual QR code you've got the eyes in the corners that are currently Square we can actually you make those circular as well which is really really smart let's focus our attention on color first so let's just choose color and now of course what we're going to want to do is we now we want we're going to want to pass a color actually into our custom widgets how do we do that well we're going to have to extend our parameters up here in order to support that so let's now make some adjustments to our our custom widget to do that so let's go over to the right hand side let's hit the add parameters option and we're going to add another new parameter in here okay and we're going to call this one I style color just like that okay we're going to set the type to be an actual type of color so just choose a color there we don't want to make it nullable we're always going to pass a value in okay so the parameter is now set up but this is where we need to be a little bit careful now because if we're not careful here we can actually wipe out all of the code that we've actually entered into this middle section so I'm going to show you a little technique that I use just to replace the parameters when we make these type of changes okay so I'm going to hit the little option up here to view the boilerplate code and if you remember what this is now doing this is now generating that code for us and what I always do is I just scroll down here and I just literally select this down to the actual parameter here so we've kind of got what the kind of the setup here of the parameters and then we've actually got the parameters themselves I'm just going to right click and I'm just going to say copy that okay I'm going to close this I'm going to cancel this if I say copy to editor then I'm going to wipe out all of the code that I've got inside my editor with this boilerplate so just cancel this I'm just going to go up here I'm just going to select all of this and I'm just going to right click and I'm just going to paste over the top of it like that so that's good so we've now got our eye style color now what we need to do is we now need to pass in the eye style color down to the actual qri style here where we selected color now if you remember we did with the widget odd data we just need to do exactly the same now so we type in widget Dot and then we're going to say I style color excellent that is as simple as it comes right we can actually now set our color of our eye style outside of the um with Insight at the actual UI Builder itself which is which is fantastic so if I now save this now um what's nice have we actually say that she was really quite nice is that um the the flood flow actually sort of organizes our code it kind of like makes it a little bit more pretty um for us we can actually see a little bit more structured now okay now just hit on the compile of course we now need to compile we need to do all that kind of stuff now why this is compiling I could now carry on and make some additional change so as we can see we've got the eye style set but what actually about the actual data the actual data itself the actual the other part of the QR code we're going to want to style that up now if I move back over to a QR code then we know that we've got one here called QR a data module style which is which is this one here data module style so I just need to go after this comma here and type in data module style you see the autocomplete is uh is bringing out the intelli sensors bringing that up for us now we just need to type here QR data module style so just choose this one here we then can then open this up with with our bracket so we can say color so now we can do exactly the same thing again we can actually will now add a brand new parameter in and we're going to call this one up here we're going to call this one data we're just going to call this data module style color like that it's not going to be nullable we're going to take the change the type from a string to the color itself so it's now set for us we need to go back up here of course we now need to just take this little bit here just copy this down from this bit here down to here just do an apple C or control C depending if you're on Windows just hit cancel and then we're going to come back up here and then paste this in like so so we've now got our data module style color so we can now take this just copy that again come down to the color here type in widget Dot and then just select data module style color so that's all in there for us we're just passing that in really really simple stuff and that should be all that we need to do so if I just hit the save here and then let's hit the compile again and we should be good to go so we'll fire this up now once that's actually compiled let's quickly fire this up into test mode in fact before we do that we'll set the properties actually with inside the UI Builder just to make sure that we've got some colors set for us so we can see that appear with inside our test application so now back with inside the widget tree let's choose our generate QR code you can see that we haven't actually got a QR code generated here it's probably because the actual widget has now got a problem because we're not passing any colors in we now need to do that here so let's set the I style color so just choose that and I'm going to set this to be my primary color and then I'm going to come down here to this particular data module style color and I'm going to set this to be my informational one here and there we go so as you can see there we've got this this lovely little uh QR code which has got nicely rounded uh kind of uh sort of sections here which looks I'm pretty pretty awesome so of course we're going to customize our QR code very very shortly with um with some enhancements just to kind of make that square or circular and then of course you could have those choices with inside your application let's really just fire this up because this is obviously running with inside the design view let's quickly just run this in testimony just to make sure that everything is working for us there we go test mode is looking just like we see in the design view which is fantastic so let's now make the enhancements to our application now to handle the option to choose whether we want a square representation or we want a circuit representation of our QR code let's do that now okay let's Now work on the Square or circuit representation so let's move over to our custom code option on the left here and then now we're going to want to now add a brand new parameter in okay we're going to call this one is square okay so if it's set as true then we know that actually all of our QR code elements are going to be then Square so let's go to add parameters here on the right hand side let's type in is square like that and of course this type is going to be a Boolean true or false if it's true it's going to be square let's just take the nullable off because we're not interested in that let's move over to the boilerplate option up here and let's just be careful just to copy this particular section just do an apple C control C and let's cancel that and there's just a paste this just over the top of these here so we get our parameter now in motion so here it is now we're ready to now use that now now with inside our QR code option in fact within our qri style section and our QR module style session you can see if I just hover over this here you can see that I'm just at the top here we've got this option for or QR I shape and we've got similar something down here if I just hover over that you can see QR data if you just move over here QR data module shape now we're going to set the uh whether it's circular or Square with inside each of these let's focus on the qri star so I'm going to do is I'm going to do a comma and I'm going to say I shape like that and then you can see that's just come up there so we know that we are valid so what I'm going to do now I'm going to make a decision at this point I'm going to say am I square or am I circular okay so the way that we do that is very simply we just say widget okay so we're referencing the a parameter that's just up the top there we're going to say is square okay and we're going to do a space and we're going to say we're going to just do a little question mark here so we're going to say this point if this set is true which is what this is doing then we're going to want to do this otherwise we're going to want to do this so the way that we do that if we just say QR and then we say I style okay which is just that one here we're going to say this one is going to be square so we're just going to choose that one so we're going to say if a set is true then set the QR shape as Square now if I do a colon here okay not a semicolon but just a colon I can say otherwise this this is what this basically means is we're going to say QR eye shape okay is going to be Circle so we've made a decision here just to recap then we're going to say if this is true then we're going to want to set it as Square this little indicator is saying otherwise we are going to set it as a circle so that's as complex as it gets okay we're going to need to do the same thing down here so just to make this really really straightforward is if I just just copy this here I like that let's just paste that in here like that it's going to come up with an error so let's just change this now we're going to say uh this is going to be the data module style shape we're going to still say is it Square because if we set it once we're going to want it to apply to both and then we're just going to change these then to say and Q R data module module shape is going to be a square of course just delete that off here or just go off the screen a little bit and we're just going to want to copy this here and we're going to want to just place that there so there we go we've just done it I've done the representation which is equivalent to this up here so where's the square and then we're going to say module the multiple shape is square or a circular that's all that we actually need to do so let's now save this and let's compile once more so that leave that to compile and then we should be then good to then now then update our parameters and just set the is a square to be either square or true or false if we want to remain as circular so you go that's all compiled less moved over to the widget tree here you can see that the barcode has gone great there's clearly a problem so let's set some values up here we just want to say down here that this is going to be is a square so you can see here if I take that off you can see that it's circular so it's really really quite straightforward there with inside our application so I don't even need to even run this up because you can see here that actually what it's doing which is absolutely fantastic so of course that is I'm pretty well much here that's pretty much how to get a QR code actually added to your application I know I've taken this uh pretty pretty step by step but hopefully it's gave you a little bit of insight in how you can configure up a custom widget so there you go that's how to create QR codes with inside flutter flow please do check the link in the description because I've got the starter project there if you want to follow along and of course I've got the final completed project there as well if you want to compare the output please do like the video and if you love The no codes of space please do subscribe to the channel as well I've got so much content on my channel I'm sure there's something there for you and of course some full series as well if you want to follow along piecemeal on how to build flutterflow applications so um until the next video I'll see you soon

Channel: The Digital Pro's NoCode Academy

Views: 8,116

Keywords: android app development, flutterflow, flutterflow crashcourse, flutterflow marketplace, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, ios app development, learn flutterflow, no code tutorial, nocode tutorial, nocode tutorial for beginners, qr codes, qr codes in flutterflow

Id: IKdIhPfkHBY

Length: 33min 33sec (2013 seconds)

Published: Sat Jul 01 2023