Flutter Custom Painter Tutorial || Clock App (Episode-1)

Hello and welcome back to channel codex this is your host Afzal and today we are going to start a new flutter development series. We will be creating this beautiful application by the end of the series and I will upload each v1 part of the video make sure that you subscribe the channel so that you don't miss any of the update while that's being said lets us start our development with part 1 of the video where we are going to create this animated clock right inside flutter. Let's jump into a tutorial so we are into Visual studio code now you can see this is a default template of flutter application here I have created one page called home page and you can see that it's a blank page with a scaffold structure we are going to start the design process with a container and I will apply a background color to this container this color we are going to fetch from Adobe XD so what I have done I have already fetched all the colors used in this design in Adobe XD you can do that simply by drawing a shape and using an eyedropper you can pick the color so I'm going to copy this color from here and paste it inside Visual Studio just remove the hash key and you can see that we get the container with the background perfect next we want to define clock view so for that I will create a separate file called clock view dark and in this file I'm going to create a stateful widget let me first import material dot dot and now we will create a stateful widget I will tell you at the end of the video why we need a stateful widget to start with container we will give it a width and height so I'll say 300 bit and 300 of height and we will use custom paint as child of this container so this widget is going to be the key widget for this tutorial we're going to create a custom painter and I'll aim it as clock painter so let's go ahead and create our custom class and this class will extend from custom painter now inside this class will have to implement all the virtual methods our abstract methods so there are two methods one is the paint meter and second one is should repaint so we'll say just return true from should repaint that it should repaint whenever there is a state change and rest of the thing we are going to do in this paint meter the first parameter is a canvas where we gonna draw everything and the second parameter is size which defines the size of the canvas so let's go ahead and use this clock view inside our page now you can see that our container shrinks to this top-left corner because our canvas has a size of 300 by 300 what are we gonna do we're gonna provide the center alignment to this container so that it again fills the entire space so now we can start painting on the canvas before that what I will do I will open the image the final output which I want to achieve and I will place this image in the bottom left corner so that while developing I can see and refer this image anytime that's a handy way while you are designing so you can do this trick you can put your image somewhere in the screen so that you see it while designing and now you're gonna see a lot of mathematic calculation a lot of paintbrushes so don't get afraid I'll make it simple for you let's begin the show so first thing I want to calculate is the center point Center in X direction and Center in y direction so it will be size dot width by 2 and size dot height by 2 now let's create a variable which will hold this offset so we'll say offset Center X comma Center Y so now this Center knows the exact point now we gotta start painting on the canvas so the first thing we will paint is the circle you can see that it requires three parameters so first parameter we have that is Center Point we don't have radius and we don't have paintbrush so let's calculate radius now the radius should be such that it fits inside the canvas so it may happen that your canvas has a different width and different height so using size dot width by 2 will not work because it may happen that it exceeds in the height so what we gonna do we're gonna use math dot min method and we'll pass Center X and Center Y which is size dot width by 2 and size dot height by 2 so it will give you the minimum of radius so the second parameter got resolved now we have to define a paintbrush now major chunk of our source code will be paintbrush so don't worry about the length of the source code it's all simple paint methods you can achieve whatever you want to draw with this paintbrushes so you can define color you can define stroke weight cap and all those properties I'm gonna pick the color from Adobe XD again if you want to know more about Adobe XD then I have multiple tutorials I'll put link in the description you can go ahead and check how to use Adobe XD fine now let's use this fill brush inside the parameter and we caught the circle drawn now what I'm going to do next is reduce the radius of this circle because we want some space to draw this - ish so we will reduce it by 40 pixel and you got the smaller circle like this and now next we gonna design the outline so for outline also we want at the same radius same center point but we want a different paintbrush so for that I will say outline brush and this outline we are going to change the color this is going to be this off-white color and also along with the color we have to specify different properties like stroke width and stroke type so let me define that will say stroke width of 16 pixel and also we have to change the style so by default it takes fill style so we're going to change the style to paint style of stroke I hope it's pretty clear now we're gonna copy pairs the same but this time we want a radius of fixed size that 16 pixel radius and we will create a new brush for center dot puffing now you know how to create a brush what I'm gonna do next is create second minute and RN brush quickly just like that and copy paste all of this code now for the brush we want a gradient and that we can achieve with the help of a shader inside paint this shader can be either linear gradient or radial gradient depending on the need and inside that you can define the multiple colors which you want in the gradient and then again we'll have to create shader from that gradient and that requires a rectangle we have multiple options to create a rectangle but I am going to create rectangle from circle because we already have the center point and the radius and the same thing we will apply for our hand and let's start painting this on canvas so we want to draw the line on canvas that requires three parameters first is the starting point second is the ending point and third one is the paint itself now the first point we know that is Center the second point we are going to hard-code for now we will say 100 500 pixel and the paint we already have it will use SEC hand brush the first thing we notice is that the line has a rectangular cap and we want around it cap the way we can achieve it we have to customize the brush so that it gives a rounded cap secondly we can see that the line has been thrown on top of the center dot so what we can do we can move the center dot below the second minute and our hand so that it rose on top of that so in your code it has to be below everything so that it draws on top of that this is how it works the last you draw is going to be on top now we are going to duplicate this line to create minute and our hand and we'll put some random hard-coded values to see it in effect later we will modify it and also we will change the gradient color of minute and hour from Adobe XD perfect that looks awesome now we are going to calculate the actual values which will draw this second minute and our hand so we want to calculate the second coordinate now to do that we will need to apply this mathematics formula that we have the radius and we want to find a point on the circumference of that circle to find out the x coordinate we will multiply the radius with cause angle and to find out the y coordinate we will multiply the radius with sine angle because this values are in degrees so we have to convert it to Radian and for that we can multiply by PI by 180 and this pi comes from method art so this is all just simple mathematics and you can master this with practice so now we got both x and y-coordinate so we are going to place these values inside the second coordinate of this line and that we can see that this line disappears the reason I did a mistake calculating x and y coordinate that I only provided the center X and not the actual radius so from Center Point at what distance you want the coordinate that you have to provide so say for example I will say 80 pixel away now when we hot reload the application we will get a line which is originating from the center and goes till 80 pixel I'm gonna reorder this lines in a manner that second comes on the top and below that there's a minute hand and below that there's our hand we are going to copy the same logic for a minute and our coordinates calculation so it's pretty simple let me do a fast-forward for you guys cool now the design looks awesome to me so now instead of putting a hard-coded value for this degrees we will calculate the actual value I know this video is getting lengthier but guys this is something related to mathematics calculation that I cannot avoid we have to go through it fine what I have done here is created a date/time object which gives me the current date time now with this date time we are going to calculate each degree we know that it takes 60 seconds to complete 360 degree rotation for a second hand so that makes that for one second it will take 6 degree 360 divided by 60 right so let's go to paint method and modify the values instead of this hard-coded 90 degree I'm going to say date/time dot second that how many second it has passed and that we will multiply with 6 degree for each second we are multiplying with 6 degree so if it's 30 second it will become 180 degree like that and same thing we will apply for y coordinate and when you reload the application multiple times you will see that the second hand is moving perfect this is what we wanted we will apply the same logic on minute hand because 4 minute hand also it takes 60 minute to complete 360 degree rotation so again it will for each minute we will multiply by 6 degrees in X&Y coordinates and we can see that the minute hand got updated so each time you refresh you will see like each minute it will have a different pointer for our hand also we can apply the same logic but this extra calculation for it because we don't want to update the our hand after 1 hours each minute we want to increase it gradually so that will multiply each hour with 30 degree and each minute will multiply by 0.5 degree you can the calculation that I've done earlier I'm not going to explain that that will take a lot of time so basically what I'm doing is for each minute I'm adding 0.5 degree extra and that moves to our each minute to its position if you want to try this source code for yourself I have shared it on get source you can copy the gist ID and paste it on dartpad diff if you want to know more about that pad check out my previous tutorial where I have explained in detail the features of that pad and how to use a gist inside dart pad now an important thing to notice about the canvas that it starts its calculation from this point which is a 90 degree for us so we have to rotate the entire canvas 90 degree anti-clockwise for that I'm going to use transform dot rotate method and that needs an angle to rotate the children we will say here we want to rotate the children by 90 degree which is PI by 2 and we want it in anti-clockwise direction so that will specify minus PI by 2 and now it's showing the correct time which is 10 to 10 now I just updated the stroke width for all the hands and now we will write a logic to animate the clock itself and that is the reason we are using stateful widgets so that we can set the state and update the UI to override in its state method and inside that I will implement a periodic timer this periodic timer will run after each second and after each second what it will do is it will just set the state and the said state it's going to update the entire UI automatically one final thing we are going to do is we are going to draw these outer dashes it's pretty simple logic that we are calculating the x and y for outer circle and we are creating x and y for inner circle and we are drawing lines after each 12 degree it's that simple and that we came to end of our video in next video we're gonna create the first page of this clock application so make sure you subscribe the channel hit the like button and give your feedback see you guys in the next one so make sure that you subscribe the channel so that so make sure that you subscribe the channel if you don't want to miss make sure that you subscribe the channel so that you don't miss any of the update

Channel: CodeX

Views: 74,246

Keywords: xd, design, flutter, tutorial, how to, android, ios, ui, adobe, latest, theme, app, Flutter ui, adobe xd to flutter, adobe xd flutter, xd to flutter, flutter tutorial, flutter 1.17, minimal design, flutter ui design, flutter ui, flutter animation, animation, swiper, layout, pagination, slide animation, gradient, bottomnavigationbar flutter, rounded corner, navigation bar flutter, custom, painter, custompainter, learn flutter, flutter dart, flutter custom paint, flutter sdk

Id: HyAeZKWWuxA

Length: 16min 30sec (990 seconds)

Published: Sat Jun 13 2020