Flutter Tutorial - Image Picker From Gallery & Camera

we all might have come to a point in our mobile developer journey to either pick some images or videos from the device gallery or camera image picker plugin helps us do exactly that in this part we are going to show you how to pick a single image from gallery and camera and display it in the flutter app to implement the image picker we need to use the image picker package so the first thing we need to do is to add the package to the pub spec once the package is installed we would need to make some changes to our in IOS and Android config files according to the package document we don't need to apply special settings for Android but for iOS we need to add these keys in infodoplist if you run the app and come across this error to fix it just update the distribution URL and Gradle wrapper to this URL and also update the Gradle version in build.gradle to this version I put two buttons on the page pick image from gallery and pick image from camera when we click on the first button we will select a photo from the gallery and when we click on the second button we will take a photo with the camera let's define a future method named pick image from gallery now it's time to use the image picker package to select a photo from the gallery for this we need to use the pick image method in the image picker class the pick image method has a parameter called source which we have to specify the source of photo selection which we set as gallery when the photo is selected this method returns an x file that we must use to display the photo so I save the return value in a variable called returned image now we have to display the photo we selected for this we first Define a global file variable called selected image then we check if it is not null we display it using the image.file widget otherwise we display please select an image text now we have to go back to the pick image from gallery method here when the image is selected we have to set it in the selected image and use set state to change the value of the selected image and update the page for testing we must call this method so when we click on the button we can call it as you can see the phone gallery opens and we can select an image now if we select an image we will see that image is displayed let me show you something now if we stop in the gallery and do not select image we will see this error the reason for this error is that we did not select an image and we set the null value in the selected image to handle this we put a condition before a set state that if the returned image value is equal to null don't go to the next line to select the image from the camera we must execute the exact same method but instead of using gallery in the source property we must use camera so I copy the same method and change its name to pick image from camera and also change the source to camera and then call this method and make sure hit the Subscribe button to get next video [Music]

Channel: Flutter Guys

Views: 39,973

Keywords: flutter tutorial, flutter image picker, image picker flutter, programming for beginners, learn flutter, flutter tutorial for beginners, flutter project, flutter projects for beginners, flutter image slider, android, android developer, android development full course, android development course, ios development tutorial for beginners, ios development, ios development roadmap, kotlin tutorial, kotlin tutorial for beginners, swift tutorial, flutter widgets

Id: vwSY5Q-mVMs

Length: 2min 54sec (174 seconds)

Published: Sun Jul 09 2023