Flutter Camera Tutorial - Image Pick and Crop | Quick & Easy

[Music] hey hello friends and welcome to retro portal studio and in today's video we're gonna be discussing about handling images in flutter so we're gonna be clicking the images from the camera we're gonna be selecting the images from the gallery itself and then with the selected image we're gonna crop that image we're gonna crop that in a one by one aspect ratio and then display the image in this placeholder so this kind of functionality is required in most of your apps because you want the user to set their profile picture so this tutorial is going to be quite useful in your routine apps that you build in flutter so let's get started okay so right now I'm in a simple app and I have these two buttons that do not do anything so what I have here is a simple stateful widget that is called my home page and it's given to you by the default flutter app I have a simple scaffold in which I have a column and in that I have this function that is called get image widget so basically what it does is I have a simple file that is in the state of the state of the my home page that is called selected file and what get image widget function does is it checks for the selected file and if the file is not null it presents you with a file in an image widget and if the selected file is null it presents you with an image that is coming from the assets here that I have important in my package with a placeholder jpg so other than that I do have two buttons here one is for the camera and other is for the device to pick the images from the gallery so this is a simple layout so now what we got to do is we have to add functionality to this camera and the device buttons okay so the first thing that we need to achieve is to click the images from the camera or get the images from the device and for getting that we're going to be using a simple library that is called image picker that is a flutter package so right now it's at version 0.6 point three so what I'm going to do is I'm going to copy this code that is in the installation section of the package and we're gonna go to our project and add that to the dependencies okay so once you have added that make sure to click on packages upgrade and close this pub spec ml so after adding the library to the dependencies what we're going to do is we're gonna create a simple function here that is called get image and this function is going to help us in getting the image from the camera or from the gallery using the image picker the way this thing works is we're gonna make this an async function because the image picker is going to give us a future of the type of file so when we try to pick an image so we're gonna make this an asynchronous function we're gonna use file and let's just name this image and this is going to be returned us from the image picker and this pick image function of the image picker is going to take a source and we're going to pass a source that is called image picker image source dot camera for just now and this is an asynchronous function so we're gonna be returned with an of eight here because this is going to return as a future and we want to wait till it returns with the data of the file so once we have the image we need to crop this image to get a one by one aspect ratio so for that what we're going to use is we're going to use a simple library that is called image cropper so this is also a very elegant package that gives you quite a bit of functionality to work with cropping the image you can see that from the representations down here and it also gives you with separate user interfaces for Android and iOS so we're going to be using this quite nice package in our application so for that I'm gonna go to this installation section and I'm going to copy the dependency with the latest version here I'm gonna go to this pub spec dot EML and add the same to the dependencies section and click on packages upgrade and once the package is upgraded I'm going to close this post facto channel and let me just go to the instructions that we have to use for this image cropper because it's also dependent on third-party libraries for native Android and I so once we go to the readme section here it says that for using in Android you have to add this bit of code to your Android manifest files so basically this is dependent upon some other native Android library so we have to add that activity in our Android manifest file so for that what I'm going to do is I'm going to copy this code and go to the Android section here in my flutter image app and in the app section in the source section in the main folder when we have this Android manifest file and in that I'm going to add this activity by coming down to the main activity and pasting the code here so other than that you see that there is no configuration required for the iOS site and there are other parameters that it's explaining but I'm going to explain that to you right now in our tutorials so we have this image that is given to you by the image picker by the source of camera so what we can do right now is instead of getting the source from the camera we can pass the source as an argument to this get image function so that we can use the same function for both our camera and the device so what I'm going to do is I'm gonna pass it an argument of image source that is called source and we're going to let me just spellcheck that source and we're going to pass the same source to this function with the help of this we don't have to create separate functions for same kind of functionality and we are good to go with this one also okay so once we get the image we're going to use the image cropper to crop the image further so the image cropper once it crops the image it's also going to return you with a simple file so let's just name this resized or cropped and it's also gonna be asynchronous we're gonna write a weight and we're gonna use image cropper dot crop image so this is going to take a bit of arguments to work correctly so the first one is the source path so this is going to be the path of the file that is given to you by this image picker so we're gonna simply use image dot path that is the property of the image type file and other than that we have a bit of other parameters but first some add this camp semicolon and we have all these parameters to pass to this image cropper so the first one I'm going to use is the aspect ratio so we're gonna pass this aspect ratio so this is going to take an argument of aspect ratio crop aspect ratio and this is going to take a ratio X and ratio Y so that we're going to keep it one by one so I'm going to pass one as the ratio X and one as the ratio Y and other than the aspect ratio we can also pass the compression quality that is going to be between 1 and hundred so I'm gonna pass hundred because I don't really want to compress the image and we're gonna pass some maximum width and height right now when I just keep that at 700 and max height to 700 so that it also compresses the image so we don't have to rely on any third-party library for that and also with that we have the compression format so this is going to be important if you're going to pick up any PNG or any other type of files you want the files to be of a certain format if you want to make them compatible throughout your application so I do prefer JPEG images for their compression quality so what I mean and what I'm going to use is I'm gonna use compressed format and image compressed format that is the JPEG and I'm gonna remove that s and other than that it do have two other properties that is called Android UI settings and iOS UI settings so this is the great part of this image crop er package that it allows a different user interface for the Android users to crop the image and a separate user interface for the iOS users because it really depends upon two different libraries for both Android and iOS so for this Android UI settings what I'm gonna do is I'm going to use a simple class that is also given to you by this image crop or package and that is called Android UI settings so this Android UI settings property is going take an instance of this Android UI settings class which further gives you gives you a lot of properties to deal with so the simple properties that I'm going to use in this tutorial are this toolbar color so we're gonna change that to colors dots deep orange let's say and we are also going to use toolbar title so let's just call this our PS cropper and other than that there are other properties like background color and status bar color so for the status bar color I'm gonna pass colors not deep orange dots shade I'm gonna use nine hundred so it's gonna be a bit dark and also the background color so for that I'm gonna use colors white and there are a lot more other properties like crop frame color and what I'm going to do is I'm going to just use these properties and for the iOS users there are also some iOS settings that you can check out here in the documentation for this image cropper and by coming down here you can see that there is a single property that is called iOS us settings that cause the minimum aspect ratio so I'm just gonna I'm not going to use that okay so what we can do now is we have to check first that whether this image is not equal to null and if this image is null we don't have to do anything so what I'm going to do is I'm gonna pass an if-else statement and I'm gonna pass image is not equal to null and only in that case we're going to set the cropper and once the file is cropped after await we're going to set State so we're going to call this dot set state and in the set state I'm going to change the value of this selected file okay so what we're doing here is in the get image function we're getting the type of source that we want to use and depending upon that source we're going to use image picker and once the image picker gives us the image we're checking if the image is not equal to null and if the image is not equal to no we're going to use image cropper and the image cropper takes in the path the aspect ratio the quality and all the other properties that it needs to work correctly and once it does its job it gives us a file that we have named here the cropped and once we get the file we're going to set state and we're going to set the selected file to cropped so let's just use this function in our code actually so in this material button that is going to be used for camera we're going to use get image and we're going to use the source that is image source dot camera and for the other button we're going to use the same code but we're going to pass the image source as gallery ok so right now we're ready to use all the above written code and we're ready with the image picker and the cropper itself okay so once I have added all this code I want to close the application and restart that because we have added the activity to the Android section and once the application is restarted we go to the app and you can see that our app is running fine okay so as soon as I click on the camera button you can see that it asks for the camera that is the default app camera and the picsArt camera so I'm gonna select the camera and click on just once and it presents us with the camera feed and when I click on the camera and it saves the image and we can click on the ok button and it takes us to the app and the cropper appears and you can see that the color of the status bar and the color of the toolbar are changed according to our preference and you can also scale the image and it's given to you in an aspect ratio of one by one and there is also a scale that you can adjust according to your use case and you can also rotate the image by clicking on this rotate button so once you click on the tick button on the top right hand corner you can see that the image is displayed in the image which it created using this get image widget function declared above okay so when you click on this device button you can see that the device menu opens and you can go to any your images I'm just going to use this one right here I'm going to click on that image and click on the tick button and you can see that the same image is being displayed in your app also so this is a simple implementation for using the camera and the device and more using the image picker to crop the image to a one by one aspect ratio to display that in our application so the next thing that we're going to cover in this is we have a small camp so when you click on the camera image you can see that the camera button appears and we select on the camera and right click on the image and we click on the ok' button it comes back to the app and waits for a second and then goes to the cropper so in between that time if the user clicks on any other button so our app is going to crash so we need to address that and we need to find a solution for that kind of behavior in our application so that's we're going to do next okay so for addressing that minor pause between the image picker and the image cropper what we're going to do is we're going to create a simple variable that is of type boolean and as called in process we're going to keep that private in process so we're going to set that to false initially and what we're going to do is in the get image function we're going to initially set the state for the in process to true because the user is trying to get the image either from the camera or from the device so we're going to use this dot set state and in the set state we're going to set the state off in process true true and if the image picker successfully gives us the image we're going to crop the image and once we get the image in the cropped file we're going to set that in the selected file and we're also going to set the in process to false because we have now retrieved the image in the crop and we have set this selected file and in the other case when the image picker fails to give you the required file that is the image we're going to create another else statement here so we have a check here that is called if image is not equal to null and if the image is null we're going is we're going to use this dot set state and we're going to set the in process to false and we're not going to do anything with the selected file because we don't really need to change that okay so for the way we're going to use this in process bullion is that we're going to come down down to this column and instead of this being the direct child of the body we're going to do is we're going to cut this column from here and we're going to cut this column widget' and instead of that we're going to place a stack and in the stack we're going to pass in the children and the first child is going to be this column so other than this column what we're going to do is we're going to come down here and we're going to check a ternary operator that is going to check in the in process and if the in process is true we're gonna pass in another widget that is going to be a container which is going to have a height and in the height we're going to pass media query dot off context dot size height and also in that we are not going to give the complete height we're going to use 0.95% of the height and we're going to pass in the child of the container and for the child of the container we're gonna pass in a simple loading sign for that what I'm going to do is I'm going to pass in a center and with the center I'm going to pass in a child of circular progress indicator and that is going to share just a loading sign and other than the container if the in process is the false we're going to simply pass in a center that does not display anything so we also need to pass in the color of the container that is going to be colors dot white okay so once we have the app running I'm going to come back to the device and I'm going to test the app so I'm going to use the camera and call in the camera and you can click the image and then wait for the image to appear and when we click on OK you can see that the waiting sign is there and there is no activity and you can click on this camera and click on okay and you can see that the image appears on the device and there was no in between activity that is being shown to the user this widget only appears once the user has actually retrieved the image and have cropped the image so that gap between the image picker and the image cropper is removed by using this simple boolean that is in process and we set the boolean to true when we start to retrieve the image and we set the boolean to false when we have retrieved the image or we fail to retrieve the image so depending upon that state of the in process were displaying a container with a loading sign or you can pass in anything that you want so as you can see that this is really a simple code to just pick up the images from the gallery and pick up the images from the camera and then crop them into whatever aspect ratio that you want you can learn more about the aspect ratio that the image cropper supports this is really a well-documented package that you can use in your applications and this really takes away the tedious process that you have to go in the native code and then crop the images and everything that you have to do to just pick up the images from the camera and crop them so I hope this tutorial is helpful and if you liked the tutorial please hit the like button and the subscribe button and thank you for your support on the channel I really am glad that you are liking my tutorials and I will keep coming up with more better ones so see you next time peace you

Channel: RetroPortal Studio

Views: 38,449

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, dart, flutter android studio, flutter image pick and crop, flutter camera, flutter gallery, flutter device camera, flutter images, flutter cropper, flutter image picker, image picker in flutter, image cropper in flutter, crop image in flutter, crop gallery image in flutter, crop camera image in flutter, flutter ui, flutter video

Id: U_yqwBdb1jE

Length: 19min 13sec (1153 seconds)

Published: Tue Jan 21 2020