Flutter - How to Access Device Camera and Phone Gallery

[Music] hello friends my name is Irish and I welcome you all to this new video of flutter create in this quick video we are going to show you how you can do Act access the device camera or become image from the phones gallery so what I have here is a simple flat fresh flutter project which I am running in a similar in an Android simulator so the first thing I'll do is go to the pub spec 30ml file and under dependencies I will include image picker this is the plugin which we'll be using to access the device camera and gallery and that as soon as hit control s visual studio code will automatically fetch the dependencies for me if that doesn't happen to you you need to manually open the terminal and run this come on flood the packages get in your project directory so let me go back to my main door dart file and in here for the first thing I want to do is I want to remove all the existing content then I will include the material toward our package which is required for most of our functions then I want to include a diet package called the IO package this has the file abstract data type which we'll be using with the plugins which we just installed then I want to import the image picker okay ran into a small error and I'm going to tell you exactly what I did wrong I had put this plug in here below the dependencies key that was in line with the dependencies key and missed a tab it should actually be here under the flutter key in line to the flutter kick so now if I hit save it will run sort of access to get for me and if you fetch the dependency so now I can import the image picker file and the next step is to actually create our application so let us first do that now every stateful widget needs to have a create state method which will return its state class return state now it is time for us to create that shape class which will extend the state of my app this will have a village method there to be building our application Chris will return material apps that will have a property you to have a scaffold it will have an AB bar and through it all an AB bar that will have or title as we give a text that says image pic demo then outside the below the app bar I want to have the body of the scaffold in the body I want to have a column inside the column let us let us centre the scholar Seiler this is centered so inside the column I want to have an icon button oh I want to have children of widgets that is the adding of widgets inside the array I want to have the first element is an icon button that has an icon property which takes in an icon widget and icon which I want to have is the file I think file attached yeah die file should do just however this name to view this icon and we will create a blank on pressed method and then I want to actually copy paste this icon button here in between I want to have some space so I'll get this sized box that has a height of 10 point oh and there should be a comma after in here this icon button should have an icon that represents a camera I've used the camera alternative and after that okay let's just run this to see if this works this might take a while so I will simply pause the video and come back when it's up and running and we are back so as you can see that we now have two icons although this doesn't look really nice but we are not going into appearances right now we're just focusing on the functionality that we want to build so now I want to be able to pick the image of the camera or the gallery for to do just that I will create a state variable with the name image and I will declare a function get image and as you can see this is this returns a future as it lists an asynchronous function so and I want to expect an argument that will tell me whether or not to access the camera so if I want to access the camera that is if this is camera is true I want to be able to pick the image but to do that I will declare another variable and local variable here of the type file and I will set that variable equal to image picker dot pick image this takes and source as an argument and the source here will be camera since this is an asynchronous process I will await this so this will capture an image from the device's camera and store it inside the variable image else that is otherwise if I want to access the phone gallery I will set image equal to a weight image picker dot pick image source and this time the source will be my gallery so this will take an image away from the camera or from the gallery and store it inside the file variable image and now I want to set the state save the right I should see a sex tape here but I don't know what went wrong okay so the thing is that I'm so sorry but I am inside the wrong class here I accidentally always kept it this should actually be here so I will just copy and paste everything here I'm so sorry okay so yeah now I should be able to see said state and inside state I want to be able to set image equal to image okay so now that I have successfully set the state I want to display this image that we just captured or take from the gallery so in our build method I will check if the state variable is null because if it is null that I don't want to display anything so in that case it will just display an empty container but if it is not null then I want to display the image with using the image widget with the files property and inside this the items will be my image and this is what I want to display let's just put the height as 300 point O and this as 300 points all so that we can see the image clearly and once that is done we can now go ahead and actually press these buttons to capture an image of taken image if I press this button I think we need to restart this application for it to work correctly which is hot reload may not do the trick so I will just close it and open it again this should be competed in no time and oh I'm so sorry I didn't call the method here so actually I need to call the method this is the camera so I will pass through here and inside yeah thought so sorry now it should work so if I press on the camera button it'll ask me for the permission I can click allow this will open up the camera for me and I can simply okay got it thank you if I capture an image I can see their material so I successfully access my devices camera and captured an image here that was fun and effective from gallery it blasts my permission because it is the first time and then effective on allow then yeah we look but since I have no items in my gallery I cannot pick anything but if you have any items in the girls even definitely pick something from here so camera capture it appears so that is how it works so in this tutorial what we saw was instead of so many hiccups and my stupid mistakes what we saw was that we can access the devices camera and the phone's gallery to actually pick an image and display it inside our throttle application I hope you enjoyed this video and you found it informative if you liked this video hit like and so more such exciting content about flutter subscribe to our channel and stay tuned thank you

Channel: Flutter Create

Views: 27,569

Keywords: flutter, mobile app, development, tech, android, ios, tutorials, examples, guide, beginner, learn flutter, camera, phone, gallery

Id: LAhiqRzbx8M

Length: 13min 18sec (798 seconds)

Published: Tue Dec 04 2018