Futter Custom Clipper | Quadratic Bezier Curve | Flutter Custom Widget | Flutter Custom Paint

one in this tutorial we'll learn how to build a custom widget using custom clipper or make a custom shape using custom clipper like as you can see from here so this is what we'd be building today well of course this is the code that i wrote early so i just put it there for display purpose so let's go ahead and get started so this is my default code over here and now of course if i run it nothing is there it would be gone okay so right now i have this one okay so let's go ahead and get started okay let's go ahead and get started so first we'll call the body property okay and within body we'll call container widget and within container only use child and childhood takes stack widget i'll explain why we are using stack widget uh stack widget of course takes children okay so we are using stack widget because as you can see from this picture we'll have two layers layer one and layer two so this little uh orange color or brown color and this is the red color right so this tool is to there are two different layers and they are put onto each other so that's why we are using stack widget and within stack widget first we'll use another widget so that's called opacity widget uh because you see the second layer over here we're gonna give it a bit of opacity so that's why we'll use opacity 0.5 and of course opacity widget takes a child and now over here we'll use a child which is called uh clip path click path this one okay we're using clip path because we want to use a custom clipper that's another class for showing partly of a drawing not the complete drawing or create a shape like this in that situation we use a custom clipper class widget so we'll take a look at the bit later very soon okay and now of course uh it it will take a child and within child we'll use container container and let's give it a text proper color so color colors dot deep orange accent this one and this will have a bit of opacity as you can see and we'll assign it height so we'll say height 20 all right um let's save it well if you save it we see like this so now what do you want to do we want to turn this thing to this kind of curve or wavy shape right okay that's what we want to do well now if we want to do that we want to use other property which is called clipper uh clipper okay and over here you need to send your custom function or widget okay and we'll call it wave clipper this is the function that we have to create okay as you can see it's not there and actually i have this function i'll just copy paste it over here so this is the function and i'll walk you through very quickly so web clipper at the end actually at its core it uses a function which is called quadratic major 2 this is the function that it uses first try to understand what how does quadratic and major they work so in general quadratic major curve it takes three points in general for a simple curve point one point two point three so this is a point where we start from and this is the end point and this is the called control point so if your points are like for example three points are in a cubic form so when you draw it it it becomes a circular bit circular or oval half oval shape like this so from this we understand that from p0 to p1 there should be a controlling point and the curve tends to go to the p1 so it's more like it is tending to p1 and slowly tends to p2 all right so that'll do it as you can see like here i've drawn on my hand by hand so in general it takes few points so point one or starting point in our case p0 p1 and p2 so in general p0 is the starting point and p2 that should be the ending point and what is this point p1 we'll say this is p1 so p1 is a controlling point so what do you want to do we want to reach from here to there and you will have a controlling point the higher the controlling point the higher the controlling point the higher this curve is okay so that's how it works and the top of this curve over here over here it'll tend to this point okay toward this point now let's look at another example so once again here is p0 well i didn't write the point here and here is p2 and p1 okay so and as you see p1 is close to p0 over here so this curve is bit toward between p1 and p0 okay or i would say more towards p1 and slowly get down to p p2 like that okay so that's the basic function of uh how the quadratic measure this function works okay so now let's take a look so it takes a starting point as i said early so in our case that is p0 so this is p0 right and we want to start from zero so zero means this x position is zero and this would be the bit of height so what is your height over here our height is 200 okay so actually this height would be taken automatically from here because this height is within clip path and clipper takes a clipper and when it takes the clipper property it takes the height of this child container or whatever you use as a child it takes that height okay and it takes it over there automatically pass it hopefully it makes sense all right so now so our starting point is over here zero and height so this is the starting point and this is p zero okay so next we also need uh uh controlling point which in our case i said first start or that's the controlling point actually or p1 in our case so this this is somewhere as you can see that uh one-fifth of the width so this is the whole width so one fifth of the width would be somewhere here somewhere here actually okay and then now we have this height okay so height is pretty much come down to this place so p0 and p1 is here okay well it's not that accurate because i draw it manually so it should be somewhere here okay and then now we have this the last point where we want to go that is p2 right so now p2 as you can see from here so the distance is pretty much the half a little over half you can think so as you see a little over half of the width so that's what we have now a little over half of the width and then we have this height so the height is not really 200 so it's from here to here okay so we so we deducted minus 50. so it would be somewhere here so our points are here here and here so we have these three points so the curve would be like this so that's what i draw over here try to draw and represent okay and now so after this drawing our curve would be pretty much like over here okay now let's take a look uh let's uh close it down let's close it over here and see what we see all right okay now let's take a look at our app over here so we have this kind of shape here so it ends over here right yeah so now for us so next for next if we want to keep going this would be our starting point okay the with the place where we ended right so hopefully it makes sense okay now so from here we want to start so now as you can see so this this is our point p2 this is from where we want to start once again let's see the monitor so it went up like this so actually the place the point is over here somewhere here right okay next so so this point would be our p2 would be our starting point once again all right so p2 would be our starting point then we also need a controlling point so controlling point is the second end this one okay so this is the controlling point so controlling point is a little up over here so as you can see uh sorry the controlling point is this one second start so the controlling point is second start so now the width would be somewhere here right somewhere here so actual width minus it's like one third of the width right so the actual width is this one and minus one third so we stay somewhere here so this place so this is the width and then we have the height so so this is the total height from here to here and then we do minus 150 so we end up somewhere here all right so so this is our controlling point our starting point is this and controlling point is this over here right with the second curve and the ending point definitely is this one so second end so width and height so we made a bit of change with the height so minus 10 so looks like they are not very parallel all right okay so now let's go ahead and see see it over here so now let's run it so yes now this is our first curve okay so hopefully it makes sense so we have few points here so p0 p1 p2 p3 and p4 these are the points okay hopefully it makes sense okay so now we have this one so next what do we want to do we want to draw the other shape on the top of it so in this case it'd be pretty easy just to repeat this one now what we need to do make a little bit adjust with this so for the second one we don't need to use the opacity because we want to use the complete opacity not partly so what we need to do we just copy paste this function okay and uh now put it down over here let's see opacity okay sorry so what i do i'll put it here okay now let's go ahead and run it of course it didn't change only the opacity change let's put it change the height okay uh because now because they they have the same height so they were overlooking onto each other perfectly so we didn't see that so now we are able to see it as you can see now we want to change the color instead of doing the color to this one we can do the color to say red okay see now it looks much better and of course within it we can also use a child okay let's go ahead and use a child and call it the text and within text we'll say web clipper okay and then you might use style style text say text style font size font size 18 okay and now we can use color colors dot white okay uh looks like we messed up a little bit somewhere let's see okay so now it should be the alignment problem so let's fix it very quickly so alignment center we want to put in the center so alignment dot center okay now everything is put from the center actually alignment happens from the center so it extends everywhere wherever as possible okay so will it make sense now so the the thing i say earlier say custom clipper is actually this one so because of custom clipper we can create a custom shape like this okay so you can play around these values and these values over here and hopefully it should make sense all right okay so if you like the video if you learned something don't forget to thumb give me a thumbs up and share the video thank you so much

Channel: dbestech

Views: 32,620

Keywords: Flutter custom Clipper, flutter custom painter, flutter quadratic curve, flutter bezier curve, flutter wave clipper, flutter wave animation, flutter tutorial, flutter complex ui, flutter complex ui tutorial, flutter complex ui design, flutter complex shape, flutter tutorial for beginners, flutter tutorial for beginners 2021

Id: 8QdLBQhnHAQ

Length: 12min 51sec (771 seconds)

Published: Fri Jul 09 2021