ImagePicker Widget in Flutter | 30DaysOfFlutter | Flutter UI | Flutter series for Beginners

[Music] hey there this is akshay madan and welcome back to the day 17 of 30 days 30 concepts of flutter series and in the last part we were seeing the tab bar widget so in this part we are going to see the image picker and that's a very useful widget whenever you want to implies a feature of picking the image from gallery or from the camera you can not only pick the image you can also pick the videos and you can also pick multiple videos and multiple images right so if you want to know more about this package that is image speaker package you can go to pub.dev search for image speaker and you will have the great documentation right so now let's see a glimpse of this package in this video so in the last part as you know that we were seeing this tab bar widget and i hope the concept is clear to you so now in the widgets folder i'm going to create one more file and i'll call it as image picker dot dot image figure dot and yes if you directly want to access the code of every widget you can go to my github repository in the description and you can access the code right if you have any doubts and all so i'll import material.dart first of all after this i'll define a state full widget i am defining a state full widget because after picking the image the state of the app is going to change because i'm going to define an container i'm going to define a container over here and if the image is picked then the image will be shown in that container that means the state of the app is going to change after picking the image that's i'm going to define a state full widget now let's call it as image picker widget right and the pub spec dot yaml uh you can see that image picker package is already added i've added it right so let's go to image picker dot dot and then i'm going to return a simple column and in this i'm going to define children and let's wrap this column with the center now in the children i'm going to define a container with a height of 300 and let's give it a color so that it should be visible to you colors dot gray dot shade 200 now let's give it a child and for now i'm going to give it a simple text image not pick and after this container i'm going to define a simple text button or let's say an elevated button so i'm going to define an elevated button which will have an on press property so i'm going to define the function soon and it is also having a simple child and i'm going to call it pick image right and if i just save it and for that i have to go to main dot dot and return image speaker widget yes now let's save it and i forgot to do one thing that is defining a scaffold first of all that's why it is looking like this so i'll just cut this center from here and define a scaffold and inside this scaffold i will define an app bar with a title simple text and the text will be image bigger now let's define a simple body to it and in this body i'm going to paste that complete center thing and i can remove the semicolon and put the semicolon over here so let's save it yes so you can see something like this but width should also be infinity so i'm going to define width as double dot infinity the comma and if i just save it you can say something like this so what i can do is in the main in the column i'm going to define a main axis alignment and make it main access alignment dot center save it so everything is at the center now and let's wrap this text also the center let's save it uh this text we have to wrap not the abber text so let's wrap with a widget called center and if i just save it perfect so now what i want to do is whenever i click on this pick image button it should take me to the gallery you can also define image speaker.camera but i'm going to define first of all gallery so first of all we need to define a variable of x file type why are we defining x file not a simple file because we want to uh make it available in uh all the platforms so it is cross platform file right that's why x file so i'll call it a simple file and let's put a semicolon and for this i need to import image picker dot dart right so this is a simple empty file uh variable or we can say object of x file class right now i can go in this elevated on press thing and i can start writing the main function and this function is going to be async because it is going to take some time that's why i'm going to define it as asynchronous and over here i'm going to define final x file let's call it photo is equal to and we also need to define uh object of image picker class so i'm going to define image picker picker is equal to image speaker put a semicolon and now i can access that object picker dot pick image and we need to define a source so i'm going to define the source as image source dot gallery and we need to define this as await so let's write await and we can okay s is small so let's make it capital and there is no error now right cycle i can just go in view and click on word wrap so that you can see every text perfect so we have uh picked an image from the gallery and we have saved it into photo now we need to change the state right so what i will do is i'll define a set state and in this set state i want to give this photo data to my file right and this file we are going to show in my container so let's write file is equal to photo and we can put a semicolon perfect now i can just save it right and after setting the state i just want to print a simple message also image paint save it and i can [Music] just click on this button so it is taking me to the gallery and i can take any image so you can see that image pick uh string i am able to see over here in the console whatever what i want to do is my target is to show the selected image in this container right so what i can do is first of all when this file is equal to null right so what i'm going to do is so what i'm going to do is if my file file is equal to is equal to null question mark if the file is null then i want to show this text if the file is not null so the another condition i want to show a image dot file so image dot file this file is not equal to null that means the photo is selected from the gallery right so i can define image dot file and in this i can write file and if you will just try to write that this file over here let's say right i have written this file then it is going to give me an error because you can't provide x file thing to your image dot file right you have to provide a file of type file only not x5 so what i'm going to do is i'm going to convert my file dot path and for the file i can import dot io and for the null safety i'm going to write a simple exclamation sign so you can see that over here what i'm doing if my file is equal to is equal to null then i'm showing this simple text image not picked but if my file is having some data then i want to show image dot file and inside it we have we are converting the file selected uh that is of type x file i'm taking the path and i'm converting that file in inside this path into a file type right you can see file that's why so when i just save it you can see the image is over here so let's uh write a box fit dot cover so where is my image yes image.file and after this i am going to write dot cover and i can save it and let me just decrease the size yes so i can just save it so now let's refresh it and i'm going to select one more image and then i'm going to show you how you can select multiple images and you can i'm going to print all the parts in the console so let's click on pick image and i'm going to select this image this time and you can see the image is inside this container that means the image is selecting very perfectly now let's say i want to get the path of this image so what i can do is i can just print file or we can say photo dot path and put a null check and put a semicolon and save it now let's say i open the console and i'm going to refresh the app and you can see image not picked and if i click on this button and select this image you can see that this is the path of the image so you can use to you can use this path to uh get this image anywhere on on this app and you can also save this in your database if you want right so this was how you can select a single image now let's say i want to get a list of images selected right so now over here i'm going to define list of type is x file only and i'm going to call it as files this time put a semicolon and i can put a null check perfect so now i can just copy this elevated button and i can paste it below this and let's say i'll call it as pick images now in the final i'm going to write something else so i'm going to write final list of x file is equal to and let's call it as photos is equal to await picker dot pick multiple image right and you can put a semicolon and in this we don't have any source right so it will directly take me to the gallery only for multiple images and now i can just write files is equal to photos and i can uh print this image you may is picked and i can run a for loop to print all the paths so what i'm going to do for and i is equal to 0 i less than files dot length and put a null check and do a i plus plus and inside this for loop i'm going to print files at i dot path and we need to put a null check over here and i can put semicolon and we are done so let's do it let me let me open the console let me just refresh the app and now i can click on pick images button and now you can see that i am able to select multiple images so let me choose all the three images and click on select and you can see that all the three parts are in front of me two are jpg files and one is png files right so i hope you like this video and if you have any doubts you can reach out to me on my telegram channel and for more documentation you can just uh go to pub.dev and search image speaker and you will get each and everything of this package so i hope you like this video so till the next content keep coding keep innovating and thanks a lot [Music]

Channel: Akshit Madan

Views: 2,004

Keywords:

Id: MRbSfTN9P14

Length: 13min 54sec (834 seconds)

Published: Sat Jul 31 2021