Flutter Image Picker & Cropper From Camera & Gallery | Learn Flutter Fast

using the image picker and image copper packages I'll show you how to allow users to select images from their photo library or device camera and also enable users to crop the selected images let's get into it in our Pub spec let's add the image picker and image copper packages image picker requires some device permission set up on iOS in our info.plist there are three keys we can add depending on our app's functionality the first key is nsphoto Library usage description for accessing the device's photo library the string is the explanation that gets shown to the user when access is requested next is NS camera usage description for accessing the device's camera this is for taking photos and videos and last is NS microphone usage description for microphone access during video recordings you can add or remove Keys based on what your app needs no image picker setup is required in Android but because we're using image copper we have to add a new activity to our main androidmanifest.xml file let's handle selecting images and cropping in a helper file called imagehelper.dart to select images and crop them we need instances of image picker and image Cropper The Constructor will handle instantiating both image picker and image Cropper if they are not passed in this is useful because if we wanted to write tests for this file in the future we have the option to mock image picker and image proper create a method called pick image that takes in image source and image quality as parameters image sources either from the photo gallery or camera image quality modifies the quality of the image and ranges from 0 to 100 where 100 is the original or Max quality of the image pick image returns a future knowable X-File to pick a single image from the photo library return an awaited image picker.pic image passing in the source and image quality if the user does not pick an image then null is returned this code works perfectly for selecting a single image but we want to be able to pick multiple images too add Boolean parameter multiple that defaults to false if multiple is true then return an awaited image picker that picks multiple images because pic Multi Image returns a list of X-Files we should change our turn type to a list of X-Files and for pick image we first check if the file is not null and then return the file as the only item in the list otherwise we return an empty list let's move on to crappy images our crop method returns a knowable cropped file and requires an X-File and crop Style crop style can either be a rectangle or Circle then we await the crop image method from image proper passing in the crop style and path to the file we can also add additional parameters like compress quality to control the image compression quality UI settings to set platform-specific functionality and styling and more back in main.dart let's make a new widget called profile image to test out selecting an image and cropping this is a stateful widget that takes in a string for initials and has a file image for state add a circle Avatar that displays the initials as text for the foreground image we show a file image if the image is not null make sure to wrap Circle Avatar in a centered fitted box with box fit.containe to scale the image properly in the circle Avatar blow this will add a text button that selects the image and to save time in this video I'm going to Define image helper as a global variable however I recommend using provider or get it for dependency injection instead the source is automatically set to image or stock gallery note that image source.camera only works on physical devices so be sure to use a physical device to test if a file is selected then we crop the image with a circular crop and assign the cropped image to the image variable we can now select an image and crop it let's make a similar stateful widget for multiple images where there's a list of files display each image by mapping each file to image.file inside of a wrap widget the text button below picks multiple images from the library and sets these State accordingly and that's all we have to do for multiple image selection [Music] image helper also enables you to record videos using the camera and select videos from the photo library I'll cover this in a future video so be on the lookout for that if you like the video don't forget to leave a like And subscribe and be sure to check out the links in the description below thanks for watching and I'll see you in the next one [Music]

Channel: Marcus Ng

Views: 17,128

Keywords: flutter tutorial, flutter image picker, flutter crop image, image picker in flutter, flutter compress image, image picker flutter, flutter image cropper, flutter cropper, image picker, flutter image pick and crop, image cropper in flutter, flutter device camera, flutter image crop, flutter image picker multiple, flutter image picker crop, flutter image picker camera, crop image in flutter, flutter camera, flutter tutorial 2022, flutter done fast, flutter image picker 2022

Id: qYCsxvbPDC8

Length: 4min 45sec (285 seconds)

Published: Fri Nov 11 2022