Flutter Gallery Picker Tutorial | Image & Video Picker From Gallery Flutter Guide

in today's video I'm going to be showing you guys how you can pick media files from your devices Gallery in flutter we're going to be building an application which will allow us to actually click on a button and just access our devic's media gallery and then from there we'll have the ability to select the media that we want to display as you can see I'm going to select the following three so it's the C image the image with a car as well as a video and then it's going to take this information and display to us within our own application in a GD view so to get started the first thing that we're going to be doing is actually taking a look at the dependencies that we required to actually implement this functionality within our app the only package we're going to be using is the gallery picker package and this package will basically manage everything for us which relates to giving us the ability to pick images handling our permissions and everything like that so I'll copy this dependency I'll come back to pope.l and then I'll come to the dependency section and paste this here as a side not links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point I'll let flutter pup gets do its magic and while this is happening let's actually take a look at the setup we need to do on the Android side of things to get this plug-in working so for Android all you have to do is firstly you need to go to the Android folder inside of Android I'm going to go to Android app Source Main and then Android manifest.xml and here we're going to be adding some permission Clauses the first one that we're going to be adding is going to be read external storage so just before the application tag below the Manifest I'm going to add this permission and then after that since my actual application is going to have a Android SDK version that's going to compile above 33 and most probably you'll have to do the same so copy these permissions as well and then add these here I'm going to now do command save and I'm going to close down the Android manifest.xml file and with this now we're going to proceed to the iOS side of things and see what we have to do for iOS so for iOS we're going to go to iOS Runner and then from there we're going to open up the info. pist file and here what I'm going to be doing is coming to this section here which basically says all of the permissions that we need to add to our info. pist file I'll click on this clipboard button copy these key value pairs I'll come back and I'll add this at the top of my dictionary like so and do command save and that's pretty much all of the setup we had to do for both Android and iOS so when now this done let's go back to our lip folder let's come to main. doart and let's actually start running our application and see if it spins up on the simulator correctly and and then I'll resume the video Welcome Back everybody so now that my application is actually running on the simulator we can proceed with actually implementing the functionality so to implement the functionality I'm going to be adding everything to my homepage widget which is an empty stateful widget for now for the build method we are just returning a scaffold so I'm going to be adding all of the logic here and on my main. file for the build function where I returned my material app I'm just setting the home property here to be this homepage and that's pretty much all the setup for the app so the first thing that I'm going to be doing is that I'm going to define the body for my scaffold and I'm going to say this is going to be a call to a function called build UI and then what I'm going to be doing is that I'm going to say that for now I'm going to define a function which will return a vidget called build UI and then within this I'm just going to return a container and that's pretty much it and do command save now that this is done let's firstly implement the actual button that we can click upon to actually select files and then we'll take a look at how to display them so to create the button what I'm going to be doing is basically adding a floating action button property to my scaffold and I'm going to set this to a function that I'm going to Define and this is going to be a function which will return a viget it's going to be called uncore select image from gallery button and then I'll open it up and within this I'll say that I'm going to return a floating action button and then for the onpressed for now we'll just set that to be an empty function now that this is done I'm going to quickly add a child to my floating action button and this is going to be a icon with the icons. image so that it actually display place this icon on the actual button and then we can actually proceed to the logic of what happens when we click on this button so when we click on this button what I want to basically do is call the function on my gallery picker package so let's actually import it first I'll type in gallery picker and then press enter and this is going to basically import the gallery picker class then I'll do Gallery picker. pick media and this basically requires us to pass it two things one is the context object which we're going to be passing it and then after this there's a parameter that you can select which basically says do I want to pick a single Media or not so if you just want to give the user the ability to select only one media item from the gallery you might set this to True otherwise this actually defaults to false so I'm going to set this to false because I want the user to have the ability to either select one or multiple different media files now that this is done if we hover over pick media you're going to see that it returns a future and that future basically resolves to a list of media files so let's actually save this output into a variable so to do that I'll basically create a variable I'm going to say this variable is going to be of type list media files it's going to be called media files and I'll basically set this to the gallery picker. pick media function call and I'll evade this and since I'm using an evade statement now I'll also Mark my function as a sync and you're going to see that we're going to get an error if I hover over the actual code you're going to see that it tells me that there's a type mismatch error where a list of media file optional can't be given to a variable that's type list media file so to fix this what I'm going to be doing is basically using a null operator and I'm going to be adding two question marks and I'm going to be saying if the result from this function is null then we're just going to set the actual media files to be an empty list and do command save and that's pretty much all we had to do so now that this is done let's actually click on the button and see what happens so if I restart my application just to make sure that nothing's broken and then I go to the actual floing action button click on it you can see that the gallery gets accessed and I'm asked for the permissions I'm going to say allow all all and this is basically going to display the gallery to me and now I can select whatever media files I want to select so what I'll do is that I'll select this actual button at the top and I'm going to say that I want this one this one and this one so two are image files and then one is a video file so you can select both images and videos and then I'm going to press done once this happens you're going to see that we're basically now back onto the actual page that we left from but we're not actually showing the information that we had collected so let's fix that so to fix it the first thing that I'm going to be doing is that I'm going to come to the top of my homepage State class and I'm going to create a list and this is going to be a list of media file and then I'm going to say that this is going to be underscore selected files and I'm want to set this to a empty list for now like so once this is done within our onpressed call back function once we've selected our media files after that is done I'm going to call set State and within set State I'll set the selected files equal to the media files that we've obtained from our gallery to command save restart our application make sure that nothing's broken let's go back to our app click on this button click on the gallery and I'm going to select all of three files once again and press done and there we go we're back so now that we have a variable that's actually storing a reference to all of the media files that will be selected inside selected files we are now going to be using this to display this information within a grid view so let's do that so within my build UI function now what I'm going to be doing is basically replacing the call instead of using a container we are going to be now returning a grid View and I'm going to use the grid view. Builder function so similar to a list view. Builder a grid view. Builder allows us to programmatically build a grid view it requires a grid delegate so this is going to be of type slver grid delegate with fixed and then I'm going to use cross AIS count I'm going to set the cross AIS count here to be two and I'll explain to you what the actual cross AIS count in is is just a bit but before I do that what I'm going to do is Define the item Builder function and for now what I'll say that our item Builder is going to take in two parameters the context in the index and then the function for now is not going to return anything and do command save so now that this is done we can actually come to our item Builder So within my item Builder the first thing that I'm going to be doing is basically getting access to the file that we are going to be displaying so I'm going to create a variable of type media file this is going to come from the same Gallery picker package I'm going to it's going to be called underscore file and this is going to be equal to the selected files and then the specific index like so now before I do command save I'm going to come to the top I'm going to define the item count and I'm going to say this is going to be equal to the selected files. length and do command save once this is done what I'm basically going to be doing is employing an if statement where I'm going to say if our file do is image then the actual widget that I want to return within my grid view is going to be an actual photo provider and then here the media file is going to be set to file and then I'm going to have another elsif Clause so Els if uncore file. is video then what I'm going to be doing is that I'm going to be copying this same line of code but instead of returning a photo provider we're going to be returning a video provider and these are useful widgets that are automatically provided to us by the gallery picker that we can Implement to actually show photos and videos within our actual fotter app and command save that's pretty much all we had to do so you can see that the grid view lights up and as I had alluded to before since my cross access count is two on my actual grid I show two children and then I move on to the next row if I set this to let's just say horizontal you're going to say that now on the vertical axis I have two and then I can scroll between the actual list view like so so I'm seeing images when I want to see images and then if I scroll through my grid view if I am actually viewing a video I can click on it and this will start running the video and that's pretty much it for today's tutorial so I hope that you understood how to actually access files within the media gallery of your device and then display them within your flutter application as always if you enjoyed the video then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 375

Keywords: flutter image picker, image picker flutter, flutter image picker camera, flutter image picker crop, image picker in flutter, image picker, flutter image pick and crop, flutter image picker multiple, flutter image gallery, gallery images flutter, imagepicker flutter, pick images using flutter, pick image in flutter, image picker from gallery flutter, flutter photo gallery app, flutter gallery picker, flutter image picker ios, flutter camera and gallery, flutter access gallery

Id: mmtNZOqySX8

Length: 10min 20sec (620 seconds)

Published: Thu Feb 22 2024