Create and Download Widget Screenshots in @FlutterFlow

hello everyone thank you very much for joining in I'm Dimitri and today we are going to talk about uh how you can download any widget out there uh using fluid flow as a JPEG image now the jpeg storage PNG image as an image and I think you can change it but in this particular case we'll use a PNG image and to decode it's uh I'll show you the code and I'll show you how this code works and we will take uh like a couple of widgets will actually give you I'll give you an example with a couple of widgets and we will actually use a couple of packages to do that and uh yeah without further Ado let's jump and actually see how you can do that and before actually we jump just want to let you know that all the code that I show you here in this video will be available in my GitHub page so if you haven't started my GitHub page already please do that and you like I said you'll find the code in the description below and it will be in my GitHub page and there is one more thing I forgot to mention you actually if you want to know how I built this and if I want if you want to know how I struggle to build it uh you can actually watch uh the first floor quests and there is QR codes and downloading widget as image part one and then you can watch part two as well so you can watch about them if you want to know how I built this code in the first place and before I actually show you first the code let me actually show you first how this works I have this simple page who has only two things in it it has this is a text widget and it says hello from photo flow and this is actually a text widget and you can actually see it from the code if I just go back to the code you can actually just quickly see that this is a text text widget sorry and this is the tech switch and then if I switch here and if I click this button you actually not see it but an image is downloaded uh which is the image of the text widget and if I switch back to images for example and if I upload in the assets if I upload the image you'll probably see it that the image was downloaded and you have actually upload it right now and you should see the image being uploaded exactly this is the image coming from the text widget as I said so the text widget is converted to image and then download it as PNG and a very important thing in order to test that make sure you deploy this for web or test it in a mobile app because this will actually not work in run mode or test mode so make sure that you test it in web publishing so test it in web for mobile but like I said this is uh the final image and I actually prepare a code with the QR code because there is a user actually asking for the QR code as well but like I said you can put any any widget out there that you can think of you can put it here and let's try actually right now I recommend this text let's try right now to Output QR code and then we'll actually download this QR code and I'll show you now so just change it now to the QR code and Let me refresh with Ctrl 5 because I want to clear the cache and now you can actually see the QR code and the QR code should be connected with this text field probably so it and you can write something that I love a lot of flow and this is actually a page state so this is actually dynamically updated on change and if I download this QR code right now you can actually see you cannot actually see but this QR code should be downloaded and if I go back to my assets again I can delete this QR code because this is a demo that I tried that I test and then if I upload the uh the widget which in this case was the QR code not a text widget but this time it was a QR code and if I upload it uh sorry even if I uh open it like that you should be able to scan the QR code and then you you should read the text which it says I love flow the flow and you can try it for yourself you can pause the video and then scan and let's try with another Widget the final widget so I wanted to actually show you with one more which is a webview for example or Google Maps but with Google Maps I had to connect the API which I don't have uh sorry not the API but the keys of Google's which I don't have currently and then I try with the web view for example and I was like I can enable the webview I can add the webview and then I can just copy and paste the code because this is literally what you have to do but if I go to view code uh further for for me at least it's a buggy right now so I don't actually see the code I don't see the webview over here so yeah I will I'm not able to show you but in theory you should you can actually add the widget modify the way you want to and then just copy and paste the code and then put it over here right instead of the text instead of the QR code you put whatever widget you want to put over here and then it should work so let's jump into just explain what the code is doing okay so let's jump from top to bottom and let's talk about the first one so the first one is import from Dart libraries itself so you don't need any packages over to the right side over here so this is just import the dartmatt and then we have the first import is the QR flutter uh import but this is only if you want to download QR codes as image if you don't want to do that of course you don't need this package so if I if I just command this package and if I want for example to download the text widget I would just don't need this part and I'll just use the text one right so I don't use so you don't need this package at all so like I said you only need this package if you are downloading QR codes as image if you want to download the uh the widget but in this case it's a QR code and if you want to do it if you don't want if you want to download it as image sorry uh but you don't need that so that's why I recommend it uh which is this package over here I'm using this package particularly but like I said you don't need it and then the the two ones that you need for sure are screenshot which is actually doing the screenshot of the widget and this is the package I'm using uh and it's a it has nearly 1000 likes let's actually give it a like no we can't okay whatever uh and um so this is the screenshot that we're using to make the screenshot of the actual uh image or the actual nuts image but the widget and then the second one it's download so download there is another package called download I actually am a fan of this package because it's super simple and it's actually covering all the platforms out there so it's 400 OS Linux Mac OS web and windows it is very simple to use actually so that's why I'm using a download package and on the right side like I said you don't need the QR filter sorry QR uh flitter and then you need uh sorry I forget to switch the top so on the right side where it says dependencies you need the screenshot and you need to download and I'm actually using any as the version of the number and I'm always doing that and I actually made a video about that if you haven't watched the video about it why you should use any uh you can actually watch it right now it's going fixing uh uh fade fade fade ready flutter get error sorry about that and then when you're done with that now you can actually name your widget wherever you want to in my case I name it QR code downloader because I was downloading QR codes but of course you can name it like widget and I'll actually rename that to be honest because uh QR code downloader is not the best description for this particular code and it will be something like widget to image or something like that and then I'll actually change the name on top as well and I probably don't need the QR one so I'll delete it from here because I don't want I just uh I just did that for testing to see to show you guys that you can also download QR codes if you want to and then I'll compile it now so so the widget name will be widget to image and here we have the screenshot so we're using the screenshot controller uh and then we have the in state I think we don't need it in this state to be honest because uh we don't have anything in the United States so probably we don't need it uh to be honest uh so I will probably later remove it and then here I have a function actually that I created and this is actually for generating a random bytes because if for some if for some reason you are capturing a widget which does not exist for any reason or that does not return any data this is actually I'm creating like a random data so it could be it will not give a no error this is actually a no you can you can think about it as a no error Safety Code this part over here uh and then we have actually I put three ways to download the image while uh when it was produced uh by the screenshot package so one way is actually using the HTML package which is actually coming from Dart itself so you don't need any Imports for that and this is how I so this is how you can do it I actually leave it like that uh command it like that so you can actually know that you can use this third method but I'm actually using currently I'm using the second method which is using the download package and it's actually the file name is widget and then I'm putting the today name because I want every time to be unique but of course if you want to have another name uh you can actually change this line of code and you actually have the name name of the image to wherever you want and then we have the Stream which is converting the bytes to stream and then the final thing is downloading uh the image from the stream and then with the file name that you put out that you put and then the first method that I tried and I also put it here is that you can actually use permissions for storing permissions and you can ask for permission and try to save it in your mobile app or web deployment this is actually currently working for web but if you have any problems or any issues uh dealing with uh mobile not working uh you have to actually check the manual of downloads and you have to check if you need actually something more to do for the web sorry for the mobile but if you like I said you can try one of the methods so you can try the first method the second method or the third method if you have any difficulties downloading the image but I test this like I showed you in web environment and it's currently working so it should work also on in Mobile as well and then this part of the call over here we don't have a lot of things uh so we have the only thing that we have right now is that we have this screenshot widget and the screenshot widget actually will take a child and it will check you to take a controller which is a screenshot controller and it would take a child and inside this child actually you can put you have to put the widget that you want to convert it to image so this is actually the magic part that you need over here so in this part in this example over here I'm putting a very simple text but like you just saw you can put a text you can put the QR code you can put any widgets that you can think of out there you can put it over here and then it will be converted to image and then the final thing is the button so you have the button over here and when this button is pressed you will actually uh you actually uh convert you convert uh and you actually execute sorry you actually execute uh this method which is this one over here which is actually what this method is doing is actually downloading the image uh itself so this button is actually underneath right now it's underneath uh the widget that will be downloaded so if I go over here you can actually you should be able to see it I'll actually delete the web view right now and it should be able to see it yeah exactly so indeed you are seeing it that this is the name uh so sorry this is the text widget and you have the button underneath so if you what if you want to actually uh don't if what if you don't want this button to be inside the text widget inside the widget over here what if you want this button to be outside so what if you want to be on a floating button over here or what if you want to when a user open a page you want to automatically download uh the widget as an image on their phone or or web or whatever because you can use adduction so the idea is that you have to extract this action and put it individually in a custom action so when you have it in a custom action you can actually put it everywhere in the page right so this is the whole idea so I'll actually make a video about that so I think it will be my next video my next tutorial so if you haven't watched my next tutorial make sure you do and to actually get an answer to this question but if you want a very basic functionality and that works for you to download uh the uh the widget as image this is your code like I said this code will be available in uh GitHub so you can actually use it and yeah I think that's it for regarding downloading widget as image in photoflo and before you go I just want to let you know that I set up a Discord Channel which would be for my 3 000 subscribers uh so thank you very much for everyone who subscribed to the channel the Discord channel will be officially announced when I reach the 3000 subscribers uh it is well structured it will be well structured with the general tab which you can see the info the news and we have also click to talk so you can actually talk to other members of the channel and we have the YouTube videos as well where you can see all the YouTube videos you can also have if you want to uh if you want to request a video you can go to uh video requests and then we have the paid members from YouTube which they have a separate Channel where they can talk I also have from the mentoring sessions we have the paid members and then it's structured by backend for the flow API course Super Bass sqlite and you have the design or you can ask design questions we have the custom code which is uh called the Expressions custom functions custom widgets custom actions and for the flow source code we can talk about the flow source code as well and we have Integrations as well uh pop Dev packages platforms if you want to integrate different platforms we have the general Integrations and then we have you don't see it from my face but we have also the settings we have the dynamic names we have the push notifications we have the app settings we have the Android deployment we have the iOS deployment and you have the web deployment and the last thing that we have is actually have the languages and we have other languages so we have like Swedish for example Spanish Portuguese and all other languages that that people from those countries or those languages can talk uh in their own language so yeah like I said thank you very much for all the subscribers and before you go I just want to say that the paid membership for YouTube is now open so you can be a paid member to my YouTube channel which means a lot and thank you very much for all the people who are right now paid members to the channel

Channel: Dimitar Klaturov

Views: 1,507

Keywords:

Id: udGa2OsNYqM

Length: 20min 0sec (1200 seconds)

Published: Mon Feb 26 2024