Flutter: Click | Pick | Crop | Compress an Image | AndroidX

hey wassup guys welcome back to my youtube channel and welcome to my floater tutorials in this video I am going to talk about images that how you can click an image pick an image and crop an image I know as well as compress an image so this is one of the use case which you know you will see in every other application and although few things are very much familiar to us but still there are few things which needs to be covered so I am just gonna demonstrate in this particular video that how you can pick an image from gallery how you can click it how you can crop it and what's the best way to compress it and send it to your server because you don't want it to be heavy so that's what we are going to see and we are also going to cover 3 plug-ins for it because there are three different plugins if there's not a single plug-in which can actually give you the optimized result so that's how we will start and if you are already aware then you can just skip this video if you are not then this video is for you as you can see I have a main dot dot where we have nothing just a home page inside the home page I have a stateful widget and then in the body I have a text image if my file image is null if it is not null then I will use image dot fire and show that particular image with the height and width of 200 and then in we have two floating action buttons one for picking image from camera and another from picking image from gallery and I have given the hero type two unique key just because if you have to do some kind of navigation then this can give you an error so because you know there are multiple floating action button with the same hero text so that's what we don't want okay so this is what we have now the first library which we are going to use is image because this is by Google which will help you in using the image from both Android and iOS with the camera as well as with the gallery so I am just going to add this dependency in the post tag dot EML so here I will have this dependency and I will just press command s to save it okay and should work so this is added now in the homepage what I will do first of all I will import this okay so this is image picker dot dot now you can see I have another method which is get image file which is an awesome Kronus method now I have to provide the source whether it is from camera or from the gallery so I can just say image source and I can just name it source now here inside this method I will get an image because it's an a synchronous method so I can use a wait and I can use this image picker library dot peek image you can also pick video s so that's a nice thing so if you want to pick an image so you have to give the source so you can just directly pass the source once you will have the image then we will use the set state to to set our image to this particular image this is fine now we will go up to our camera here on the press of this particular button what we want we want to call this get image file and for the source we just want to say image source dot camera we can just copy this and we can paste it in gallery as well and we can just say image source dot gallery and we will just do a hot restart and then I am just going to show you if it is working so I'll click this camera so I'll click this camera you can see this is what we are getting now I'm gonna click this picture and I have this picture now and you can see it is saying retry you're okay I will just press ok and you can see the image here now because I have already the image I also want to print its size so image if we can get these size image dot length sync right this is nice so if I will just go back here and if I can just print it for the time being so let's print here as well if land sink so we can see what's the image size so you can see two eight two seven zero zero three if you cannot see this is where it is two eight two seven zero zero three and if I just check here in my gallery that what is the image size then we can get the idea exactly so I don't know if it is saving in the folder or not so this is the image size for the timing let's just let's just say that this is the image size which is 2 8 2 or whatever it was let's see what it was so I am just going to copy it and I can just paste it here so two eight two seven zero zero three now let's let's try to do one from the gallery as well if we can do that so gallery and allow and now I can click so you can see this image is 3.6 MB so I am just gonna pick it and as you can see this image is 3.6 MB which is 36 lakhs 2007 9 2 so yeah so this is 3.6 M which is kind of very big enough ok so if you are using iOS device then you need to add few permissions here for photo library for camera and if you are using a video then microphone permission as well we will add that in the future right now for Android we don't have to do anything now let's go to the image cropper part where we have to first of all install it so we are going to just add this dependency so in the pub spec dot EML i will add it and this is how it should work okay this is getting done so this is the exit code 0 this is finished now we have the image copper dropper as well now I have to first of all just stop this application because when you add a dependency you just need to restart it again what we will do we will go back to our Android manifest file so that we can add this dependency and sorry for the background noise again it is same everyday okay so here it is saying that we need to add this particular activity which is an Android activity which will help us in cropping this image you cannot just customize it a lot but definitely you can use it so this is what we can do okay so here after this particular activity I am going to add it so let's add it here and let me just do a little indentation yeah this looks fine so this is what we have now we have this particular thing this image copper is with us so we don't want to restart our app again and again so I am adding the third dependency as well which is flutter image compress and I'm just going to add it this is zero point six point zero version I'm going to add it here let's just fix it and it should get the dependency for me okay this is fine and we know our image was 3.6 MB if I am NOT wrong now what I will do I will first of all run this application on my device which is this Galaxy Note 9 and let's wait for a couple of minutes because we need to do that when we running our app for the first time thanks to grater so this is what we can do and again guys if you are using iOS then for the second dip image cropper you don't have to do anything for the first first of all you have to add these three permissions which I will just show you if you want me to show this particular thing and for image compress I don't think there is again a dependency no there is no dependency at all if you have some kind of error then there is some guide that how you can fix it basically you need to use the Cortland version which is one point two point seven one or higher than that and that's all I guess you have to do so unfortunately our application is stopped because it's saying the hell we have some Android X incompatibility issue so this is the issue which are also I wanted to talk about because you'll see this issue a lot of time that you know there is some issue with the Android X and how you can fix it so that's that's the question so there's a very good guide which you can follow so you just have to go to your browser and you have to write flutter Android X Android X and the first link which you will get you have to click it and there is a full guide that how you can actually fix it okay so what you have to do first of all just make sure that your Gradle dot properties include these two modifiers one is enable jetty fire and second one is use Android X so this is what we are going to add first of all so I'll go to my Gradle dot properties and I will add these now go to your build or Gradle and just check if you want to upgrade it from 3.2.1 to something else okay so it's three point three point zero so just add they added rather than this and I guess this is fine this is fine so this is again fine now if you want to change the distribution URL you can change it but I don't think that that should be that should already be there but let's say for the timing let's change it for point ten point two so here you will find the distribution URL in the yes Gradle properties yes so it's already that so you don't have to worry about anything else and now let's run this application and let's see if that works so why I am showing you all of these because this is the situation which you will be gonna stuck at and I don't want to skip any steps just to save some time because this when you will implement this then it will take a lot more time than this so it's better to invest one or two minutes extra rather than investing a day into something so that's so we get unexpected element activity found okay so we missed something in the Activity part let's see what we missed and that's that's the problem of okay oh so we added the activity inside this activity that's a problem now it should work I guess and let's see so if you are using vs code and if you if you want to write some Android code inside it then there can be some consequences of it again we covered the same error this time it it looks good to me at least to me okay I don't think there's an issue as of now what I'll do I'll just do a flutter clean first of all and then I'll try to rebuild it because I guess it should be fixed so so guys it's gonna take some more time okay so let's go to flutter image dropper and let's see if there is any instruction about Android X I don't see any instruction here so I am not sure whether he was aware of it or not bus and now our app is running so this is fixed now we will all saw that Lansing was called a null that's the problem so if it is not null then let's do it okay this is fine now now let's pick the image from the gallery again if it is working so this is 3.6 MB image we can see here if you want to see and now what I'm going to do I am going to use this code to crop the image so I'll just cannot copy and paste it here so here after we get this image so before we get this image what I'll do I'll make a cropped file okay and I'm going to import this image cropper so image import image crop per dot dot and I'm gonna pass this image dot path and this is the ratio which we want and we'll alert this to our crop fight this is fine oh this is this is not fine yeah this is fine this should be fine nothing working for me okay we haven't used it actually so that's the problem and now what in fact we can do is we can say image is called to crop file rather than making profile equal to that this is fine now now again I'm gonna click on the gallery I'm gonna click this image and now you can see this screen where I can crop it okay so again you can see I can crop it although these images actually so this is something like this I can crop it like this part and now let's click OK here and now if I will go to my debug console I can see this size is one lakh forty five thousand and three three two which is kind of how much 145 KB or something yes 145 KB or something now so we have compressed this image or we have cropped this image now if you want you can compress this image as well so after you had done with this then we can use another library the third one which is for compressing okay so what I am going to do I am going to use this result here and I'm going to paste it here and then I can say import image compress and I can give a path here so I'll give the same path here which is image dot path okay and for the target path also I will give the image dot path quality can be 88 and I will remove the rotate and what i'm doing here is image we can use the crop file here rather than the image because we have already cropped the image now for the crop file I'm going to use the result here and this is what you have to do guys and that's it I mean now what I will do I'll just clean this worst and now let's pick the image from gallery and this is still 3.6 MB as you can see and now I will select a portion of it like this click OK and first it was like let's see how much it was yes so initially it was something around one leg of one like 45,000 something at war or 145 Kb now you can see it's 128 KB so it is compressed if you want to reduce the quality let's reduce it from 88 to 50 or you can also give the width or minimum width and height so that and maybe you can also give the format so now if I'll do the same thing again I'll click this image I'll crop it a little bit this one click it and now if we will see see the size 40 9091 so 49 KB or something or 4 KB or something and I'm not sure how much size it is so this is how you can use this now what I'm going to do I am going to run this in IO as well so for that we will do one thing we'll go back to our iOS folder we will open it in Xcode so that we can add the that particular properties in the info.plist easily so here in the runner you will see this info dot P list from here you can add some keys obviously so first key will be so you will go to the privacy section first one is this photo library uses description so here you can write something let's say allow photo access let's say I am writing that we can add another one which is for camera so privacy and camera uses description allow camera access okay so this is these are two permission which I am getting if you want to use video then you can use the microphone permission as well now I'm going to run this particular application one second in iOS device so I am right now I'm going to use an iOS simulator the camera will not work but other thing will walk so let me just remove this for a little bit and then I can use the iOS simulator okay so we can get rid of this we can paste it here so this video is a little bit lengthy now because of what I wanted to show you all these three things and then I wanted to show you these problems which you will get also I wanted to show you the iOS stuff as well so be with me it will take few seconds again because it will do the pod install and all that and then it will be working for sure but let's see if that works so guys um it will take few seconds so now our app is running and it looks good now let's click on the camera and see this is saying allow a camera access okay and camera not available so this is the error because of the simulator so when you will run in the real device this should work now let's click gallery and oh it is saying that platform exception multiple requests okay so you have to handle the first request properly otherwise this will give you this error now let's click okay let's click on the camera again or gallery again and let's click an image from here let's say this one and you can see we have this cropping part here which we can crop this image now let's click done and you can see this is the image size which we are getting 69 5 1 4 and when you will not compress it let's say if I am I'm not compressing it then let's see what will be the size here so let's do a hot restart now let's click on the gallery let's click this an image let's try to compress it a little crop it a little bit done and size you can see clearly what's the difference so there's a very big difference so that's it about this video guys if you enjoyed it then press the like button subscribe to the channel and also press the bell I can to get future updates the source code is available on github so check it out and also make sure that you choose the android x permissions and all these permissions pretty well and you don't have to use all these 3 plugins you can use any of them or all of them it's totally your call what's your use case where you want to use it but this compressed thing is very good and I'm not sure about the video part for compressing for but your jpg and PNG image works which I have checked so that's it about this video I hope that you enjoyed this video bye bye take care

Channel: Codepur

Views: 22,635

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, google io 2019, flutter image, flutter crop image, flutter image picker, flutter image gallery, flutter compress image, compressor flutter, flutter camera, flutter camera tutorial, flutter photo gallery, google flutter, flutter for beginners, flutter tutorial for beginners, app development

Id: hV9gY01m61Y

Length: 21min 37sec (1297 seconds)

Published: Thu Jun 27 2019