Flutter Custom Painter | Custom Path & Paint

hello everyone assalamualaikum here we'll take a  look how to draw a custom shape like this using   custom painter without any image now as you can  see over here we have a container inside the   container box decoration and then we have a child  this child takes a widget which is called a custom   paint now inside the custom paint we have an  object or property that we can use which is called   painter for painter actually we are returning a  widget so what is this widget and how to work with   this let's take a look now this is the widget  that I was talking about this widget extends   custom painter now custom painter actually does  the magic if you extend custom painter there are   two methods we should you should override which is  paint and should repaint we have to overwrite them   and simply if we if our job is pretty simple then  we can just simply return false for should repaint   but the magic will happen inside this paint method  now paint method has canvas and a size so you   don't have to worry about them how where do they  come from flutter takes care of it automatically   for you and after that the first thing we want to  do for drawing a shape like that the one we saw   early we have to get paint object so this is how  you get a paint object first you call the paint   Constructor and you get the color object from  it and then you assign a color to it so we are   getting an assigning white color for it and pretty  much with the 0.1 percent opacity and after that   we have to create a path object because we want to  draw a custom path now you see that we have this   path object now Pat object has a function which  is called move to line two and close now because   we are going to draw a triangle for triangle we  needed three points so here are the three points   now definitely the first point refers to zero zero  over here now second Point refers to the point   over here now how do I explain and understand  this one now it takes X and Y so this is X this   is y for line two it's the same X and this is why  now because we are horizontally and we're going   to move from this point to this point now that is  20 of the screen so in this case we write 0.2 so   we get 20 of the screen but y doesn't change so  Y is still zero so that's why here we assign 0.   how about this function over here it takes X as 0  because horizontally over here we are not moving   at all but vertically we are coming down and how  much we are coming down 40 percent of the total   height so after getting this at three points we  close the part and then we draw it to draw it   just simply pass it down to Canvas dot draw path  we have to pass path and paint object and it does   the magic here we draw another shape pretty much  like a rectangle now this shape has four points   over here first point second Point third point  and fourth Point among these four points this   is the first point when what is this refer  to this referred to this point over here   now this is complete X over here so this is the  screen width and then Y is still zero at this   point so that's why we have a complete width and  zero now let's take a look at the second point so   this is the second point where inside this line  two actually it refers to the point over here now   over here from here it is the eighty percent  so that's why we do 0.8 and at the same time   y doesn't change at all so Y is still zero now  let's take a look at the third point so this is   our third point for third point we are referring  to the point over here now this point over here   actually 20 percent of the screen so that's why  we write 0.2 now as you can see we are completely   coming down from zero to the height so that's why  we write size dot height which gets the screen   height and this is our fourth point and fourth  point is X completely is taking the width and Y   which is vertical as taking the height so if 0  0 refers to this one then width and the height   would refer to this point and after that we close  the path and once again we draw we call the draw   path method by passing our path and paint object  actually you can draw more custom shape now it   depends on how many points you have in your custom  shape but the basic principle is same thank you

Channel: dbestech

Views: 9,546

Keywords: flutter custom paint, flutter cusotm painter, flutter custom painter tutorial, flutter custom shape, flutter custom drawing

Id: Ql-AGte1mr8

Length: 4min 50sec (290 seconds)

Published: Sat Oct 01 2022