#Flutter Tutorial - Save Selected Image in App Directory in separate Thread (coderzheaven.com)

hello and welcome back to on the flutter tutorial in this video we will see how to take photo with camera and load it in the UI and also select image from the gallery and load it into the UI after saving it to the applications temporary directory in a separate thread then after that we will be loading the saved image which is in the temporary directory into the UI okay so let's start so for this demo we need three packages path provider to get the apps documents directory or the temporary directory and the image picker to open the camera or the gallery to get the Hemis and the image picker and the image to decode the image okay so let me show the main door file so this is the main door art file where I have set the image selection screen as the home so it will be loading first okay so let me declare some variables so the first one is a file image file and the second one let me input the dot IO and the second one is status third one is a boolean image loading okay and the fourth one is the image picker so import image picker so let me show the plug-in image picker so you need to have some values in the info Torpy list for iOS so if you want to add that the app is going to ash so it will last the permissions from the user okay so it's going to ask the camera permission and also the gallery function okay so let's initialize the variables now status is equal to empty an image file so Raheem is loading is equal to false and image picker is equal to new image picker okay now let's quickly create the UI child which is a column with main axis alignment and cross axis alignment center and main exercise to maximum okay and I'm going to add a image image dot file and supply the image file then had the called p.m. setting the filter quality to high so there is a mirror so that's because the image file his null so let's add that chick so it is null usual and empty container otherwise the image okay now we need some spacing with a height of 2 ND and a text which will show the status and some spacing then we will need a UI with 2 buttons one to open the camera and another one to open the gallery and select the image right so let's add a container with padding to Andi okay and with media query natok good of context sized outlet and colors dot black 12 and the column with main exercise 2 minimum cross axis alignment center and main axis alignment Center with children so I'm gonna add a button button method with text and the image souls so that will return a flat button with child text which will be the text and entres will do it later so let's pass in the values so that will be my source code camera and second one will be klp okay so alright now let us add the UI save it ok so one click off the button what we are gonna do is we will set the image loading to true and image file is equal to null okay and let's load the image so that's a nice interest method let's pass in the image source okay so the image bigger is going to return picked file okay and a wait call ah wait it means pick a dot get image and pass in the source so that's why I'm a source okay we are going to return future file so if it is null we'll do it later otherwise we will return the file so sorry so that should be big file okay no big file is equal to a weight load image and passing them a source and call set straight if it is not null okay so we are going to set the image file to file so that is going to be big file so that will be file image file dirt path okay and set the image loading files and status is equal to loaded okay and returned from there otherwise null and okay so let's see if that's working reload the Hat open the camera so it's asking the permission select the image so let's try selecting some bigger image okay so there is the error so let me add an expander good certainly the image okay so that's gone now now let's come to the main part let's save the image that is selected into the abs temporary directory so future file save image to disk and pass in the file and the directory okay and a try-catch so if there is some error and let me import the image okay and so let's make it a string the file path okay so I'm gonna create a temporary file with the path okay so that should be file part and I'm gonna decode the image so image is equal to image IMG dot decode image and passing the temp file dot three despite sync and it may start in it mmmh is equal to I'm going to resize the image okay so copy resize image and you can pass in you width okay now I'm going to get the image type so that would be string image type is equal to path dot split with dot and get the last string okay so strain empath is equal to I'm going to create a local path where I'm going to save the save this image so that will be directory dot path to string and right / and I'm gonna clear image underscore and daytime or now okay and dot image type alright so I'm going to check if the image type is JPEG then call Tim file dot write as whites sync and image dot encode JPEG and pass in the MMH so I'm assuming the other type is PNG okay so you should check that so encode PNG and pause at the ma image okay so let's return the temp file from here so if there is some error we don't know okay now let's use this method so if the selected file is not equal to null we will create the directory you can create this type inside the safe too save image to this castle so I'm writing it here to demonstrate something else okay so we will see it later so file is equal to a weight save image to disk file load path and passing the directory so that should be sorry so let me rename it to M file ok Underdown M file that should be future file ok all good now if I go to the load image that should be file ok and image file should be file now okay so looking good now so I have used I haven't used the gem path so that should be so let me create a new file so that is the local file which is saved in the temporary directory right so we should write to that file and return the file okay so now the thing is okay all right you know let's restart the hap and see it is working ok so select the image okay it's working good it's loading now I'm gonna add a circular cross indicator while the image is loading from the disk and see what is happening okay so let's select an image from the gallery so you can see the circular image animation is breaking while the image is loading right so it's stuck at some point right that's because we are writing the image to disk inside the same thread which is used to draw the UI so that's why it's breaking the animation so we'll fix that so we are going to make a small change to fix it we'll be wrapping in the same image status method inside the compute mother so compute is going to create a new thread or a new isolate okay so we'll be writing the image to disk inside that thread so the compute method can accept only one parameter along with the function name so that's why I did like the directory here so let's see how we can pass multiple parameters to the compute method so I'm going to create a map the first key is the file path so let me say violence go path or touches path and pass in the file road path and second is a directory okay and pass in the map inside the compute method all right import the compute from foundation so that should be the parameter we should modify the parameter for the save image to disk right so that should be map okay and get the values from the map okay territory is map of territory okay are good now let me remove that line so we don't need that line all right okay so it looks good now all right now let's see if that works select an image and you can see the animation is smooth now right so there is a matter so I will tell you what is this error so isolate fourth isolate the function should be should not be an instance of it loss or it should be a study so I'm placing it outside the class let's say image to dysfunction so everything is working good now and you can see the animation is smooth because we are saving the image outside the main thread okay and passing the data back to the UI okay so that is a usual isolates and so whenever there is some long-running operation to do we should do it in a separate isolate okay I'll be providing the link to the source code in the description below this video and also the links to the plugins that I have used for this demo okay so that's all in this video if you liked the video please don't forget to Like subscribe and share hit the bell icon for notification also please leave your valuable comments below this video thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 12,520

Keywords:

Id: EdfqLUpujYs

Length: 13min 20sec (800 seconds)

Published: Sun Jun 07 2020