Flutter Tutorial | Share Plus & Image Picker - Package of the Week Ep.5

hello everyone and welcome to the episode fifth of our package of the week series package for this week is share plus i recently got a comment from one of you guys in which someone was having issue in selecting multiple images from gallery and then sharing those images or even the text to some other platform like whatsapp gmail instagram etc so i thought why not to create a separate video for this so in this tutorial we will be using the shareplus package alongside with our image picker package let me show you what we'll be doing in this video so here you can see we have our android emulator running so on the screen you can see we have these two text field in which one is with the heading text and the subject other than that we have this button here the share button and above that we have this add image and now let's say if we click on this plus icon then it will open the gallery and it will show me to select a particular image let's say i go and select this so this will select that image and bring it inside this place which is our image viewer where we will be displaying all the images that have been selected and also what you can do is we can select some more images and then this will create a horizontal list of items let's say if we want to remove this this blue one we can click on this delete and now we have these two images only let's say hello backslash these are some image samples so this subject will be attached to the gmail whenever we will be sending the images this is an alternative field the thing that will mostly be shared is this text field so if you click on the share button here here you will see we have these options like we can do a nearby share we can also edit these images we can share to gmail let's say i click on gmail and this will give the subject here these are some sample images that we displayed that we typed there and then we have this text another than that we have two images we can just send it to each whatever person we want to send and if i go back i can let's say i delete this one i am not sharing any images right now if i click on share so i can copy this hello backslash to our clipboard also and i can also share to my drive your normal sms or gmail so now you can see we are sharing the subject and the text here so this is everything that we'll be building in this episode first by utilizing the share plus package and also our image picker so without any further ado let's get started okay so here you can see we have our android emulator running and on the side of this android emulator we also have our visual studio code in which we have this project open now this is the boilerplate port so what we'll be doing is we will delete everything from here and we will write import material dot dot and then we will have our void main which will be the first function that will be called when this application will be running so we will write my run app and then we will define a my app we don't have a my app for now we will do a stateless widget we'll do my app and here we need to return material app okay this will be material app and for this material app we will create a home let's say with the name home screen but you might be thinking where is this home screen so let's create a home screen here click on save and this is showing an error because we need to return something else we will write return container i guess we have to close this and now we got this black screen here i think we can change this we will light scaffold and here i can provide a const value and for the debug banner that you are seeing here we can remove it from this okay so now we have this here we have our home screen so basically what we'll be having is if you have seen the design we we were having two text field this was with the name text then subject then we will have a list which will be by default an empty list so we will be displaying a container because by default when the application will be loaded we are not selected with any images so that will be an empty container below that container we will have the option to select our image and once we select our image then we will have our share button so that will be also present here so if you see this is a column so we will write scaffold then we can do a body this will be column and as far as the main access is concerned so we will write minixes dot start children can be we will provide a text field and we can click on save so we got a text field here i guess this will be okay so this will be center and cross access can be start if i click on save okay this is aligning here so we can provide a little bit of padding wrap with the widget padding we can provide a symmetric padding because i only want the horizontal axis to have some padding so we will do horizontal let's say 14 or 16 okay 16 is okay you can also shift with 20 yeah so we got this first text field and then we will also have another text field click on save now for this text field we can have the declaration this will be input declaration and we need a label text as text click on save okay you can also provide some hint text enter your text here click on save and now if i click on this okay enter your text here and provide a colon here perfect and saving it inside one string which will be with the name and we will write string text is equal to an empty text and we can also provide a subject here and click on save and whenever the value of this text will change so we can take the value that has been changed right now and set the state so we will let site state text is equal to value click on save and now if i let's say print this value in our debug console then you will see what this on change will do for us if you go to our debug console and whenever we enter any text a okay this means this is working we can just reload our application and remove this print statement from here we can just copy this text field one more time and this will be subject where we can write enter your subject here click on save and for this we will change this to subject and now we got the two text field done so we can provide a little bit of side box here with a height 10 let's say so after size box we will have this list of images but before that we can do a list tiles which will be leading can we and icon icons dot add and what we can have next is this will be title text with the name add image and we can do a font value here also now because i guess we will have an on tap here and now this will be an important part now here you can see whenever we will be clicking on this add image we will be calling our image picker package and then getting the images from our gallery and then displaying here inside the list so this means we have to first of all add all of the packages so we will be opening our safari i will go in here the one way is you can directly copy this here you can see okay they have not provided the pub spec ml file here so i guess i can do this like this and other than the share plus we will have one more thing which is our image speaker so here it is you can just copy this paste this here click on save now this will do a flutter upgrade and get all those packages and add them inside our project so we can just call them here okay this is an unnecessary import so now if you see the image picker for our android there is no need to add any other specific requirement because it is mentioned here it is no longer required to add android request legacy external support is equal to true as an attribute so this means there is no installation step for the android but for the ios we would have to add all of these key this is a ns photo library usage description and ns camera and ns microphone so i will show you a quick tip what you can do is whenever you see a package here so on the right side you will have this repository you can just open this in a new tab and for each and every repository that have been published to pub.dev there is an example folder in this example folder we will have the implementation of this image picker implemented in this so if you go to this example folder and go to our ios and inside this we have a runner in which we will have our info.plist so we can look at these values and search for our ns photo library okay these are here so we have this key ns camera and the me then the description which is in this string and we have another key then string then another key the string so we can do is we'll copy everything from here and we can go to our info.plist and do remember do not paste after any key let this because this is a key and string so these are in the combination you can just go to the top and paste all of those values here okay so this will make our io simulator working but for our android we don't have to add any of these things the only thing that you have to do is just quit your terminal and after you create your emulator here you can see we can just run this again start debugging okay and i'll just wait for this to finish okay so we got the application started here and now as of now we don't have any on press for this or rather on tap for this so we can create an on tab here and now we will call our image picker okay if you call this we have to first of all initialize this so we can do a final image picker and is equal to image pickup and now we can update for image picker to pick the image and it is asking for the source if you click on this this is with the class image source so we will write image source and we have two options camera and a gallery so we definitely want to go to our gallery section and now i guess we got this done so this is showing as an error because we have to also write async here i can click on save and now you will see we have this function here but we also need to store these values so we will write pic file okay and now we can do unnecessary check which will be seeing whether we have actually picked up the file or we are just playing with some random values okay so if pickfile is not equal to none only then we will be executed some of executing some of the tasks so the task that we will be doing is we will be creating a list and inside that list we will have the items which will be the path so in let's say you select a particular image which is image one so the image one after being selected will return a particular path inside the emulator and we need to just get that part and save it to a list so we'll be creating a list which will have different parts and we will be passing all of those paths to one particular widget which will be displaying them and this is the thing that we seen in the starting we are displaying a horizontal list and we'll be get getting each path value and displaying in the list so let's see how we can do that if pic file is not equal to null what we want to do is first of all let me create an empty list here so this will be okay this can be list we know the type as a string because the path will always be in a string so we can write image path we are writing image path because we know these can be a lot of values and i guess this can be an empty list for now click on save and now whenever the pic file is not equal to null we will just do a set state and do image paths dot add and we can do pick file dot path okay the pic file is a normal x file we need to get a path so if you see here we have a lot of options like the name the path so we can just do a path here and click on save and now we got the image path here added to the list let's see whether we really get this added what you can also do is we will be printing our image paths okay i can click on save let me just go to my debug console clear everything from here and now if i click on add image this will open up the gallery okay so we got the gallery open and now let's say i selected this image so data user 0 com dot example share plus youtube cache then we have the image picker so this means we got the path here and added to a list so the next step that we have to do is we got the path here so i guess first of all let me just create a button this can be elevated button and we have to provide a little bit of value there and the child can be text or rather a const value and this will be share click on save okay we are displaying them here let's say i change this to center yeah sure and the other thing that i can do is i will provide a little bit of height here let's say 10 click on save ok and now inside our elevated button if the text field and the subject field are empty we want this to be displayed as non-clickable value which means this will not be clickable if the text fields are empty so what you can do is we will do a text dot is empty and then image paths dot is empty then we can return a null else we will be calling this function which will be share okay we can create this function here this will be void share and like this click on save okay so you can see after we reloaded the application this text is not clickable right now if you enter any text here and this button will be clickable now okay if i remove anything okay now we cannot click on this sure so this means we got the logic here you also implemented you got the void share and we have this text field list style the only thing that we have to do is above this add image or this means here we will be calling another class which will be our image showcase so we can go to this library and we will be writing image showcase dot dot you can create import material dot dot and this can be a stateful widget where we will write image or rather this can be in stateless widget we don't need to update anything so this will be image showcase and click on save and here i can return a container for now okay we can just call that image showcase that we just created and this will be image showcase and obviously we will be passing the list of image path from our main.dot file to our image showcase so what you can do is we will write list of string and this can be image paths and we can create the constructor value there i guess what we have to do is we will write required this dot image path and remove this okay and now and now what we can also check is image path is empty if this thing is empty or rather we can do this like the image path dot is empty then we can return a empty container okay we also need to provide this condition image path dot is empty and now this is okay other than this we can simply written one more container perfect and right now we don't have any image so let's see whether this will print a child text h e if i reload okay i guess there are okay so we have to also pass these values there so this will be image path and this is a list so this will be like this if i click on save so we got h a here this means currently the image paths are empty so if we go to image showcase we can remove this this will become a container now what we'll be doing is we will be creating a particular list and that list will contain all of our widgets so this means we will have final image widget and this will be and list of type widget perfect and we will be adding each of the images inside this widget section so we can also do something like for i is equal to zero i is less than or is less than image path we will be traveling across this particular image path and here we will write image plus plus and now for each and every value we will do image widget dot add and now the thing that we can do is as i mentioned you that this image with it will be a list of widget okay this means we have to first of all also give one single widget which will be inside this add item which means we can only assign the widgets value here so we can write this as single image showcase okay and we can create a stateless widget here single image showcase we can just simply return a container for now we don't need to do much work here and i guess we will be first of all getting few value there we will be getting a final this will be the image path so this will be string image path and i can also make this fine okay and now this will be const value and i can write the final layer and this means we have to provide the image path here and for image path we can go to the list of image path and for each and every i value so let's say the image path is 2 so this means i less than 2 and then i plus plus so i 0 then i 1 so this means it will go to the image path and then in bracket we can provide the value of i why is it showing another okay i can click on save and now if this is empty we can return this else what we have to written is we will return a row the reason we are returning a row because inside that particular row we will be creating a horizontal scroll so for creating that scroll we can wrap this to the widget which will be single child scroll view and we can set the axis okay let me see what is the property there see this okay this is crawl direction so we can write scroll direction this will be access dot horizontal because we want this to be an horizontal scroll you can click on save and now for row there will be the children can be this image widget that we created so this means image widget i can click on save i can click on reload let's see whether this is working or not so the way you can do is let's say in this container we will be printing the image path okay and if i click on this add image let's say select this image okay so we are displaying the image here and this is an x a horizontal scroll also this means the logic is working here what we can do is we will be first of all defining few things like a little bit of padding adding what we want is from all the side this will be all eight and the child can be our stack the reason we are using stack is because we want the items to be stopped on top of each other so we will be having our delete i delete button on top of our image so the child can be first of all the size box with a height let's say 200 and which can be 200 and for the child we can have as this is a particular file so we will be calling our file but remember instead of importing that html you have to import dot dot io and here we will be providing the image path that we have i guess you can close this up or the issue here the argument file cannot be assigned to the type okay the way we can do this is image dot file and for the file we can create this and for the fit we can write boxfit dot cover if i click on save okay so we got the image added here let's say we add one more image okay this is a horizontal scroll also so what we did let me just recap everything for you so from our main.dart file we click on this list style which will be our on tap and on tap will be calling our image picker widget and for image speaker we will begin picking up the images from our gallery and if the image is not null then we will be adding the particular path which i showed you in the debug console to this list this is an empty list for now so we will be adding each of the values there now after we got items added we will be passing all of these image path to our image showcase so this is our image showcase if you see here definitely this will have the parameter image path because we are fetching the values from our main.file to our image path and now we got this done so we can provide a particular condition image path is empty which means then we can return a container now we can also return a single child scroll view because we want them to be scrollable in the x-axis so this scroll direction is access those horizontal now instead of creating a separate widget for each and every image we just did is we created and for loop which will be going through the list of items that are present and for each and every item this will create a new list which will be with the name image widget and that image widget will be having our single image and this is the single image so we can provide one more thing let's say this is a sidewalk so other than that we will have a position tab or rather the position widget with a right can be zero and a child can be let's say a little bit of padding here and we can provide the floating action button because we already have that with us on press can be a function which i'll be coding in a while background color can be color sorted and our child can be icon dot delete and click on save okay so we got all of these added here and now we got these done so let's first of all go to our main. file i will be creating this void share function if you open up your safari here you will see inside our let me open this shareplus and also bring this to my desktop so we have the share plus here so we have two functions first of all we have the share function and then we have the share file so in the share files we'll be sharing all the images and in the share function we will be sharing the text and the subtitles so what you can do is first of all checking whether our image paths are empty so if they are empty then we can do a simple share which will be a text in subtitle so we will await this means we have to also write the async here and now we will call share dot share and we can provide properties like text and then i guess subject and subject i can click this else what we can do is we will await share dot share files then we can provide image paths and i guess we have some property like text if you can hover over this we have the list of paths which will be our image then we have the text and subject so we got the text and the subject i can click on save and let me just reload and let's see what will be happening here so let me just write shivan singh if i click on share this will open up a bottom sheet and here i can copy this shivan thing to my clipboard okay the chances have been copied also here let's see whether this is working in our mail this is test email and let me just click on save share this in our gmail this is working which means we can also now add our images i can add this i can add this this is an horizontal scroll view and if i click on share okay so we can share those images also but what if i want to delete these images for that what i think we have to do is we can create a function delete images this will be void delete images what we'll be doing is we will do set state and we will call our image path list and remove add and now we need to get a position so we will write position rather this can be initialized value of position so what this remove add is doing it will take the list that we created and it will go to the particular image path and remove the particular position and now i guess we can go to an image showcase and we can create this this will be function of type integer on delete why they showing me an error here okay so function will be of this type i guess and now i need to just add the final values okay i can click on save and i guess we need to create a callback so this will be on delete you click on this i will write required this dot on delete i can click on save here and for on tap we will be doing on delete click on save so this means our single image showcase is working but the thing what we have to do is we will write on delete and now this is a tricky part here first of all we have to check whether on delete is not equal to null the reason we are checking is because whenever the application will be loaded for the first time the definitely the value will not be present here so we need to check whether this is not null if this is not null only then we need to call this on delete and pass the value as i else we will do null in this we can create a null level value click on save let's say we reload okay let me just reload why is it not reloading the application okay so we have to provide this on delete delete image and this will show me an error main function cannot be assigned okay back to this or rather if i click on save and go to this place integer value and now if i go to my main dot dot file okay the image and we can just reload and now if i do hello world if i select one image let's say i select one more image let's see whether we can delete this okay and also we can delete that so this means we have successfully imported the image from our gallery and also displayed them in our horizontal list we've also integrated the sharing feature which was the package for this week and i guess this is everything for this video so if you watch till now then thank you for watching and if you have not subscribed to our channel yet then please hit that subscribe button to never miss any of our future videos thank you

Channel: Backslash Flutter

Views: 2,748

Keywords: share plus, image picker, flutter package of the week, share plus and image picker, flutter image picker, flutter share, flutter tutorial, flutter, flutter share plugin, share ios, share android, image picker android, flutter tutorial for beginners, package of the week, backslash flutter

Id: TiOsAECt1r8

Length: 31min 23sec (1883 seconds)

Published: Mon Aug 22 2022