Flutter - Image Filters WITHOUT External Package | Flutter UI Design Tutorial

[Music] hey hello friends welcome to retro portal studio and in this video we're going to be taking a look at creating image filters in flutter without using any external package so you can see that here i have a list of image filters and i can swipe through them in the page view and different filters are applied on a sample image if i want to apply this grayscale filter i can simply click on this check button right here and the image is processed and ready to deploy it to a server or save it to your local storage so let's take a look at how to create these image filters in flutter okay so right now i'm in a simple flutter app in which i just have this my home page and in my home page i have the scaffolds and in the scaffolds i have an app bar which has a simple text of image filters and a simple action button that will be used to save the image and along with this the scaffold has a background color of black and a body which has a center with a container along with this in the project i also have this sample image which we will use to apply the effects on so the first thing that we'll do is in the container i'll add the property of constraints we need this constraints property to limit the width and height of this container this constraint takes a value of type box constraints and in the box constraint i'll have to give a maximum width and maximum height for this maximum width what i'll do is i'll come up in the build function and here i'll create a new final variable that will be of type size i'll name the size and put it equal to media query dot off context dot size now i can use this size property to give it a size of size dot width because we want the width of the image to be equal to the width of the screen now for the maximum height i'll give the same value because the image is going to be square you can use different size properties according to your own applications but for this case i'll have an image of one by one aspect ratio now for the child of this container we need to give it a page view so that we can swipe through the list of images for this i'm going to use page view dot builder and in the item builder function of this page view i'll give it a function that will take in the context and the index in the body of this function we're going to return an image that will come from assets and for the path of asset we'll pass in assets slash images slash sample dot png along with this path we'll also give it a property of width that is going to be equal to size dot width with this width property we can also give this image another property that is called fit and for this we'll set the value to box fit dot cover at this point in our application for the page view to work we'll just pass in a property of item counts and give it a value of four at this point if i save the app you can see that i have a page view here with four images that i can swipe through okay so now that we have a base ready for our application the next thing we'll take a look at is how to apply those filters for this the first thing that we need to do is we need to wrap this image with a color filtered so this color filtered widget is given to us by the flutter sdk and it takes in a color filter and it overlays its child with this color filter so the trick is to use this color filter property to our advantage this color filter property takes in a value of type color filter and this color filter class gives us with two major constructors that is dot mode and dot matrix this mode constructor is useful in cases when you want to overlay the image with a single color and you want to give it some blend mode but for more flexibility with rgb colors we want to use this metrics constructor now if we need to use this color filter.matrix we need to give it a list of doubles and this list of doubles basically represents an fe color matrix and if we take a look at this matrix function you can see that they have given us an example on how to create a grayscale filter so let's just copy these values and use them in the matrix so in the metrics what i'll do is i'll just paste those values and i'll remove the comments and at this point if i save the app you can see that the image is converted to a grayscale image now from this you can see that all we have to do is we have to create different matrices so we can apply different filters on our images now that we know how to apply these effects let's take a look at what is an fe color matrix you can learn about fe color matrix at this link that will be in the description of this video essentially an fe color matrix looks something like this basically what happens is that the color filter widget takes in an fe color matrix and performs a matrix multiplication of image pixels and this fe color matrix and because i don't want this tutorial to turn into a mathematics tutorial what i'll do is i'll take you to another website for which you can find the link in the description below and here you can create an fe color matrix according to your own taste now let's choose a metrics and use it in our application for now i'll select the sapm effect and i'll copy these values back in the application in the lib folder i'll create a new file and name this filters here i'll create a new constant and name this sapien the value of this constant is going to be equal to an array of double here you can see that when i paste the values from the website i need to reformat these for a list of double once the values are reformatted it will look something like this so let's use this sapient effect on the image and here in place of this grayscale matrix i'll simply pass in sapium at this point if i save the app and go back to the emulator you can see that the sap effect is applied on the image one thing you should know if you want to create your own matrices you should try to manipulate the values of first three rows and first four columns of this matrix all the other values should be left untouched so let's get back to the app i'll go to the filters.dart and here i'll paste in the values of a few more matrices that i have now i'll go back to the main.darfile and here in the state i'll create a final list that will be a list of lists of doubles i'll name this filters and in this i have all the color matrices that we created also in the page view dot builder instead of an item count of four now i can pass in filters dot length along with this instead of this constant sapient color that we apply for the color matrix we can now pass in filters and give it an index of index at this point if i save and run the app you can now see the color filter is applied to each image in the page view next we need to take a look at how to save these images for that what i need to do is i need to wrap this container with a repaint boundary and along with this i also need to create a global key for this i'll create a new final global key i'll name this global key and put it equal to a new instance of global key i'll use this key for the key property of the repaint boundary once this is done i'll come up here and i'll add a function of convert widget to image this function comes from a video that i created on taking screenshots in flutter and the link for that video is in the description below for this ui.image i'll come to the top of the file and here i'll import ui class from dart in a variable of ui also i'll import all the other classes now in the end of this convert widget to image function you can see that we have an unsigned integer list that we can use to create an image or save this image as a file the next thing that i'll do is in the lip folder i'll create a new file and i'll name this second screen for the second screen i'll simply create a new stateless widget and i'll name this second screen and on the top i'll import the material.dark file instead of this container i'll create a new scaffold and for the background color of scaffold i'll pass in colors.black and for body of scaffold i'll pass in the container and in the build function i'll create a new size variable and i'll pass in the constraints to the container in the second screen we also need to take in the unsigned integer list and i'll name this image data i'll also create a simple constructor and for the child of this container i'll add the image widget in this case i'm creating an image from the memory for which we can pass in the unsigned integer list that we get from the main screen now i'll come back to the main.jar file and here in the convert widget to image function once the unsigned integer list is created what we can do is we can use the navigator and for the context i'll pass in the global key dot current context and i'll push to a new page with the help of material page route and in the material page route i'll give it the property of builder and for this i'll pass in the context and i'll return the second screen and in this we can pass in the image data and that will be the unsigned integer list at this point all we need to do is we need to use the convert widget to image function for this i'll come to the app bar and here in the actions i have this icon button and for the on pressed function i'll pass in convert widget to image i'll bring back the emulator and at this point if i change the effect and click on this check button you can see that we're taken to a second page and the filter is successfully applied on the image from here you can use this unsigned integer list to create a new file on the local storage or upload it to the server one thing that i'll do is i'll come to the second screen and i'll wrap this container with a center widget and if i save the app you can see that the image is now centered on the screen i'll go back and choose some other effects and click on the check button and you can see that the image is ready from this tutorial you have seen that how easy it is to create image filters in flutter but one thing you have to keep in mind that this way can only be used to apply filters on image files i hope you find this video useful and you'll find the code for this in the description below and also in the description i'll link you to an article in which i have given some more effects that you can directly use in your applications if you find this video useful make sure to hit the like and subscribe button and also consider supporting retro portal studio from the links in the description below for more flutter videos coming your way see you next time [Music] peace

Channel: RetroPortal Studio

Views: 15,928

Keywords: flutter, flutter tutorial for beginners, flutter image editor, flutter image filter, image filter android studio, image filters in flutter, flutter image processing, flutter color filter, color filter flutter, flutter color filter widget, image editor app, flutter image editor app, image editor app in flutter, flutter for beginners, image effects in flutter, flutter android studio, flutter app development, flutter widget of the week, flutter widgets explained, flutter widgets

Id: qz95pL1-r1E

Length: 10min 13sec (613 seconds)

Published: Sun Sep 13 2020