I loved the fact you took your time to explain the mathematics things. Most tutorials lack on this part, but you did your best to let us understand the logic behind the clock. I would really love if you made explain mathematically how all this draw works! Can you??? Please??
This is one of the best tutorials I found out on yt. Super easy to follow through, explained briefly everything. Awesome man! You are seriously underrated. 🔥
there two small issues: you are using cos() for X and sin() for Y, that gives a 90 degrees rotation reading on the needles. you can use sin() for X and -cos() for y another one: minHandY hourHandY and secHandY should use centerY not centerX... you only notice the bug when the canvas is not square... anyway, I loved the video!! thanks
@@Grewal0007 Hey Gurpreet. www.mathsisfun.com/polar-cartesian-coordinates.html This is a basic application of polar coordinates, I'm still in highschool, I searched it up. It's easily understandable, hope it helps
No body is gonna explain better than u 😍🔥......thanks a lot brother......... And plz make a vedio on that maths logic, Angle, offset..... Plz brother plzz
You would get better smooth movement of all three hands with something like this: void main() { var now = DateTime.now(); print(now); var midnight= DateTime(now.year, now.month, now.day); var diff = now.difference(midnight); print(diff); var secs = diff.inMilliseconds / 1000 ; print(secs); print(secs % 60); print(secs / 60 % 60); print(secs / 60 / 60 % 12); } It will need translation to turn those three values into radians, but they'll be much smoother, like a real analog clock.
Hello what should i remember from school math to master and to draw everything i want? Cause spend a lot of time and still no idea how to realize some things
how to feed that class/widget from the homepage, how to add parameters to the class? Let's say I want to make several clocks with different time inputs.
Hey is there something like erase with the help of which we can erase whatever we have drawn. I know about the complete removing/erase of the screen. I want to know about something with the help of which we can erase only a section of what we have drawn.
I made dashes outside of the circle from 2 to 16(which divides the circle into equal parts). Have point! how can we make it all divisions to start from 12? @Codex
Awesome. Please share how the Stateful widget code was added automatically to the code together with the State class code added to vs studio automatically fast?
I need help. My project requires me to do custom painting On an image. Like basically an image of a map has to be the background, and upon that image I have to do custom painting like drawing circles, pointers and such. How can this be done?
Hi, Codex It was a very nice video and content. I want to ask something. After making the design on Adobe XD and printing it out for flutter, do these clock settings come automatically or did you adjust it manually?
var centerY = size.height / 2; var radius = min(centerX, centerY); if width = 200 height = 400 min would return 200, making the radius 200. but isn't the radius supposed to be the length from the center of the circle to the edge? so the 'real' radius would be 50?
It will return radius as 100, centerX and CenterY are already half of width and height. This is to keep the circle ⭕️ of minimum size which can fit in screen
Thank you for this fun tutorial....too much Maths :( ....but I followed your tutorial and my clock is up and running....I wish I had good understanding of maths like you do....please provide some link if you could... so I can learn this maths from there.
I saw some bugs where Y coodinates are calculated based on centerX not centerY. I think a repo with branches or tags for different video stages would be better than a gist. But thanks for the video and code.
Excuse me sir.. but your clock is rotated around 90 degrees to the right. 12 is on the clock I created at the point where usually 3 o clock would be... how can I fix this... but still an amazing video:)
double dot (..) is called cascade operator. It's used to access the object without specifying name. So, on same object you can perform multiple operation with cascade operator.
Yes, and that may sound too much.. but in fact its very normal process! On Flutter we get at low level where we talk about rendering and painting, otherwise its just the process of widget update.
@@_haptic_shorts This logic, some of the times even experienced codes don't know all this that's why they try to master mathematics in university or they all question in stack overflow. www.mathsisfun.com/polar-cartesian-coordinates.html This is the logic CodeX used, he found it on stack overflow too, don't worry
Everything is fine but even after following along, my state is not updating. I don't what's the problem. Edit: It's working fine. I had to restart app instead of hot reload.
sir can you help me and explain the part of draw dashes,I am really thankfull to you .i can not understand why we callculate the outer Circle Radius and inner circle Radius .kindly help me plz and explain this part. var outerCircleRadius=radius; var innerCircleRadius =radius-14; for(double i=0;i
⭕️ look at this emoji or think of donut 🍩 , if you want dash lines between thickness of donut.. you need two points p1 from center to inner radius, p2 from center to outer radius... thats the funda used here. To draw a dash line we need x1,y1 and x2,y2 which are of 2 different radius 👍🏼
The video isn't working properly.. and not because my internet connection or device, other videos on TH-cam are working fine except this video Anyone else noticed something like that?
I loved the fact you took your time to explain the mathematics things.
Most tutorials lack on this part, but you did your best to let us understand the logic behind the clock.
I would really love if you made explain mathematically how all this draw works! Can you??? Please??
Sure, i will write blog for that. Follow my FB page to get notified.
This is one of the best tutorials I found out on yt. Super easy to follow through, explained briefly everything. Awesome man! You are seriously underrated. 🔥
there two small issues: you are using cos() for X and sin() for Y, that gives a 90 degrees rotation reading on the needles. you can use sin() for X and -cos() for y
another one: minHandY hourHandY and secHandY should use centerY not centerX... you only notice the bug when the canvas is not square... anyway, I loved the video!! thanks
mind=blown with the canvas and mathematics bit
5:23 that double dot man crazy didnt knew about that
What does it do? I don't understand it.
@@Jan123. it's called cascade notation: dart.dev/guides/language/language-tour#cascade-notation-
The Best canva tutorial in youtube 💗✔️ keeping making some more high level tutorials
Simple, elegant, fast. A perfect tutorial. Thanks
It's a really solid Tutorial there even a newbie like me can Follow it Thanks !
But if u are expert in math 🙄
Agree, it will come if we think and search in right direction. I found this sin* and cos* thing on stackoverflow 😄
@@CodeXdev thanks for this truth 😂 gains confidence in me 🙏😊
@@Grewal0007 Hey Gurpreet. www.mathsisfun.com/polar-cartesian-coordinates.html This is a basic application of polar coordinates, I'm still in highschool, I searched it up. It's easily understandable, hope it helps
Love the way you explain. Great job.
Glad you liked it
Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir
Very underrated teacher ❤️
For those who understand 🤭
No body is gonna explain better than u 😍🔥......thanks a lot brother......... And plz make a vedio on that maths logic, Angle, offset..... Plz brother plzz
Wow sir i love this series
Hope you would post more backend app tutorials like e-commerce food app etc thanks for making such great content ❤️
Thanks for this video, it saved me a lot of research time, in 15 mins I already know what I needed for my project
Awesome since Guatemala thanks for this teach. Sure amazing teacher.
Thank you! Keep up the good works. I'm your fan now. 😀
Welcome aboard! 😍
Well explained. i love this
Nice, this is was very old video.. do you think such topics are still helpful?
@@CodeXdev Yes, such topics are still relevant today. They come in handy once in while
Thanks Dear Afzal
awesome! well explained! 👍🏼
Thanks! 😃
Okay, I subscribed. Hope we will get a video each week.
Will try my best to hit TH-cam with new video each week..
wow!
wow. attractive UI. nice tutorial. Thank you.
Glad you like it!😊
Great tutorial. Thanks👍
Super video
I learned lots of things.
Great work.. man
Great tutorial, thanks!
Glad you enjoyed it!
You would get better smooth movement of all three hands with something like this:
void main() {
var now = DateTime.now();
print(now);
var midnight= DateTime(now.year, now.month, now.day);
var diff = now.difference(midnight);
print(diff);
var secs = diff.inMilliseconds / 1000 ;
print(secs);
print(secs % 60);
print(secs / 60 % 60);
print(secs / 60 / 60 % 12);
}
It will need translation to turn those three values into radians, but they'll be much smoother, like a real analog clock.
best explanation
best logic
Glad you think so!
Great tutorial, it helps me a lot!
Glad it helped!
Hello what should i remember from school math to master and to draw everything i want?
Cause spend a lot of time and still no idea how to realize some things
wow.amazing tutorial.
fantastic
how to feed that class/widget from the homepage, how to add parameters to the class? Let's say I want to make several clocks with different time inputs.
hello.new friend thank you for the tutorial
Hey is there something like erase with the help of which we can erase whatever we have drawn. I know about the complete removing/erase of the screen. I want to know about something with the help of which we can erase only a section of what we have drawn.
U are amazing! keep going
Thank you so much!!
amazing stuff. thx man.
Very nice video but please keep slow speed of writing the code for new comer students.
Amazing tutorial!
amazing
impressive
Will it be the fully functional clock app or just UI brother!🤗
Btw your channel content is really good♥️♥️
I am planning to create this as full fledge app and publish on store. Thank you for feedback 🤗
@@CodeXdev please make tutorial on that also😅😁🤣
@@CodeXdev make a tutorial on this pls
awesome bro , can you tell me how to add animation while changing the colour in custom paint, plzz help🙏
Great
Really great tutorial
Thank you! Cheers!
Amazing 🤩
I made dashes outside of the circle from 2 to 16(which divides the circle into equal parts). Have point! how can we make it all divisions to start from 12? @Codex
Awesome. Please share how the Stateful widget code was added automatically to the code together with the State class code added to vs studio automatically fast?
If you write `stf` you will get suggestion to generate StatefulWidget.
`stl` is for StatelessWidget
Thanks a lot! Where is define of 'dashBrush' at last part.
I got it at his github 113row
Hi,
Will this tutorial work on a Windows Machine and an Android Emulator?
How make second hand to pointer like hand.
Pleas make more tutorials for simple apps, also make them not too faced paced make them easier too
How do you get that iphone screen test?
I need help. My project requires me to do custom painting On an image. Like basically an image of a map has to be the background, and upon that image I have to do custom painting like drawing circles, pointers and such. How can this be done?
Use stack, put image below and on top you can draw something.. if you want free hand drawing then use signature package
I love this tutorial
Hi, Codex
It was a very nice video and content.
I want to ask something.
After making the design on Adobe XD and printing it out for flutter, do these clock settings come automatically or did you adjust it manually?
We have to calculate angles for each hand with respect to current time.. :)
i loved
Question:
var centerX = size.width / 2;
var centerY = size.height / 2;
var radius = min(centerX, centerY);
if
width = 200
height = 400
min would return 200, making the radius 200.
but isn't the radius supposed to be the length from the center of the circle to the edge?
so the 'real' radius would be 50?
It will return radius as 100, centerX and CenterY are already half of width and height. This is to keep the circle ⭕️ of minimum size which can fit in screen
Awesome
Thank you Harloom.
I likedthe way you implemented but It doesn't work when you backnavigate it and then working with it and My seconds hand isn't moving
Thank you for this fun tutorial....too much Maths :( ....but I followed your tutorial and my clock is up and running....I wish I had good understanding of maths like you do....please provide some link if you could... so I can learn this maths from there.
It was back in college days I used Mathematics last time 😄😃 Google is the best teacher now days.
@@CodeXdev I never went to college... Just done school.
is this program run in background???
nice video bro
Thanks for the visit
Hi, somehow I can't get it to show me the right time and I have no idea where the problem is.
Sorry, what is the .. syntax about? Thanks. Great video :)
Hi, Which syntax?
@@CodeXdev this dot dot .. syntax.
For example you wrote in your code
..color = Color();
Oh, thats called Cascade Notation in dart 🎯 It gives access to preceding object without specifying name.
I saw some bugs where Y coodinates are calculated based on centerX not centerY. I think a repo with branches or tags for different video stages would be better than a gist. But thanks for the video and code.
Hello, thanks for highlighting. Actually there are different branches on the git reference provided. I fixed this issue in latest branch. :)
very thanks!!!
You're welcome!😊
Excuse me sir.. but your clock is rotated around 90 degrees to the right. 12 is on the clock I created at the point where usually 3 o clock would be... how can I fix this... but still an amazing video:)
Hello Mika, I think you missed last part of tutorial where I explain the canvas rotation thing.. check this out and your problem will be solved 14:32
@@CodeXdev wow thanks for your answer.. Thank u👍
crack!! 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
bro can you explain me why you are using double dot for fill the color and stroke also like (..color and ..style )
double dot (..) is called cascade operator. It's used to access the object without specifying name. So, on same object you can perform multiple operation with cascade operator.
@@CodeXdev thanks bro and can you make video on custompaint ❤️
🤣🤣🤣 u r commenting on custom paint video only 😉
@@CodeXdev because I saw only first video of clock playlist ❤️
Do I understand correctly that the whole clock is redrawn each second?
Yes, and that may sound too much.. but in fact its very normal process! On Flutter we get at low level where we talk about rendering and painting, otherwise its just the process of widget update.
i need to review some basic highschool math haha
Hahaha.. even i did some stackoverflow search for the formulas
Explain is just Awesome,
But I'm pretty week on Math ..
Sir, how do i learn these logic ??😔
Don't worry, it comes with practice. Sometime googling also will help :)
@@CodeXdev okay sir🥰
@@_haptic_shorts This logic, some of the times even experienced codes don't know all this that's why they try to master mathematics in university or they all question in stack overflow. www.mathsisfun.com/polar-cartesian-coordinates.html This is the logic CodeX used, he found it on stack overflow too, don't worry
hi bro I'm new in Flutter, could you tell me how to quick call the code in 1:35 ? I have subscribed btw, great tutorial !
Just starting typing: stf (Stateful) or stl (Stateless), then Ctrl + Space and you will see the autocomplete option.
@@quicktips3858 thank you sooo much !
@@votuankiet5982 u are welcome!
can i run this code in android studio????
Yes, of course!
thanks
You're welcome!
iam very bad in math i didn't understand what does the cos(90 * pi /180) and sin too
can you make another video for it
Its simple, cos gives X coordinate sin gives Y coordinate.
Everything is fine but even after following along, my state is not updating. I don't what's the problem.
Edit: It's working fine. I had to restart app instead of hot reload.
why are we multiplying Degree angle to radian ????
any point in circle is p(radius * cos Θ, radius * sin Θ)
why are we converting Θ to Θ * pi/180
Because we are making clock, and we want to work with 360' (degrees)
sir can u plz provide us the source code of full app
sir, it doesn't showing correct time.
Très Bon travail ! Pouvons-nous rentrer en contact ? Merci
I love u
Thanks for the love 💓
could someone explain more mathematically : 🥵
var secHandX = centerX + 80 * cos(90* pi / 180);
var secHandY = centerX + 80 * sin(90 * pi / 180);
sir can you help me and explain the part of draw dashes,I am really thankfull to you .i can not understand why we callculate the outer Circle Radius and inner circle Radius .kindly help me plz and explain this part.
var outerCircleRadius=radius;
var innerCircleRadius =radius-14;
for(double i=0;i
⭕️ look at this emoji or think of donut 🍩 , if you want dash lines between thickness of donut.. you need two points p1 from center to inner radius, p2 from center to outer radius... thats the funda used here. To draw a dash line we need x1,y1 and x2,y2 which are of 2 different radius 👍🏼
@@CodeXdev thank you sir for solving my problem☺
i += 30 for exact outLine
Jay ramJiKi
First view👍
Super 🎊 🎉
ehhh its not a tutorial if you take things for granted.. i cant continue bacause im unable to create this homepage my god
4 years old video 😐 my new videos should impress you😍
@@CodeXdev alright thank you for letting me know, its so hard to find good tutorial for learning flutter
Look at your camara not on your camara Display
Exactly, trying hard to act 😜Talking to camera is difficult than I thought.
The video isn't working properly.. and not because my internet connection or device, other videos on TH-cam are working fine except this video
Anyone else noticed something like that?
it’s working fine!
I exported in normal bit rate only, on top of that TH-cam does its own conversion so it should work fine!
Too much copy paste
😊 this video topic was soo deep it would have became 1 hour video.. thats y! But i tried to explain what I am pasting..
Amazing tutorial!
Glad it was helpful!
Wonderful