#FlutterFlow Custom Widget Screenshot to Users Device - Walkthrough!

so welcome to another video with inside the academy and in this one we are going to snapshot widgets to the users gallery on their mobile device now this is a fantastic technique if you are looking to kind of customize a little bit of your UI and then you want to then save that to the user's device and that could be anything now in this particular example we're using a QR code we generate a QR code let's now save it to the user's device and of course you could shape that up however you would like this is a technique that no doubt you would probably want to use at some point with inside your application so let's get into the video and let's get cracking okay so you've been watching plenty of my previous content you're probably thinking to yourself I've seen this sample before but you'll be absolutely right this is the flood oflow QR code application that produces these beautiful looking QR codes but in this video there's something very different and that is that save code button because soon as I click that save code button then that QR code is going to be then stored with inside the user's device and in this case it's going to be in the photo library so the great thing about this is that although we're using this sample to save the QR code you can use these techniques in any of your own applications to save certain characteristics of your UI also to the user's device that this is actually running on so what's going to happen is we're going to go along here we're going to hit the save code button I've got this little component that sort of says it's being now saved I can Now swipe up from the bottom here I can go across here into then the photos I can click on that and there is the QR code all safely then stored inside the user user's device so no doubt there's Pro probably plenty of use case for this type of functionality now in this particular video this is going to be very much a low code kind of walk through here because we kind of got some custom widgets here we're going to build upon what we learned previously with the sample that we got so please do check the link in the description do grab yourself a start a project and we can walk through this together and hopefully you'll learn a little bit along the way and of course some of the recent features has been added to flut oflow to enhance custom widgets so let's now get into the video Let's down our walk through so as always in my videos I'd like to sort of talk about the starter project the link that is available in the description will kind of gain you access to this particular project in fluto so please do go ahead and cloner this is what you're going to be presented with on the left hand side there in the widget tree all of the typical widgets that kind of make up the look and feel of the user interface that you see there so I'll try to make it obviously style out a little bit to make it look a bit more like a realistic application but the one that's some really important here is this generate QR code this is the custom widget this is the one that's going to kind of do a lot of the work for us in this particular video where we're going to extend that with this additional functionality because the objective of course is to get users to be able to save that QR code to their device so if you look at this QR code here this is the one that as I said this is the widget and this is then available here on the left hand side then custom code and we've got this custom widget Cod to generate a QR code code now what you presented on screen here is obviously flut code here and what we're going to do is we're going to walk through um very slowly on actually enhancing this to have all of the features that we need because when we try to save these QR codes out to the device that's not something that flood oflow supports natively so we're going to kind of build out this code here but I'll try and explain as we go along and so hopefully it will kind of be very very clear so on the right hand side here we all of these parameters here we got the data so this could be like a website address or a reference number whatever is going to be is going to be then uh available inside that QR code that's what we're passing in as some data so we've got some styling as well we got some kind of the eye style the data style that's really kind of just the look and feel of the actual uh sort of Custer widget itself and then we've got this indicator here to determine whether it's actually true or false and you can see here that um this particular one is by True by default so of course you can override that if you wanted that to not be square so we got kind of got the width and height being passed in as standard here and then here are the four parameters that's kind of referenced to of course as you kind of build out these particular kind of custom widgets as the more and more parameters you add here you just need to make sure you add them over here certainly if you have already kind of generated this particular kind of widget you need to make sure that these two are aligned and then of course the rest of it is kind of just standard kind of flutter code here and then we're here this is the kind of the widget the overall kind of widget that we're returning this is a column as we know everything's obviously vertically stacked here and then we've got one child in this particular example here which is the QR code itself and all of these are all very very specific for this particular third party dependency that we're using so we've got this QR barcode sort dependency that we pulled just from pop dodev and that's given us this functionality so we're not going to actually change any of the functionality of this particular uh sort of library but we're going to be introducing some additional libraries that's going to kind of do some of the extra work that we needed to do and we're also going to put some additional flut flutter code in here to then kind of represent kind of the button that the user needs to click on and all that kind of stuff and what we're also going to do in this particular video is we're going to cover a callback that's going to happen here so um what we do when when the button is is set up with inside this custom code when the user hits that particular button we can then kind of trigger a kind of an action that we can then make available with inside the actual home page of our application and then we can add in additional actions to then uh sort of happen once the users actually click the button with inside this particular kind of Uh custom widget now that's a a pretty recent feature that's been added to flood of flow B we're going to walk through that okay so that's a bit of a million miles an hour of what we're going to kind of do let's get into the next bit and we'll start talking more about the changes that we're going to make to this particular widget okay before we go our hands dirty and start cutting some code let's pop over to Pub dodev and have a look at the two additional packages that we're going to use in this particular project the first one is called screen screenshot just hit enter on that one here just select that here now quite simply what this is going to allow us to do is it's going to allow us to kind of Define a region with inside our particular flood oflow application which in this case is going to be a kind of container that's going to contain the QR code and we can make that then available to then be saved to the gallery and we're going to move on to another package that's going to allow us to do that so I'm going to spay you the detail here but certainly go over and have a look at this here there's some some useful features to this particular package and we're going to use one of them in this particular video now if I go back here let's have a look at the next one we're look at image gallery uh saver like that now this particular one here is the top one we're going to be using as you can see I'm just going to select that again we're going to use certain features of this particular package that's going to then save that image that we've got captured and we're going to then save this to then the actual gallery of the device itself so again going to spay the detail but there's some useful features of this particular package is well worth exploring um on your own um when you got some time so let's let's now move back over to flood oflow let's get these packages therefore installed inside flood oflow and then we can start then cutting the code itself okay so back in flood oflow back into our custom widget let's add a brand new dependency hit the add dependency let's just move over then to the screenshot let's go up here and copy this particular one let's go back and I'm just going to paste that just in here like that let's add another dependency in let's move across now let's go to the image gallery just copy that and then go back and it's just a past that in there now once you've done that of course just hit the little refresh and those dependencies will then be referen of inside our flood oflow application so once we got the dependencies added of course we now need to reference them at the top here on our Imports now what I tend to do is here I just going to hit the sort of the enter key here we obviously going make sure we will do every all of our kind of custom coding all needs to be below this particular comment here okay so we can now move back over to those particular packages what I like to is I tend to go to the kind of the example here let's find the one that we need so typically we would need to kind of reference it like that so just copy that let's move back over let's just paste that in here itself let's move back over again to then the uh the kind of the image saver let's go to the example and of course we can just pull that one in as well so let's see if we can find I think it's this one here just just grab a hold of that there like that and copy that in now chances are these particular packages we likely uh going to need some additional ones so just certainly do check out the samples there to make sure there's nothing additional we will need to add in some additional uh kind of imports in here as well so I'm just going to scroll down a little bit now so we now need to kind of add some sort of reference in here so this is kind of where most of the work is now going to happen with inside this particular sample so we've added this kind of screenshot kind of dependency in there we need to kind of get a reference to kind of like the controller the controller is going to kind of provide us access to everything we need with inside our particular widget itself okay so this is going to be called a screen uh shot control controller that is what is provided by that particular dependency if you go have look at the samples you'll see that so I'm just going to type in here screenshot controller like that equals and then screenshot controller like that and just put the double brackets in so that's going to kind of create us a new instance of something called a screenshot controller okay so the third party dependency that we included the screenshot it's kind of made available to us a widget that we can actually now use with inside this particular area just here now what this what this actual screenshot widget is actually providing us is and or it's basically saying is that anything that we put with inside it is what is going to capture as part of that particular screenshot so here we got a column we got the QR code so what we kind of want to do is we want to kind of wrap this kind of screenshot around the QR code and we need to put a container in there as well and there's a reason for that because we don't want to kind of we want to put a container have a nice kind of white background if we don't kind of put a container with a white background we're going to kind of get this what looks like a horrible transparent looking kind of widget that is going to capture so I'm going to wrap a container around in a second but what we're going to do now is we're just going to put in here a screenshot so let's just type that in a screenshot like that now we're going to kind of open that there and we're just going to press enter now this is going to have a controller okay so let's uh type in a controller like that and of course we're going to then sort of Select here the screenshot controller from the top there like that simple as that now we're going to comma that and and here of course of inside the screenshot itself is going to have a child and the child obviously will be then the QR code itself so I like to this a little bit more sort of slowly kind of build this out a little bit so what I'm going to do is I'm just going to grab a hold of the QR code here I'm just going to do an apple X here of course I'm on an Apple here I'm just going to paste that in here like that now of course the great thing is if I just hit the save up here if we know that um our kind of our coding is actually conforms correctly the syntax is correct we kind of got everything set up for us by hitting save here we get no errors and you can see then the visual styling kind of uh sort of changes straight away we kind of get the kind of the pretty formatting that it's doing so we know that our code is pretty accurate with what we've got here at the moment so of course we've got the QR code but what we kind want to do is we want to kind of wrap a container around it so I'm just going to go to the child here like this and I'm just going to drop that down here I'm going to go back up to child here I'm say okay I'm going to have a container now I'm going to open that up I'm going to hit that down here like that I'm going to get hold of the C R code again and I'm just going to then sort of Apple X that put that in there like that I'm just going to put a little comma here and a comma here and then of course I just now save that we've now got a container now that's wrapped around our QR code okay so next up we kind of want to like decorate our container now if you know anything about flutter of course and you've been coding flutter then you kind of know how to do this but we need to apply a decoration to our container again if you are using flutter flow to kind of create kind of these these widgets inside the UI then all this is really doing is is writing this code behind the scenes and I'll show you a little technique in a minute actually that might actually help you when you're kind of sort of working in adding sort of like widgets actually into the custom code of actually writing it in the first place but um let's move on and now let's do the decoration so the way that typically works is with inside a container itself we have um a decoration like that now what we have is we have a box decoration like this and what we're going to do we're going to open up that okay now with' inside the the actual decoration itself we can have a color like that and of course course what we're going to do is we're going to use our kind of our theme at this particular point so here we're going to go flutter flow like that and we're going to put a theme on there dot of context okay and we're going to put a little dot there like that and we're going to say the secondary uh second oh secondary I can spell it right secondary background like that just do a comma so that's going to pull kind of like the color from our theming so you could have primary background if you want or secondary background or any of the other kind of themes uh sort styles that you set you can actually apply them here so let's move on then and choose the Border kind of radius like that so the Border radius we're just going to do a border radius uh like that and we're going to say this is going to be circular like that and just open that up and that's going to be of six like that so it just gives us um a reasonable kind of like decoration we just need to put a sort of a comma here and of course again of the actual kind of the container itself of course a container is going to have to have a child so we're just going to put a child here do a little colon and of course that is going to be then our QR code and I can just bring that up like that now if I just hit the save now then you can see here that's pretty well much not sort sh thrown any errors or anything like that so as I said we wrapped the screenshot around it so we know that everything we've inside this screenshot is now going to be captured the container is going to be in our case our secondary background is going to be white and of course it's then going to capture that and of course then we've got the actual QR code itself okay so save you the pain of watching me type keystroke by keystroke I'm going to past some code in now and then we're going to walk through it before we start putting the actual meat of this code in so you know here we know before as I said we got the screenshot here now that's going to kind of allow us to capture everything that's actually in it so that's fine so we're going to come back to that shortly we don't need to make any more kind of coding changes in this particular area here so we can kind of just minimize that out now we know obviously of course of column we've got this this this children here and this is an array here and you can see here that we've got kind of One widget in there we're now going to add another set of widgets in there I'm going to past this code in and I'm going to talk you through exactly what it's doing so we've got some padding going on here so we're wrapping a whole padding around it we kind of got eight kind of pixels um sort of to represent a little bit of spacing now um for our actual button that we're going to add in and then we've got a row here so we're going to kind of Pat out our row here and you can see here that we've inside the row here we're setting the main AIS alignment so anything that's actually inside that particular row is going to be centrally positioned now of course a row can have multiple widgets in as we already know and in this particular case here we've got this one called a size box now what really what this is doing is this is basically saying right um it's creating a wrapper really for our our actual button we've got this button that we've actually created and we're basically saying right this elevated button is going to be constrained by 140 pixels in width by 30 pixels in height if I didn't include this in here then what'll happen is is that button will just expand right out to the size of the row so we're just enforcing those kind of constraints for our actual button itself now in the actual button itself so this is just a standard flutter button okay we've kind of got a child here which is a bit of text here which is really just kind of it's just going to say save code it's just a very simple kind of uh piece of text here and then of course we have some styling going on now with inside this particular kind of widget so we're basically saying right here we're getting hold of the flood the the the flood oflow theme and we're saying of the context as Prim is this is going to pull in our primary color and set that as our background color we're going to remove elevation out of that of course these again all properties that you should be quite familiar with if you're using flood oflow so we're enforcing zero elevation so be nice and flat with inside the UI and of course here what we're now saying is is any of the text now provide this level of styling to it so we're saying right we're going to go back to our theme we're going to kind of get the title small we're going to override it we're going to set the actual font Family itself and then of course we're going to set the color to be white so of course all of this kind of uh sort of styling and stuff like that is all easily accessible for you in another way with inside of flood oflow and I'll show you kind of how you can go into the code you can kind of pull this stuff out during the design and actually put it with inside these actual custom widgets so this is pretty well much it that is all that we need to do in terms from a visual styling perspective we now need to get into the meat and we now need to start actually making this button kind of do stuff so let's now move on to that bit now okay so let's start now working on our onpressed event this is when the user hits the actual button itself you can see here now that I'm just going to kind of paste a little bit of code in here so it just saves you see me a type okay so oh it's just got a little bit formatted wrong there let's bring that in right okay so what this is kind of doing is this is now invoking the screenshot controller kind of capture method and what that's kind of doing is is that we've kind of got we've kind of created a reference up here to our screenshot controller which we've then referenced with inside our screenshot itself so here is the controller so by accessing this is accessing this particular widget here okay so just kind of keep that one in the back of your mind so now I've kind of got a reference to that I can now say right now go and do the capture now here it seems like it's putting a delay in here so looking like it's it's waiting for kind of like the UI to kind of sort of catch up or do something like that that's why this delay is here I'm not entirely sure fully kind of what that's doing but it seems like that's what it's doing to me and what it's doing is this asyn of waight is kind of saying right okay let's wait for the response to come back from this screenshot controller kind of pause execution in this onpressed event um and wait for the result to come back before we then continue and what that is really doing is is that's going to return us back kind of like this this this bite array of um kind of like you know ones and zeros that we're going to then use to then save as an image to the actual Gallery itself so that's exactly what that is doing so next up we then now need to move on and say okay right well have I actually got an image or have I not is it null if it's not null then I can then go on and move on and then actually then persist that to the actual Gallery itself so let's now go and kind of cut that that that code so I'm just going to say if image is not equal to null like that I'm then going to say right let's now we know we think we've now got that particular image because it's not null we can now start doing something with it so what I'm going to do now is I'm going to kind of like create like a a formatted data I'm going to kind of like a sort of sort tag on the data to the actual sort of file name that I'm going to kind of give it just so it kind of gives it a unique name okay so going to be the date and time okay just paste a line in here so what this is going to do now this is going to create us this formatted date which is just going to be a string so as you can see there I've passed in sort of DD mm y y hour hour minute minute and I'm just kind of formatting at the date of time now so I'm just going to return back kind of just like a unique date and time so once I've got that of course I'm going to then want to then move on now and then apply that to the actual file name itself so let's now create the file name so I'm going to say a file name like that equals and I'm going to say sort of QR sort of code like that underscore and I'm going to do a dollar symbol and I'm just going to type in formatted date like that so that is going to be then represented as the actual file name say so at least I just given it that kind of that unique name so now that I've got all of that set up for me what I now need to do is I now need to to call out now to this this this then this dependency this image gallery sa sort of third party library to now actually do the kind of the saving to the actual sort of gallery itself so I'm just going to say final result and I'm going to say equals I'm going to do another await because of course we're going to wait for the execution of this to complete and we're going to say image gallery uh saver okay dot and then we're going to say save image itself okay you're going to do a a sort of opening ETS there now we're going to need to pass in the image itself so this is what kind of what we've got a kind of reference just up above okay this is kind of like our bite array comma and then what we can do is there's some properties on this particular kind of uh this kind of save image kind of method that's going to allow us to set the actual quality itself so I'm just going to say 80 here um it's going to be kind of like a a JPEG comma name and then of course this is where we just need to then pass in our actual file name itself so that's pretty well much all that we need to do so what I'm going to do then I'm going to make an assumption here that that is kind of been sort of persisted um and we have a result that's come back and then now of course what we can then do is we can then now work on okay once we've now saved that image into the gallery what then actually happens well what we're going to want to do now is we're going to kind of want to kind of trigger a kind of like an action now that we can then hook on to outside of this particular custom widget and then we can carry on the work with inside of flood oflow sou now that's using a kind of a new feature that's been introduced very very recently which will allow us to actually create a new kind of parameter on the right hand side which will be of type action and um so let's now move on to that section now and start hooking up that particular action and then we'll come back here and we'll come and add in the additional code okay so we're now ready to add in a brand new parameter on the right hand side but of course at the moment we've kind of fully loaded this this out with code now there's a bit of a an issue of inside flood oflow that if I was to come along now and try adding in a parameter on the right hand side there'll be a discrepancy it'll identify a discrepancy between the parameters here and the code that I've got here so what we're going to have to do is we're going to have to add in the parameter and make sure that that then is applied inside the custom code before we actually hit the save button so let's go let's now move up and do that now so firstly let's add the parameter in so just to hit add parameter now this parameter is going to be on Save action okay so that's what we're going to call it we're going to change the type we're going to move down here to action itself and of course that can remain nullable cuz we're going to check for that nullable state very shortly of course if it's not null we can then trigger it if not don't worry about it so now that is being added in we now need to make some changes inside our code itself so just move over to the right hand side here let's just do a car return here and let's put in this particular sort of uh sort of parameter here so here this is going to be this on Save action like that just need to make sure we put a comma after the true and then just down here on the final we also need to do this as well so we're going to type in final now this is going to be a future and it's going to be of course a function so just uh do open and closing brackets now do a little question mark here because this is going to kind of represent that this actually could be null so let's now now type in onsave action like that and just put a little semicolon there and we are all good now if I now hit the save here this should all correctly save for me with no discrepancies now if of course if I had hit that previously without putting this in then this particular parameter would have probably have disappeared that's certainly the the behavior that I've been seeing anyway so that's all in place we can just sort of minimize that there and we are good so we've now got that available to us and we can now move back down into our code and we can now work out what do we need to do now to actually invoke that particular action so just uh move back down here so I'm just going to do an if and I'm going to say widget. onsave action okay and we're going to say is not equal to null like that so we know that we've actually passed it in here and of course we can now invoke it now what we need to do here is we need to do an await here and we're going to say widget and then we're going to say on Save action like that and we just need to do then a explanation mark and then close that in okay so instent I'll just put that kind of explanation mark here that I've just popped in here now this is really just telling the dark compiler that I'm pretty confident at that point that that particular onsave action is not going to be null and it's not going to be null because I've kind of wrapped this not equals to null around it so there's kind of no misunderstandings between the code and the compiler that that is definitely going to have a nonnull value okay so let's now save the widget up the top hit save there it's not come up with any kind of errors or any kind of issues on screen we can now compile it so let's now compile that now that's going to take a while to compile now hopefully fingers crossed that that's not going to come back with any particular errors if it does we can go and uh sort of seek those out and kind of sort those out so let's just wait for that to come back okay looks like we've got some errors that's fine let's have a look at that it's probably my dodgy coding there okay so we got some talking about the screenshot controller okay likely to be a typo there what else we got going on uh oh I spelled circular WR there we go um yeah that's fine so it looks like I've got some errors so let's go and crack that it's all good to have these errors when we're kind of doing a bit of Live code in so you can see here that I've called this wrong so screenshot control if you probably go and look at the kind of the the reference material that's probably the reason why so we also spelled the word circular wrong so where did we uh where do we use that in here so probably up on the container wasn't it let's have a look here there we go circular so let's just type in this R cirular like that there we go let's try compiling again let's save that let's hit the X here let's say try compiling again and let's hopefully see if we've cleared those erors if not we'll come back again and we'll make some more Corrections okay looks like we got some more let's have a look and see what this is telling us now so we've got the method screenshot isn't defined for type generate QR Tri TR the name in screen shot here I'm not quite sure undefine name screenshot controller w i kind of uh made more mistakes here let's have a look here here aha so is it like looking like I've called this one screens shot that should probably just be a screenshot Let's uh let's just check here screenshot controller screenshot controller okay so that's looking good let's hit the save again let's go again so there's nothing like a few little mistakes as we as we go along in fact as I'm looking at it here I think this actually needs to be called a screenshot like that there we go hit the save again let's just do the uh the kind of the compile again is that just going to work for me there we go off it goes let's try that now so there we go we're just being caught out there by not getting our references right there that's probably just me thinking on getting it right from remembering the documentation so uh definitely worth there um sort of crosschecking the documentations at least the examples that you've got with inside the P Pub dodev so let's hopefully let's see if this comes back and corrects any more or at least identifies if we' got any more typos wow okay so we're still got problems let's have a look here let's see what I've done now uh we've got looks like we got a typo here at line 89 so our screenshot controller is called that how have I spelled that line 89 or there or thereabouts it's never super accurate so a there we go H is it screen oh there we go another typo there we go got a uppercase s that's what I need let's I'll save again and let's try going again wow there we go we're finally there we've got the little check there that's what we're waiting for and just one of a new sort of feature that's coming to flut flow which you may not have spotted and that is this little preview that kind of appears here so of course now that this is all correctly compiled we can actually preview the custom widget if you hit the little preview option then very shortly hopefully it should render the widget there it is so we're getting a kind of like a good representation obviously we haven't got the background there or anything like that but it's kind of showing you kind of really pretty well much what it looks like it's obviously not functional it's not going to do anything um but that is looking pretty pretty good so just little nice little feature there that they've got of inside of flood flow let's now move back to the uh the actual page itself and let's start now configuring up the actions that we're going to now have that from that callback let's go and do that now okay so back we're in then our page on the left hand side we got the we actual the generate QR code this is obviously our custom widget on the right hand side I just scroll down here we've now got this onsave action callback if I just open that we're now into our typical action flow editor I'm going to add an action on here I'm just going to search here for hap tick like that so we get some nice feedback back if we running this on our mobile phone and then the next one we're going to do is we're then going to do an add action we're going to load up a sort of a custom dialog I'm just going to type in dialogue here and I'm going to load up this custom dialogue and I'm going to select the components I've got one already in this particular project which is the confirm the confirmation save component and uh this has got a specific sort of width and height we're just going to be 300 and of course 80 on the height itself now what we're going to do the default alignment is going to be the top we're going to align with the target widget so this is just going to be below the actual custom widget itself so that's good of course we're inside this particular component we're padding a little bit at the top as well just to push it a little bit down there so that is good we're just going to put um any sort of non-blocking activity on here so that kind of widget is just going to kind of play out do its own thing and then if there's any other further action in this particular action flow editor then they could be carried out as well so I've just put non-blocking on there so that is it so now if I were to now fire this up and out in the test mode you're not going to see the result of that callback because this is really designed for the actual web there's no kind of functionality in here that's going to work on the web itself because this is all to do with saving and persisting these values to an actual mobile device itself so you'll be able to fire this up you'll get to see this particular result you'll get to see this save code button but when you click on it it's just not going to do anything so please do um if you depending OB what plan that you have with inside a flood oflow itself then please do kind of pop up here and you can download the code itself and you can kind of run that up with inside flut locally you can push it obviously to a GitHub repo or you can download the APK if you download the APK it will build you kind of like this this distribution file and um just if you really want to test that on a real device then my tip there is to download the APK use something like Google Drive youve got an Android phone primarily use something like Google drive to then copy that over to to Google Drive go onto your mobile device download the APK on your mobile device install it and then you can then run the application on the actual device itself of course with an iOS simulator um that's one way of testing the application but testing on an on on an iOS device is a little bit more involved because you really need to get the code back down into your your Mac to then load up xcode and kind of get that running Within the simulator itself or actually connected to a mobile device depending on how you've kind of got that set up so the easiest way to test these things is by having an Android device and downloading the APK and getting that installed so just before we finish this video I just wanted to mention a little bit about what I was kind of referencing earlier about kind of getting hold of some kind of flood oflow generated code and applying that to your custom widgets so one little tip that I can give you is that if you move over to the actual little developer menu up here and you go to the view code section you can see here this is all of the code that's being currently generated for this particular Page by a flood flow South now this is really just flood of code right so what you can do is you can kind of come in here and you can um sort of look at perhaps you may for example in in your sort of custom wi you might want to apply some padding so what you can do is you can copy and paste this area here here's your child here's your container you can kind of grab hold of this you can kind of copy and paste that into your custom code if you're kind of looking to get a hold of the themes and all that kind of stuff you can do that so long as you make sure that you are referencing these particular some of these inputs so for example if you're looking to use the themes with inside your custom widget then just make sure that you grab hold of things like the import up here so you can copy and paste that into your custom widget at the top just to make sure you've kind of got that in there so there's lots that you can sort of capture from here and you can kind of move into the custom widget itself so just you just might find that particularly handy in your work so that's that there all good so that's pretty much it for this particular video hopefully you found that really really useful of course as I said you can kind of use the kind of the screenshot there to capture all different types of widgets that you might have on your particular UI um again really depending on what your use case is in your application but this is quite a good one I think that if you were trying to provide the ability for a user to kind of save their Qi QR code locally on their device that they can then retrieve later and remember I excluded the save code button from the actual screenshot itself but you could if you wanted to put a nice big title in here um you could if you really really wanted to have the whole of this here as a custom widget and kind of make it look a lot more nicer as an image that could be then saved onto the user's device as well and one more final thing with inside flat flow as well that you may find that you would need to do if you go over to the settings of your particular project and go to permissions it's likely that you're going to need to put some kind of message in here um in order for the photo library to gain access um as far as permissions is concerned for both iOS and play store so just make sure you kind of put a message in here and kind of activate the little toggle there that's something you likely going to need as well so there you go hopefully you found this particular video useful please do as always check the link in the description because of course you can then download this particular project as a final version as well and also as well please do check out the digital Pros no code academy as well because there's lots of good information in there and of course more of this type of content coming with inside that Community as well so uh yeah and of course if you've been watching me on YouTube then please also subscribe to the channel as well CU there's lots more content coming there in the future as well so until the next video I'll see you [Music] soon

Channel: The Digital Pro's NoCode Academy

Views: 2,200

Keywords: android app development, flutterflow, flutterflow crashcourse, 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, flutterflow components, flutterflow app builder, flutterflow callback parameters, callbacks, custom widgets, custom widgets callback

Id: agjX9wGewKA

Length: 34min 49sec (2089 seconds)

Published: Thu Feb 22 2024