CustomPainter and Polygons in Flutter - Learn How to Draw Custom Shapes in Flutter Plus Animations

hi everyone and welcome to this chapter of flutter animations course this chapter and all the other chapters pretty much in this course are part of a bigger playlist the link to which you can find in the descriptions of this video so the videos that I put out in this playlist at least they build upon the videos before them so in this video we're going to talk about quite a lot of Concepts which are new but also a lot of things that we've already talked about before such as animation controllers chained animations Etc so for those of you who've landed on this video just individually without having followed the rest of the videos I really recommend that you have a look at the previous videos before following along with this one just because I'm gonna jump over some of the concepts that I've already explained before so without further Ado let's just get into it in this video we're going to talk about polygons and custom painter in custom paint and the reason behind that is that a lot of the videos that are to follow in this series build upon this Foundation of using custom painters okay and custom paints of course so let me just show you quickly what we're going to develop so it's a very simple application you can see we're drawing a polygon on the screen which is changing its amount the amount of sides that it has so a polygon you could just say a shape that has different sides many sides you could say okay and so it's not just like a circle or anything but it has different sides so if you break this animation down into its basic components you can see that something is increasing the number of sides of this polygon so it goes down to three and then it gets up to I think about 10 sides okay and then there's another animation that is happening in here which is changing the diameter of the or changing maybe the width and height of the shape let's just say that for now okay so those are two animations one for the amount of sides and the other one is for the diameter or the width and height of this shape and the third animation in here is basically doing a little rotation around some axis okay we don't we don't really have to know at the moment which Axis or um how many axis there are but just know that there are three animations in here that are creating the result that we're seeing on the screen and this is something that I've said in the previous videos as well that when you see an animation that feels complex to start with just have a look at it for a while this is at least what I do I just kind of like sit like a crazy person running at in front of the animation and have a look at how it works so I try to break it down into its basic components and if you sit in front in front of your screen and look at this for a while you you can easily see the three components that I just mentioned one the sides that are changing the other one is like the dimensions that are changing and another one at is a rotation that is happening so all three together is creating something that you may think is quite complex but it's not really and the core of this animation is that polygon custom painter okay so in order to be able to create this code that basically creates this type of Animation we need to know how custom painters work in flutter and it is so important this custom painter class is so important that I can't really stress it enough in many of the videos that are to follow after right after this video we're going to use custom painters a lot so the widget custom paint and custom painter that does the actual painting are very very important to this not just to this video but to this course so I really hope that you don't jump over this particular video that you're watching right now because it's such a a big part of this course that's it's best not to jump over it so without further Ado let's just go ahead and create an example and sorry a flutter project that we're going to create this example on so I'm gonna get rid of this because after a while we may get a little bit dizzy looking at this there we go I'm just going to get rid of it here let's go and bring up the terminal I'm going to bring it up right here and let's create our example seven so I'm going to say flutter create example 7 like this and then I'm going to specify oops I'm going to specify my my organization SE pixelity like this all right okay that's that's really good and then what we need to do is to just go ahead into it or just let's say code example seven like this and the first thing that I usually do for those of you who know me is to go ahead and create a very simple uh scaffold in my application so I'm just gonna say main Dart and actually before doing that let's just go ahead and change the workspace setting and change the zoom level to five I think we usually set it no one's really complained about this zoom level I think it's sufficient for most people even if you're watching on a mobile phone and let's say FSA as in flutter scaffold application and I think if we look at the results that we have that we have to develop let me just bring up the simulator you can see that it doesn't have an app bar so let's just kill the app bar like this okay and then we could just have a body but just for now let's leave it as it is gonna get rid of that and let's see I mean someone uh suggested that we use Zen mode but I really personally don't like xemo because by default it goes into full screen so I'm just going to get rid of some distractions just like this okay good so that part is done let's just go say select device 14 pro Max and I'm just gonna run the application or at least try to compile it for that simulator okay so before we get started we need to talk a little bit about trigonometry again we've talked about trigonometry mainly in the first video in this course but I'm going to bring it up again it's just because it's very important and one of the secrets to drawing shapes and this is something that not many people will tell you one of the secrets to drawing any sort of shape is just going back to a circle circle is one of the most important shapes that I I'm gonna actually talk about in this entire course pretty much everything that we're gonna draw on the screen with like custom painters are going to be based on circles so circle is a very very pivotal shape just to have in your toolbox so to go back to that little uh shape that we're drawing in here the polygon you may be thinking of but how is this strong like how does it go from a triangle to a a rectangle and then goes to a more sides polygon well there is the the secret really I just told you is a circle you need to start by looking at everything as if there were circles okay I'm gonna I'm gonna bring up my iPad screen just like we usually do in this course and try to explain a little bit more what is happening on the screen so let me just bring up the iPad screen start drawing a little bit okay so let's say so here's our iPad I'm just gonna move around a little bit here in my desk as well on my desk so let's say that we want to start drawing something so we want to start drawing a triangle let's say Okay so let's say that this is our canvas like this all right let me hold there we go that's our canvas and you want to draw some sort of a triangle all right and then you'll be like okay um I'll go like this and like this and like this well all right that's that's quite good let's say then you want to draw a rectangle with four sides okay we've already drawn a rectangle actually we have a rectangle with a triangle in it so those are the two shapes but what if you want to draw something that has five sides like a rectangle has four sides and then you want to start drawing something that has five sides then you'd be like okay hmm then I will draw something like this this maybe like uh how to go next then like this and then this and then this okay that's kind of fine doesn't look so nice but kind of looks like a uh cupcake which is on its belly all right so if this was the top of the cupcake he kind of get the idea all right that's fine but then you go into six sides and seven sides and ten size so we kind of need to be able to have a rendering engine that can draw or not a rendering engine but this some sort of a shape that can change the amount of its sides all right and this is where the secret comes in so if we have a shape that has that has at least at least three sides and then at most insides so let's say three dot dot n then we can create some sort of a reusable class for it let me just show you how so let's go back to this example let's say that this is our canvas okay like this there we go now let's say we take the center of this canvas and then we say okay that's the center let's just draw a circle around it let's see if I can actually do this uh like this like this let me see if the iPad can help me there we go and that's the circle okay so let's say okay this is a hypothetical circle around the center point now we want to draw a shape that has at least three sides okay so a circle is 360 degrees right 360 degrees now let's say oh what was that sixth name uh I didn't mean to write that sixth thing I don't know what that is but let me just see if I can somehow erase it there was a way to do it with apple pencil let me see like that I just want to say degrees like this okay now if you say a shape has three sides so what happens if we divide this 360 degrees by three to end up with 120. okay so that's like 120 degrees for every side what does that even mean so let's say that in that's our canvas right in flutter you have your x axis here and your y-axis here so this is zero and zero up here let's say that we kind of start and and if you remember from the previous videos that I told you since the canvas in flutter is flipped so this is like the normal canvas it when we're talking about geometry and trigonometry this is X and Y and this is z okay that goes into the screen since the flutter canvas is kind of like flipped around I think you could say it's flipped around the x-axis then your X goes like this and Y goes like this so and again we've talked about these before so I'm not going to mention it again then your zero degrees is kind of here and then you go into 90 degrees 180 degrees and then go to uh what is it 200 is it 180 degrees Plus 90 degrees is uh 270 degrees right here 270 and then you go to 360 like this did I calculate it right something doesn't seem like but anyways it's just at 90 I think so at least okay my math is sometimes horrible and let me just see 180 let's just write it like this 180 Plus 19. and yes this is 270 right so this 270 is fine right here so and if we then say that okay we divide the number of degrees that we have which is 360. by the number of sides that we want to draw then we end up with what we end up with an angle in here that is 120 degrees right here that I'm drawing okay then if we take this circle that we have and divide the number of possible angles into three of those angles Each of which is 120 degrees so let's say that this is 90 degrees all right and this is 180 degrees so 120 degrees is kind of like it's kind of like here right I would say right so that's so we start from here right there that's the start okay then we say okay from if if this was a hypothetical line in here then we go 120 degrees here okay like this and then we know that there's two more sides so we say from here on also we take another we take another 120 degrees from this point that I'm drawing right here we say we need to go 120 degrees let's say that we kind of maybe end up like here okay like this and then this is 120 degrees now I know that my angles aren't really right but you kind of get the idea okay and then we say okay and then from this point on is also 128 degrees so now we've divided the 360 degrees into three parts because we want to draw a polygon that has three sides okay so what we do then is if we take these lines that are the resulting lines after dividing the 360 degrees into three parts for the three sides then we can take this point in here and then this point down here and this point up here and connect them together one two and three there we go then we get our triangle that's it really okay and if we do this same exercise so let me just try to fast kind of draw our canvas again and then the center and then a circle let's see if I can get the circle there we go kind of you kind of get the idea okay the circle is a little bit bigger than a canvas but I think you get the idea it should be in the in in the a canvas and then we say okay now we want to draw a shape that has four sides all right side so like this then we say okay the available space is 360 Degrees okay and then we divide this by four then we end up with 90 degrees so 90 degrees for each side and we say okay so we start from here like usual on the circumference of the circle then we say okay we go 90 degrees this one's very easy then we go here on the circumference then another 90 degrees we go here and another 90 degrees then we go in here okay and remember angles and flutter grow like this okay so they go counterclockwise plus when you go plus you go counterclock oh sorry no you go clockwise not counterclockwise actually so this is clockwise going like this okay so if we are going plus then you would pretty much go like wait a minute no yeah you go like this okay so that's that's how plus Works basically in um flutter so now that that is done uh because it I mean before we jump over that fact it's because in trigonometry when we're talking about Plus 90 degrees then you kind of go like this all right but anyways so now we've ended up with these four points on the circumference of the of the circle then if you connect them together like this like this and like this then you end up with a perfect triangle all right that was great so you kind of get the idea that if you just divide your 360 Degrees like 360 degrees in here and you divide it by the number of sides then you get the number of then you get the angle and then you have to divide your circle with and get your sights from so if you were to for instance say okay I have a shape that is 10 sides then you say 360 Degrees divided by 10 then you get 36 degrees and if you just go on your circle let's just do this canvas thing again like this and then you draw your circle gosh horrible yeah let me see if I can do this again by the way that was terrible like this I want to kind of get a perfect circle I forget to keep I forget to hold my apple pencil down to get perfect perfect shapes like this and then like this and like this let's see boom okay so now we have 360 Degrees divided by 10 then you get 36 degrees so I mean it's very difficult to draw 36 degree angle for me I don't know because this is like 90 down here then 36 kind of going to be like this probably and then another 36 here and another one here and another one here another one so you kind of get the point then you start drawing like lines between these points then you will get your 10 sides for your shape okay so what we need to do now is to go ahead and kind of get this drawing in place so we kind of need a class that can take care of this for us and the way to do that with flutter is using custom paint widget custom paint widget as we're going to soon see it takes a class which is its painter that's subclasses custom painter so the widget itself is called custom paint and the class that does the drawing for custom paint is a custom painter okay and we've already looked at this actually before so we don't have to explain it too much so let's get rid of this and let's go ahead in our application and create a body for the scaffold I'm just going to say body is custom paint just like this paint and in you can see it just says all right I'm fine but you have to give it two parameters one parameter is the child which is the actual widget that takes the space because custom paint by default has no size so in order to give it some size you have to create a child that takes some space all right so what we're going to do is to say let's say that let me bring up the iPad again let's say that this is our screen boom boom boom boom okay so this is our screen then we're going to say okay we want to go to the center in here and then take the width of the screen which is this part right here okay so let's say this is width and then we take the width so take the entire available width in here and the height should be the exact same as the width so let's say this is also with equal to the height all right so then we end up with like a perfect rectangle in the middle here all right so this is what we want to do and the and the perfect widget for that is of course size box so let's say the child a child in here is sized box and the width is going to be media query so let's say media query of context and then we're going to say size width all right and this can't be a constant anymore so let's just remove that and also let's say the height is exactly the same in here okay boom and then we can save this and of course our simulator is iPhone 14 pro Max so I'm just going to bring it up it kind of looks like this at the moment so it has no pretty much no content all right and what we want to do is to go ahead and actually create the painted for the sky so let's say that we have a custom painter so let's say we could call it a polygon so we say a class polygon polygon polygon I think we write it like this extends custom painter okay and we could just keep it like this and let's just add the two missing overrides in here okay so we don't actually paint anything at the moment to do and also in here for now we just say true okay but we're gonna implement the proper version of this function and to be honest we could actually go ahead and do that now so the first thing we could take care of is to tell this polygon how many sides it has okay so let's say final insides and let's create a Constructor for this and maybe we could make this a required name a parameter so let's say required like this all right and then we could go into should repaint and tell it that as long as the number of sides for this polygon are the same as the previous one then it doesn't have to redraw but if the number of sides have changed then we have to redraw okay so let's say we say old delegate is polygon polygon and the old delegate sides are not equal to the current number of sides that we have then it has to redraw okay and as I mentioned I've already talked about should repaint in the previous videos before so I'm not gonna explain it again so no now our job is to go ahead and implement this paint and remember that custom painter that we have in here is inside a custom paint which is taking this amount of uh size basically it has a width and it has a height which is equal to the width and we need to just pass that custom painter to this custom paint so let's say painter and painter is a polygon like this and then we say the number of sides let's just say three so we start with a triangle all right so we can go ahead in here and start doing the implementation so in custom painter we need to I mean we usually work with paths so we get this canvas object in here which has many different methods but one of the methods of very useful methods that it has is actually takes a path and a paint object so it says given this canvas give me something to draw on it and there's something to draw on is usually your path so think of a path as kind of like an empty canvas so you're kind of like you just imagine a canvas given this canvas you kind of want to draw on it so you could draw your shape in the path and then reflect the path on top of the canvas okay so if you look here canvas draw path draw a path in here you can see it takes a path and a paint so before we start with the paint let's just uh sorry before we get started with the path let's take care of the paint so we say final paint and paint is kind of like your pencil or your brush okay so we say it's a paint then we use the Cascade operator in here I think it's called and to give it some color so we say color is colors.blue and then we give it a style and we say style is painting style stroke okay because you see I think we have fill yeah we have fill and stroke and stroke is kind of like you're drawing the outline out Outer boundaries of your shapes you're not actually going to fill them okay so if I bring the iPad screen again let's go and create a new document in here so if I hear a let's say that we have a triangle this is how you would draw a triangle with a stroke okay and if you want to draw the same triangle with fill it would literally like go like this and literally fill the inside of it for you can like try to do that at least given the properties that you give it sometimes it can't do that because your path isn't closed but you kind of get the idea so that's stroke and this is fill okay and from the animation that we saw earlier we have to do a stroke right because we didn't actually fill the insides of that polygon so we say it's stroke like this and also we give it a stroke cap and we say store cap has to be around okay so I'm gonna I'm gonna actually explain what the stroke cap kind of means so let's say around for now around and then also we say stroke width is three for now okay so that's our pain object so let me just explain the stroke cap quickly for those of you who are curious about it and this is something that not a lot of people uh explain so I'll start to just explain it so let's say that this is the triangle okay that we have in here that we want to draw or any kind of shape with any amount of sides it doesn't matter it doesn't necessarily have to be a triangle and let's just put a a little magnifier in here so let's say this is our magnifier and we're looking at this Edge in here okay where the two sides meet so if we magnify that like a thousand times and put it kind of onto the microscope if you say the um if you say that your stroke cap is let's go in here and delete that Astro cap Dot you have square but you can see like this and then you have round and then you have square if you say that it is but okay then how how it will actually look like in this connection it kind of if you zoom into it it will be like oh the side comes here like this and then the next side starts like this okay so you kind of in in this point where these two joints meet you kind of see a little bit of a disconnect between it's not bit it's not smooth okay so that's like the butt stroke cap and then there's another one which is square which you can see in here uh is kind of like it's kind of like but you could say but you need to you need to fill it to see the difference it's kind of kind of difficult to explain but you will you will see the difference when you draw them but you draw very big shapes with big stroke widths then you can actually see the difference but in this in this particular case I would say but and uh Square are kind of gonna look gonna look the same for the end result that we're gonna get in our application but in some other applications it may be different but if you do the round one then what happens is that you kind of go like this like this and the end of this particular side will be round and the next ones also will be around in here so you kind of get like a smooth round angle at the at the end right here okay and it doesn't really matter to be honest with you in in this particular example it doesn't matter that we're saying stroke cap around it's just something that you get used to when you start drawing a lot on the screen simply because it looks a lot nicer in most cases okay but I think in this case it doesn't matter that much but it's just out of principle we're gonna go with round anyways okay then we need to create a path so now that we have the path and we have a paint let's just before we forget we say canvas draw path and we have the path and paint and that's it so let's go to our application and have a look at what it looks like and you can see in here there's nothing on the screen so we can't see anything and simply because we have an empty path so this path has no shape in it all right so what we need to do is to get started by actually calculating the center at which we want to put the center of our Circle so it's going to be that Center that we've already talked about okay so given this canvas with this size let's find a center again something we've done before so I'm going to say final Center is equal to a size width divided by two and size height divided by two some people just in order to ensure that the uh like the canvas is square and it has the same width and height they just go size width divided by two for both the width and a height kind of but in here we're just going to take size width and height assuming that the width and height are exactly the same all right good so now let's say that uh the radius I mean the radius we're gonna get to soon but I wonder if you should calculate that now or put it for later let's just put it for later now what we want to do is to get the angle between each side again remember that 360 Degrees divided by the number of sides that I claimed before so let's just do that so we say final angle is and we say we have 2 multiplied by pi so let's go and import import darts math show Pi like this and we have 2 and multiply by multiplied by pi because this gives us 360 degrees and then we want to divide this so like this and we want to divide this by the number of sides all right that gives us our angle which is a double value all right so what we what we need to do now is to go ahead for the amount of sides that we have uh gets the angle so the let's just explain this on the iPad screen is a little bit easier so let me bring up uh I have I'm gonna have to move around a little bit so this is our canvas okay and again this is our Circle let's see if I can get a kind of a perfect circle in between here kind of like this we start here we want to draw a triangle 120 because 360 Degrees divided by 3 is 120 right 20 degrees in here so we start at zero degrees in here and then we say this is 90 down here 180 in here so 120 is kind of like here okay kind of so we say this is 120 degrees okay so now we want to get so we know that we have three sides three sides and if we say Okay three sides is zero the indexes for them is zero one and two so these are sides put in an array like this and then we say okay we have the angle which is 220 degrees then we can multiply each side index by that angle in order to get the final angle so let's say if we have zero one and two these are our sides the angle is 120 so if you say zero multiply multiply by 120 then we get zero degrees so that's our starting angle 1 multiplied by 120 degrees is 120 and then 2 multiplied by 120 is 240. so these are our angles 0 120 and 240. okay so 120 is here and then let's just say 240 is here 240 okay so if we take the number of sides that we have and start with zero and multiply each of those indexes by the number of by D angle that we have in here then we get all the angles that are going to end up on the circumference of the circle in order for us to draw our shape okay got it so let's go in here and create some sort of a a a a how do you say maybe an i treble so we say final angles is list and we generate and we say okay we have these number of sides and then for every index so we say 0 1 2 multiply that by the angle all right and then the result of this you'll get a list of double which are your angles all right and then let's just calculate the radius of our of our Circle the encircling Circle here so the radius as we've already talked about it is the width of this canvas which is like this divided by two which ends up being in here okay so let's say final radius is size width divided by two okay so the first thing we need to do now is to because you see we have a path but this path has a brush that is kind of like in the air so the brush hasn't really touched the path yet so what we need to do is to move the brush to this point which is angle zero okay and the way to do that if you remember from the previous videos is that in order to get the X so let's put comment in here on the circumference of this circle to get the X you have to say Center X and Plus radius radius multiplied by cosine of angle and then Y is Center y Plus radius multiplied by sine of angle we've already talked about this in the first video so I'm not going to explain this again okay so this is the formula to get the X and Y position of the points on the circumference of a circle given an angle and a center point we have the center point we have all the angles we know that the first angle always starts at zero so we we assume that we say okay it always starts at zero so let's just go ahead and say that path move to okay so we say the brush has to move to this point then we say Center dot DX Plus radius multiply multiply by cosine of zero degrees okay and cosine and sine come from Dart math as well so we say cosine and sine like this and and then before I save I'm just going to go and write the code for this as well there we go and put a comma to get the formatting right so now we moved to this point on the circle okay so we move the brush to the brushes on the canvas now press down on the canvas at this point but nothing has happened really after this then what we do need to do is to go through all the angles that we have we say Final Four final angle in angles like this all right and then we just say take the current position of the brush and then draw a line to this new point and you see it's the same exact point it's just that the angle has changed and with the angles we've already calculated all right now last but not least is very important because you see now that brush has gone so the brush went here to this point then it went uh it went down here so it drew a line it was like let me actually draw it so it was like okay I'm here right now I'm going to draw a line then I'm going to draw another line and then it stops there okay because those were our only angles now what happens then is that this shape is enclosed so closing a shape means to take the current position of the of the brush and take it to the original position by drawing a straight line to it like this I right so then you get your closed path which is your final shape so let me put the apple pencil back and then let's go in here and say we want to close the path path close like this and then we can go back here let me just do a little bit of resizing and bring up our simulator so if I then go ahead and say I want to save there we go now we get our shape on the screen okay isn't that awesome it's really cool so what is happening then is that we got a polygon in here so we can actually ask it to change the number of sides so let's say four there we go you see how beautiful that is you can actually see it's dry it's dividing the circle into four sides so it's like okay zero degrees then I go here then I go here here and close the shape so if we didn't have the path closed maybe still works no it doesn't you see the final line isn't drawn so that's why we're doing the path close Okay and then if you go say okay give me five size that's fine yeah I'll give you six sides that's completely fine seven all right and ten it's also fine you can say 100 will be almost like a circle I would say you can see it's almost like a perfect circle if you say a thousand or 50 you kind of see that it is made out of sides if 30 20 you can see all the sizes it's it's awesome okay so we have our polygon now that's great what we need to do is to go ahead and create all these crazy animations that we were seeing on the screen okay so we need some animation controllers and we need uh we need to perhaps also have some animations not just controllers so let's go to this home page and convert this to a state full widget like this and then what we're going to do is to go ahead and create our controllers and animations so we need one controller and one animation for the number of sides okay so the number of sides are going to change I think from 3 to 10 and then 10 all the way back to three so it's kind of like going to reverse if you remember the original animation looks like this because it goes all the way to 10 and then goes all the way back to three okay and it also has some sort of bouncing effect so let's just create the animation for that I'm going to get rid of this so let's say that we have a final controller in here so we say final animation controller like this and it's called sides controller then we have a final animation animation of ins of the number of sides animation like this all right then what we're going to do is to go into the this pose let's go into disposing here before we forget we're going to say sides controller dispose all right and then we go into init State like this and after the call to Super then we're going to create the controller so we say sides controller is an animation controller and like this controller with a v-sync of this and we need to change this guy to a ticker provider State mixing which we've already talked about before so I'm not going to explain again so with ticker provider State mixing like this okay and can't be used as a Setter final blah blah the final variable assessing from possible this can't be final right these need to be late and late like this all right and we're going to set the duration for this guy to three seconds all right and then let's go ahead and create the actual animation which is the size animation remember animations are tied to controllers so we say side animation is equal to and then we say we create an INT tween so in between remember that it's like we're going going from three to ten sides and then we depend this animation on our animation controller okay very easy and tween right and it gives us an animation of ins great so that's our sides controller and we can already actually start testing this out so before we forget let's go into our did change dependencies the change dependencies in here then we say sides controller repeat and then we say reverse true so it has to repeat and it also goes in reverse when it's done with its animation let's go ahead and put this custom paint into a let's put it also in the center so let's put it in center and have a look at how it looks like all right so it's in the center with these amount of sides at the moment and but the amount of sides are in this animation at the moment so we need to change this soon let's go and put this uh I would say let's put this Center in in or maybe put this into a um animation Builder let's say animated Builder sorry let's wrap the custom paint with animated Builder all right and then we say the animation is a listenable and I think it's called listening bull that merge but we don't have more than one animation at the moment but we're gonna soon have two more animations that's why I'm creating this listenable merge at the moment all right so that's there and it's complaining that we don't have the Builder so let's say the Builder like this all right and in the Builder let's just go ahead and take this uh custom paint so let's say we have this custom pin and drag it out and then we say we return this custom paint and the sides then we can go into our side animation and say dot value all right let's see if this even works there we go now we're getting our animation you see it's three and then four all the way up to 10 and then it reverses back to three okay good we have we have the sides animation now all right and this this I mean it's one step forward but it's really still not there yet okay the next thing that we need to develop in here is this radius change so you can see the radius of this or the diameter even the width and height of this canvas that encompasses this circle which draws these paths is changing in this animation but in here is constant because it's always taking the width and height so we need some sort of an animation controller and an animation that changes the width and height Force okay so let's go ahead and we just call it radius controller but you can call it maybe width and height control or whatever you want so let's say animation controller and we say radius control controller and then we have a late animation double of radius animation before we forget we go into this pose and we say radius controller dispose this is a habit that I have and before we forget things we need to dispose of them radius controller and we say repeat reverse true like this okay and then we go and create the actual radius controller so let's say a radius controller and it takes three seconds and then we create the radius animation in here and let's say it's a tween that goes between 20 and then let's say it goes to 400 okay and then we say animate and actually before we do that before we do animate let's just change this oops chain and let's put some commas in here to get the formatting right and then we have a curve tween and we want this to bounce uh in and out all right so as we're changing the radius then we kind of want it to bounce in and out at the end and this is something The Bouncing is something that you can see in here let me see did you see that it's very difficult to see but like here you can see it it bounced when it kind of like went to its lowest point all right and that's what we're doing this so now that we have that let's go merge it in into our listenable so we say we have our radius controller as well then in here instead of doing this dance let's see here width and height then we're going to take our radius animation so we say radius animation and oops has a an underscore in the beginning radius animation dot uh it didn't here dot value for both the width and the height like this and I'm just going to restart the entire application have a look at how it looks like there we go you see the balancing effect do you see it great so we're one step closer it's very similar very very similar it's just that the rotation is not there so let's go ahead and create a rotation animation controller and a rotation animation all right so we go ahead and we say that we have a late animation controller in here and we say rotation animation or rotation controller okay and then we have a rotation animation and this rotation is just gonna go from zero to 360 Degrees within three seconds that's really it and then go back so it's gonna repeat and it's gonna reverse okay so we say it takes also three seconds and then we say our rotation animation is a tween that goes from zero to two times pi and then we're going to chain this let's say the chain and we say a curve between all right and we say it is going to ease in and out so we say curves ease in and out like this and then we animate the uh Road what do we call a rotation controller like this all right and let's put a comma in here okay for some of you who are pedantic you may want to put a comma in there as well to get the formatting quite correct in here okay so now that we have the rotation controller before we forget let's dispose of it so we say rotation controller.dispose like this and then we go ahead and say rotation control repeat and reverse merge it in here and we say rotation controller oops rotation controller like this and then what we need to do is to go ahead and add a transform to this and let's see what we have we have the custom paint let's put it put it inside a transform so it's a rapid widget transform okay we've already talked about transform and how it works before so I'm not just gonna I'm not gonna explain it all from the beginning let's say the alignment is from is Center again alignment is something I've explained a lot and it's one of the key points of using transform so please just don't jump over the previous videos because there is so so important okay and how this alignment is kind of like a pivot point all right and we want to Pivot it from the center of the canvas and let's say to transform itself uh transform is a matrix for identity so we start with identity and then we rotate all the uh we say it rotates oops rotate X and that's going to be our rotation and then we do eroted y and rotate set so all the three uh how do you say axis all right and let's see how it looks like now and let's see how this looks like this is like how we should develop it so this is like the ending or the final product and this is what we have on the right hand side so let me just change the size of this and have a look here okay so one two three and then I'm gonna restart the application there we go that's it we got the final product so it's doing the exact same thing as this guy is doing all right and that wasn't really I really hope that you enjoyed this video these videos that we're doing right now may not look important to you but they're very important for all the more advanced videos that we're gonna develop in the rest of the flutter animation series so I really hope you enjoyed this video if my work is helping you in any ways please do do join my channel by pressing the join button on my channel and please do subscribe and if you can please do press the thanks button at the bottom of this video to support my community work thank you and see you in the next video

Channel: Vandad Nahavandipoor

Views: 7,536

Keywords:

Id: xt0LT8K7w04

Length: 46min 45sec (2805 seconds)

Published: Sat Mar 04 2023