Pick Images from Gallery and Camera in Flutter (Quality Compression)

hello guys and welcome back to coding orbit if you haven't subscribed yet make sure to subscribe and turn on the notification bell so you don't miss our content today i'm going to show you how to select images from gallery and how to capture image from the camera if i click on select image it will show me list of images i can select whatever image i want and it will show it to us in this container if i click capture image same it will open the camera and i can capture the image click on this button and it will show it to us here now make sure to stay for the end of this video because at the end i'm going to show you how to control the quality of these images so let's dive in okay to get this started i have created a container inside that there is a child text image should appear here and then two buttons two elevated buttons capture image select image they don't actually do anything now here our flutter code we have scaffold inside it an app bar inside the text and then padding inside the padding there's a coulomb then inside it a container this container we are giving it a width and height and books decoration with some color and some border radius and some border then a row and inside the row two expanded widget inside them elevated button and they don't actually do anything now now to get this started the first thing we have to do is we have to add a library to our project so let's go to our browser and search for image speaker i will keep a link in the description for this library click on the install link and copy this thing so go to android studio then open pop spec.tml and under this paste this and click pub.get so we have to rerun our application so let's kill it for now and once this done we will close pubspec.tml and go back to the main and now what we need to do we will define a file to hold the path for our capture image or our selected image but when you are creating the file make sure to select file io not file html and let's call it image file and make this nullable so it doesn't complain later okay now down below we want to create a method and this method takes the source of the image if we want it and gallery image or if we wanted a camera image so we will create a void get image method and we will make it name parameter we would say required and this library has an enum and this enum tells us if it's a gallery or camera image so we will use this nm it's called image source and we'll call this source and we'll make this async and inside here we want to create a final file variable equal to a weight we want to await this process we will say image picker image picker dot pick image and we want the source and we've already provided the source so that's it we'll have semicolon here and we want to check if this file dot path is not null because if it's not null we want to set the state if this file the path different from null what we want to do we want to set the state for our variable image file so we can say image file is equal to file file and we can first unwrap it because we already know that this is not null and that's it that's it for this function we just want to call it from our buttons so we will call it from here we will make this arrow function we will say get image and we want to provide the source the source is image source now this select image so this is gallery we will select imagesource.gallery and we want to provide it here as well so we will make this our function as well and we will say get image now the source image source this time is camera so we will type image source dot camera and that's it now one last thing before we finish we just want to create another container for our image so i will copy this and paste it above it however i will remove the child property and i will add an image property here and it's a decoration image actually so inside the decoration image we can have the image this image is file image and file image and inside the file image we want our image file and we can first unwrap it because we will definitely check if if a file image sorry if image file different from null we will actually show this container and we will take it to the right side a little bit and we will show this container and we will take it to the right a little bit now let's run our app to see how it looks likes now okay our app is running let's try capture an image let's click on capture image and capture an image select this and it works let's try select an image and select an image and it works as well okay so this is because we didn't give fit the property for the image for so we can scroll up a little bit for the image and give it a fit the property and we can say box fit dot cover for example save it and hopefully it will appear okay but as you can see the border doesn't appear now so we can for example change the color to pure black and it appears better okay now as you can see let me select this car for example it looks pure and the pure images usually are bigger inside especially if the user capture an image so we can manipulate the quality of this image we can go down to this function now here with the source we have many properties to send for example you can send max width we can say max width to 640 we can have max height and for example 480 and finally we have image quality so this is an integer it takes from 0 to 100 and 100 means full equality 0 means no quality at all so for example let's for demonstration let's send past 10 and see how it appears and save it now and select another image and select it and look how it looks now it doesn't look really good however you can for example choose 70 and save it select this image and select it it doesn't look bad but it definitely reduce the image size so if you want to upload files from users like pictures especially capturing picture usually the camera takes for example two to three or four even sometimes four megas so you can do that to reduce the quality of the picture however it does look nice and you can try many picture to see if this is working you can select this like image speaking of like don't forget to like the video if you really like it and actually that was all if you haven't subscribed yet make sure to subscribe and comment down below if you want to and see you guys in the next video

Channel: Coding Orbit

Views: 12,234

Keywords: flutter image quality compression, compress image quality in flutter, flutter image compression, pick image from gallery in flutter, image picker, capture image from camera in flutter, flutter capture image from camera, flutter capture image, flutter, flutter image, flutter pick image, pick image in flutter, flutter pick image from gallery, flutter image picker, flutter camera, flutter tutorial, compress image flutterr, image picker flutter, Image picker in flutter

Id: MCw6rejNnmY

Length: 8min 41sec (521 seconds)

Published: Wed Dec 01 2021