Share Widget Screenshots with Flutter | Day 09 - #30DaysOfFlutter

what's going on everybody it's your boy kilo loco and today we're working with flutter so we're coming in at day 9 of hashtag 30 days of flutter and things are getting really interesting now so in today's tutorial i'm going to be showing you how to take a screenshot of your individual widgets and then i'm also going to be showing you how to take that screenshot and share it outside of the app which is really cool so you'll be able to take a screenshot of a specified widget and then once you have that screenshot you can share it outside of the app so really cool stuff now with all that said let's go ahead and jump right on in and as you can see here we already have a lot of the ui laid out at this point in the 30 days we should feel comfortable building out some of these ui screens that we have um starting off at this at the beginning of the tutorial you should be familiar with all the widgets that i've used up until now we're just working with the card column image text button just all normal stuff and i have a lot of this built out if you're not familiar at this point then you can always go back and watch either the the previous videos or you can click the link in the in the description down below go to the repo and you can clone it so that you're able to follow along anyways with all that said we can just see that we have our ui laid out now we're going to be working with two different packages today the first one is going to allow us to actually do the screenshot of a specific widget and then um the second one is going to allow us to share it so as you can see i have like this little polaroid looking card right here that has an image in it and then this uh some text in it so it's just this image asset right and then some text and you can see that nothing's crazy going on this is what the image is so yeah let's head over to pub.dev and the first one that we want to get is um screenshot so let's go ahead and enter in screenshot right there we're gonna hit enter and then we're gonna go like bam and then we're gonna scroll down and be like oh bam there it is so it's relatively easy to create a screenshot all we need to do is have a screenshot controller and then we need to wrap our widget that we want to screenshot in this screenshot object and then we'll pass in the controller once we want to trigger the screenshot then what we'll do is we'll do screenshot controller.capture and then it's going to um you know return back the image file like that so let's go ahead and grab this one head over to installing we're going to be like bam and we're going to stick it over here in our pub spec dot yeah all right right here under dependencies we're going to add that new dependency which is screenshot but before we hit save let's head back over and let's go get our other dependency which is going to be you know it it's called share so not share like the the actress or the singer but share like oh i want to give this to you so this is the type of share so share is actually even easier than the snapshot and all we have to do is either pass in a string that we want to share because we could share like text or we could um share files so we can you know pass in multiple files and things like that so really easy really simple let's head over to the installing we'll do like bam like that go over to pubspec.yaml be like kapow like that now we'll do save head back over to main and now we can start implementing this so let's first work with what we're going to screenshot right so i want to screenshot this card and you saw it here before it's going to be essentially what's holding all this content in here so the image and the text right there so we want to screenshot that entire card so i'll go ahead and refactor it into a widget and we're going to call that screenshot make sure you get that auto import going for you it's going to be a game changer for sure then we also need to pass in the controller which we do not have yet and we'll go up to the top because we're going to need to access this from our triggering function and we'll create an instance of a screenshot controller so boom like so super simple super easy we love when it's simple easy and nice and warm okay so now we have the screenshot controller we have our screenshot right here and what we need to do now is make sure that our button which is this text button you can see it right on over yonder this is the button that's going to trigger the taking of that screenshot let's create a function that's going to do that for us all right so as simple as that we're pretty much all set up we have our take screenshot function it's going to be an asynchronous function because we got this fancy keyword called await right there and we're going to call screenshotcontroller.capture that's going to take a picture of the child that's inside of our screenshot widget and it's going to give us back an image file really nice and simple i love it i love it so much now let's just make sure that we're going to actually um you know call this so we're going to call it in our text button and we'll just say take screenshot whenever we tap that now what we want to do is we want to share that screenshot so once again it's extremely easy to do all we have to do is just you know share the share the image file and just like that we have awesome functionality like what is it just a handful of lines of code this was super simple so as you can see we're passing in the image file into our function that's share files and then we have image file dot path which is um this image file the path to that image file right so then it's going to open up our share sheet so let's see this bad boy in action shall we so let's go ahead hit that button it takes a screenshot and and let's try it again and here we go we have something going on down here okay so we have this unhandled exception um bug that came back again so this has been happening to me whenever i add in uh new widgets or i mean not new with just new packages into my project if you know what the problem is let me know but if you run into this as well i know that it's really easy to fix all we have to do is just simply clear out our app we'll remove our app and then what we're going to do in the terminal is run flutter clean that's going to clean our project then we're going to head back over to the pub spec dot yaml and we're going to save it so that's going to get a fresh download of the packages and dependencies then what we'll do is we'll head back up to this fancy little sexy triangle up here and then we're going to run the app again all right here we go we have our app all opened up again let's take another screenshot and there it is boom look at share sheets already showing so for those of you that are familiar with ios um this is where you're able to like scroll through and select all your different options so if you're running this on a real device you'll actually be able to share this to twitter and you know tag your boy kelo loko in there i'd really appreciate it that'd be cool but anyways like you can share your widget to like any of the apps that you have access to i'm not really sure how it works on android um there's nothing different that you need to do to implement for android it's just that i don't work with android a whole lot so i haven't tried it out on android but yeah uh it's as simple as that now there's one other thing that i want to show you because if you were to put this in the app what you would want to do is link back to your app so the way that you could do that is you could include some text along with the image and bam just like that you add in the text argument and now you have shared from sec sexy flutter app oh yes so let's go ahead and save that and i want to show you the difference so now if we take a screenshot same thing happens but now when i hit copy let's head over to somewhere where we can try it out and we can do that in images and if you go to the or the messages if you go to the messages you can send them something so remember that i copied it so now i can just paste it and as you can see here it has the image along with the text that we added in there and when we send it bam look at shared from sexy flutter app and it has our screenshot right there look it even has the border and everything isn't that like freaking cool i think it's pretty freaking cool so that's gonna be it for today i know that this was an extremely simple video but i would love to see what you guys come up with go ahead and build out your own widget take a screenshot and then tag me in it i would really love to see what you guys come up with so that's going to be it for today thank you for your time now go out there and keep coding passionately

Channel: Kilo Loco

Views: 14,378

Keywords: flutter tutorial, flutter example, flutter for beginners, build a flutter app, 30 days of flutter, 30daysofflutter, #30daysofflutter, flutter course, flutter free course, dartlang, flutter dart, flutter tutorial 2021, flutter example 2021, flutter visual studio code, flutter for beginners 2021, 30 days of flutter google, flutter shared preferences, flutter list tile, flutter listtile, flutter switchlisttile, flutter radiolisttile, flutter checkboxlisttile, flutter save data

Id: EvHxiatshTs

Length: 8min 50sec (530 seconds)

Published: Wed Feb 10 2021