Image Picker Tutorial in Flutter | Flutter Tutorial for Beginners

hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can create an image picker app in flutter so here as you can see our app is running on android emulator and ios simulator as well and in both of the emulator we can see we have similar kind of layout so here we have a button to pick from gallery so we can choose an image from gallery and then we have another button by which we can take the image from camera let's choose this pick from camera option so after that our camera has been opened and here we can move so here i am taking this picture and then we can use that and similarly we can pick from gallery as well and as this is the emulator in the gallery of the android emulator we don't have any image so i cannot pick that but here in the io simulator we can do that so if i select pick from camera and then we can choose an image and that image has been present here so these are the demo you have seen in the emulator devices and now let me connect my iphone to my mac so that i can show you the demo on real device right now i am running it on a real device on an iphone so here if i click on pick camera then here you can see the camera is running right now okay and i can take a photo and let's click on use photo so here we can see that the image has been present from the camera so this is what we are going to create today in this tutorial by using flutter so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial [Music] okay so this is our flatter project and this is just the basic flutter app which comes with flutter create command i have just changed the app content here so as you can see here we have only a text hello world and i have changed the title as well first we need to create the layout and it is a very basic layout first we will have the image then we will have two buttons right that i can do by providing column and for the column children first we need to provide image and i will provide a network image and link for that image will be this and after the image right now i am providing a text okay so this will be our app layout so now let's create the button and for the button i'm creating a custom button widget and here i will return a container and within this container first i will provide a width then for the child of it i will provide elevated button for the child of this one i have provided a row because i want to provide an icon and beside that icon the text of the button will be present and within children first i need to provide icon and i will use this icon and after the icon let's provide the text and here we need to provide the unpressed and for the on pressed right now i am providing a blank function now save it so here we can see the button and i want to provide some space between the text and the icon and it will be 20 pixel now let me make this button dynamic and for that we want to customize the icon the button text and this function also so first we will have title which will be a string then we will have icon data so it will be icon and then we will have a function so i named this as on click and we need to make this as required so i have added that now instead of this text it will be title for the icon it will be icon and for the function here it will be on click function so now here we need to provide those information and first we need to provide title and the title for it will be pick from gallery then i need to provide icon which i will use this one and for the on click right now i will use blank function so it is showing the button right now i can copy paste this one and get rid of this button text and this time it will be pick from camera and for the icon also i will use camera so our layout has been created now i want to provide some spacing in between these things so here i will use a sized box and the height of it will be 40 and let me copy it again and let me provide another size box on top of the image so now it's looking good now our app ui has been completed now we need to do the functionality of the app and for that we need to install this image picker package so here go to installing tab and here we can see the dependency let's copy it and go to dot uml file and within this dependency let's add the image picker and along with this image speaker i will add this path provider package to our project as well so i have copied this dependency and paste it here now save it after saving it will be added automatically to our project okay so these packages have been added now let's create the functionality of the app and for that here we need to create a variable of file and this file will be imported from dot dot io not from the dot dot html so i will import it from dot dot io hit enter so it has been imported right now i can use it to create the variable image and after the variable i will create a function to get the image and it will be a future function the function name is get image and it will be an async function and here i need to add the image speaker functionality and it needs to be imported from image picker dot dart package which we have just added and then we can pick image and here we can provide the source and the source will be image source dot camera dot gallery so right now i will use camera as the image source and then i will provide a checking if this image is null then the function will not do anything otherwise it will have a image so i'm creating another variable called image temporary and we need to provide the image path and then after that finally we need to update our state and within the set state i will update this underscore image file variable which we have created initially and it will have this image temporary value now let's use that function so for this pick from camera here i will use this get image function okay this is the iphone so i will not use this pick from camera i will use pick from gallery and the source of it will be gallery and for the iphone we need to get some permissions as well and we need to get these permissions and we can specify these things in info.plist file so let's go to runner directory within ios directory and there we will have this info.plist file and here we can add those permissions so i have already created those now i am just pasting those here so these are the permissions which we need and under the key you need to specify the string and this message will be presented to the user while asking for the permission so i have already created those and you can see here it is matching the keys right now save it now after that as i have added these permissions to info.plist file i need to stop the app and rebuild it again okay so it has been rebuilt now let's click on this pic from gallery so here we can see the pop-up and here it is showing the text which i have specified here choose photo from gallery so that is present here now we need to allow the access so i have clicked on it now let's select an image we have selected the image but we are not seeing anything here because i haven't provided that image here so now i need to provide that image here and that i can do by providing some checking so here if image not equal to null so that means some image is present then we will provide image from file and the file will be underscore image file and let's provide some width and height to it and i will provide 250 pixel and for the feet of it it will be box fit cover and if it is not present then we will display this network image okay now save it now after saving we can see that it has been updated automatically as we have already picked it up and we have already updated the state previously now we have just provided the checking and based upon the checking it has displayed the image which we have already picked up now let's pick another image and it is updating perfectly fine right now i want to make this function dynamic right now i have picked the image from gallery and i have changed it from camera to gallery because of this iphone because in this ios simulator we cannot use the camera so that's why i have changed it to gallery so that i can show the functionality of the app from this ios simulator so now here we need to get the source and that will be image source and we can specify the source here which we will receive to this function and that we can specify while calling the get image function and here the source will be this image source gallery and for this one it will be image source dot camera for pick from camera button and now let's check it in android device so that we can use the camera okay so our app is running on android emulator now let's use this speak from camera button and here the camera from the android emulator has been opened now we can take a photo and it has been updated right so it's working perfectly fine now here we can provide a checking within try catch block within try block we will do the task and if it will have any error then it will catch the error and print the error message so it has been completed now i want to add one more functionality here which is to store the image to the app right now it is not storing anything it is just updating the state but i want to store the image to the application directory and that's why i have installed this path provider package and to use it here i need to create another function and that will be a future function as well and it will be an async function and here we will receive image path which we are getting from this image dot path and then get the directory of the app and that we can get from get application documents directory and it needs to be imported from the path provider package then we will provide a name with the image path name and we need to import this path dot dart package as well to use the base name function then we need to create the file within the directory with the file name so this is the directory which we are getting from this get application document directory and this is the name so we are creating a file within this directory path with the name of the file name and we need to return that and we will return this file dot image path and we will copy it from image dot path so here instead of this file temporary we can use image permanent and that will be using this function and here it will be image dot path and instead of this image temporary here i need to provide the image permanent now save it now after that let's test it again so it is updating the image perfectly fine and this time it is saving the file to the application document directory okay so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 31,925

Keywords: image picker tutorial flutter, image picker in flutter, flutter image picker ios, flutter image picker crop, flutter image picker by sample code flutter tutorial android 2021, flutter image picker, flutter tutorial, flutter tutorial for beginners, flutter path provider tutorial, flutter image picker package, flutter image picker camera, flutter image picker gallery, flutter image picker camera and gallery

Id: IePaAGXzmtU

Length: 14min 52sec (892 seconds)

Published: Fri Mar 18 2022