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. 🔥
@eleandro4 жыл бұрын
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??
@CodeXdev4 жыл бұрын
Sure, i will write blog for that. Follow my FB page to get notified.
@musicproductionbrauns25944 жыл бұрын
5:23 that double dot man crazy didnt knew about that
@Jan123.4 жыл бұрын
What does it do? I don't understand it.
@crymat1234 жыл бұрын
@@Jan123. it's called cascade notation: dart.dev/guides/language/language-tour#cascade-notation-
@AkhilSharmaTech3 жыл бұрын
mind=blown with the canvas and mathematics bit
@radiowallofsound3 жыл бұрын
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
@gamenation4k4 жыл бұрын
The Best canva tutorial in youtube 💗✔️ keeping making some more high level tutorials
@fatihsonmez2 жыл бұрын
Simple, elegant, fast. A perfect tutorial. Thanks
@jabinaansari14474 жыл бұрын
Love the way you explain. Great job.
@CodeXdev4 жыл бұрын
Glad you liked it
@SalMakes4 жыл бұрын
It's a really solid Tutorial there even a newbie like me can Follow it Thanks !
@Grewal00074 жыл бұрын
But if u are expert in math 🙄
@CodeXdev4 жыл бұрын
Agree, it will come if we think and search in right direction. I found this sin* and cos* thing on stackoverflow 😄
@Grewal00074 жыл бұрын
@@CodeXdev thanks for this truth 😂 gains confidence in me 🙏😊
@GoToMan4 жыл бұрын
@@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
@radiowallofsound3 жыл бұрын
Thanks for this video, it saved me a lot of research time, in 15 mins I already know what I needed for my project
@joshuarfernandon.deleon98223 жыл бұрын
Awesome since Guatemala thanks for this teach. Sure amazing teacher.
@be_like__prateek3 жыл бұрын
Very underrated teacher ❤️
@CodeXdev3 жыл бұрын
For those who understand 🤭
@GArvinthKrishna2 жыл бұрын
How make second hand to pointer like hand.
@betaguitarist93854 жыл бұрын
Thank you! Keep up the good works. I'm your fan now. 😀
@CodeXdev4 жыл бұрын
Welcome aboard! 😍
@mikethegamedev4 жыл бұрын
How do you get that iphone screen test?
@pravinprince3221 Жыл бұрын
Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir
@kisanshah37394 жыл бұрын
best explanation best logic
@CodeXdev4 жыл бұрын
Glad you think so!
@kavindutharaka22734 жыл бұрын
wow. attractive UI. nice tutorial. Thank you.
@CodeXdev4 жыл бұрын
Glad you like it!😊
@angrykorean3323 Жыл бұрын
Thanks a lot! Where is define of 'dashBrush' at last part.
@angrykorean3323 Жыл бұрын
I got it at his github 113row
@SwarajRoutray4 жыл бұрын
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 ❤️
@АмирланАубакиров3 жыл бұрын
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
@ujjwalchetan490710 ай бұрын
Great tutorial. Thanks👍
@lowkeylyesmith3 жыл бұрын
Hi, somehow I can't get it to show me the right time and I have no idea where the problem is.
@isho77772 жыл бұрын
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?
@CodeXdev2 жыл бұрын
If you write `stf` you will get suggestion to generate StatefulWidget. `stl` is for StatelessWidget
@junaidjameel5049 Жыл бұрын
Thanks Dear Afzal
@sanketpatel79244 жыл бұрын
Super video I learned lots of things.
3 жыл бұрын
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.
@ashikmahmood4018 Жыл бұрын
is this program run in background???
@tiefsoftwarelab4 жыл бұрын
hello.new friend thank you for the tutorial
@laiho1434 жыл бұрын
awesome! well explained! 👍🏼
@CodeXdev4 жыл бұрын
Thanks! 😃
@samsurya2834 жыл бұрын
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
@sanderluis36524 жыл бұрын
wow!
@HarshKumarKhatri4 жыл бұрын
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.
@abraiyan79844 жыл бұрын
Okay, I subscribed. Hope we will get a video each week.
@CodeXdev4 жыл бұрын
Will try my best to hit KZbin with new video each week..
@adzeyk3 жыл бұрын
Hi, Will this tutorial work on a Windows Machine and an Android Emulator?
3 жыл бұрын
Do I understand correctly that the whole clock is redrawn each second?
@CodeXdev3 жыл бұрын
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.
@charlesclayman39094 ай бұрын
Well explained. i love this
@CodeXdev4 ай бұрын
Nice, this is was very old video.. do you think such topics are still helpful?
@charlesclayman39094 ай бұрын
@@CodeXdev Yes, such topics are still relevant today. They come in handy once in while
@yadhusanil70772 жыл бұрын
awesome bro , can you tell me how to add animation while changing the colour in custom paint, plzz help🙏
@Gamerboy188213 жыл бұрын
sir, it doesn't showing correct time.
@mohiro39934 жыл бұрын
Great tutorial, it helps me a lot!
@CodeXdev4 жыл бұрын
Glad it helped!
@jatinraj49744 жыл бұрын
Will it be the fully functional clock app or just UI brother!🤗 Btw your channel content is really good♥️♥️
@CodeXdev4 жыл бұрын
I am planning to create this as full fledge app and publish on store. Thank you for feedback 🤗
@jatinraj49744 жыл бұрын
@@CodeXdev please make tutorial on that also😅😁🤣
@GoToMan4 жыл бұрын
@@CodeXdev make a tutorial on this pls
@gt_diego4 жыл бұрын
Great tutorial, thanks!
@CodeXdev4 жыл бұрын
Glad you enjoyed it!
@faheemahmadofficial77014 жыл бұрын
Pleas make more tutorials for simple apps, also make them not too faced paced make them easier too
@votuankiet59824 жыл бұрын
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 !
@quicktips38584 жыл бұрын
Just starting typing: stf (Stateful) or stl (Stateless), then Ctrl + Space and you will see the autocomplete option.
@votuankiet59824 жыл бұрын
@@quicktips3858 thank you sooo much !
@quicktips38584 жыл бұрын
@@votuankiet5982 u are welcome!
@Zuke224 жыл бұрын
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?
@CodeXdev4 жыл бұрын
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
@amartyapatil41243 жыл бұрын
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
@mustafasinankoca64394 жыл бұрын
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?
@CodeXdev4 жыл бұрын
We have to calculate angles for each hand with respect to current time.. :)
@hemanthpagadala30993 жыл бұрын
can i run this code in android studio????
@CodeXdev3 жыл бұрын
Yes, of course!
@Amjad_Sajjad3298 ай бұрын
Very nice video but please keep slow speed of writing the code for new comer students.
@LuminousAsianBeauties3 жыл бұрын
wow.amazing tutorial.
@nurbekbatyrzhanuulu29573 жыл бұрын
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
@RandalLSchwartz4 жыл бұрын
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.
@stlo03093 жыл бұрын
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?
@CodeXdev3 жыл бұрын
Use stack, put image below and on top you can draw something.. if you want free hand drawing then use signature package
@Himanshukumarcomady4 жыл бұрын
bro can you explain me why you are using double dot for fill the color and stroke also like (..color and ..style )
@CodeXdev4 жыл бұрын
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.
@Himanshukumarcomady4 жыл бұрын
@@CodeXdev thanks bro and can you make video on custompaint ❤️
@CodeXdev4 жыл бұрын
🤣🤣🤣 u r commenting on custom paint video only 😉
@Himanshukumarcomady4 жыл бұрын
@@CodeXdev because I saw only first video of clock playlist ❤️
@CrossAIDev Жыл бұрын
Great work.. man
@AndrewMackenzie12 жыл бұрын
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.
@CodeXdev2 жыл бұрын
Hello, thanks for highlighting. Actually there are different branches on the git reference provided. I fixed this issue in latest branch. :)
@mbagozpel3 жыл бұрын
Great
@muneebshahzad13352 жыл бұрын
impressive
@the_offroad_diaries4 жыл бұрын
Really great tutorial
@CodeXdev4 жыл бұрын
Thank you! Cheers!
@muhammadrizqyalfaruq99774 жыл бұрын
I love this tutorial
@BEESaiShivam3 жыл бұрын
sir can u plz provide us the source code of full app
@장진수-x9e3 жыл бұрын
amazing stuff. thx man.
@Jan123.4 жыл бұрын
Sorry, what is the .. syntax about? Thanks. Great video :)
@CodeXdev4 жыл бұрын
Hi, Which syntax?
@Jan123.4 жыл бұрын
@@CodeXdev this dot dot .. syntax.
@Jan123.4 жыл бұрын
For example you wrote in your code ..color = Color();
@CodeXdev4 жыл бұрын
Oh, thats called Cascade Notation in dart 🎯 It gives access to preceding object without specifying name.
@mika-pc2rc4 жыл бұрын
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:)
@CodeXdev4 жыл бұрын
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
@mika-pc2rc4 жыл бұрын
@@CodeXdev wow thanks for your answer.. Thank u👍
@M37Shadow3 жыл бұрын
U are amazing! keep going
@CodeXdev3 жыл бұрын
Thank you so much!!
@suryameda62154 жыл бұрын
Wonderful
@nwosuolumide73293 жыл бұрын
Amazing tutorial!
@CodeXdev3 жыл бұрын
Glad it was helpful!
@franciscopalacios37993 жыл бұрын
crack!! 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
@nazimjoli5493 жыл бұрын
Amazing 🤩
@thesaulo144 жыл бұрын
thanks
@CodeXdev4 жыл бұрын
You're welcome!
@dipenmavani80793 жыл бұрын
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
@CodeXdev3 жыл бұрын
Because we are making clock, and we want to work with 360' (degrees)
@عبدالرحمنايمن-ذ2ي3 жыл бұрын
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
@CodeXdev3 жыл бұрын
Its simple, cos gives X coordinate sin gives Y coordinate.
@sameerk129824 жыл бұрын
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.
@CodeXdev4 жыл бұрын
It was back in college days I used Mathematics last time 😄😃 Google is the best teacher now days.
@sameerk129824 жыл бұрын
@@CodeXdev I never went to college... Just done school.
@fallofmanbrand4 жыл бұрын
nice video bro
@CodeXdev4 жыл бұрын
Thanks for the visit
@mtux4 жыл бұрын
very thanks!!!
@CodeXdev4 жыл бұрын
You're welcome!😊
@codester12174 жыл бұрын
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.
@harloom96034 жыл бұрын
Awesome
@CodeXdev4 жыл бұрын
Thank you Harloom.
@urban10x432 жыл бұрын
Très Bon travail ! Pouvons-nous rentrer en contact ? Merci
@medamine1943 жыл бұрын
i need to review some basic highschool math haha
@CodeXdev3 жыл бұрын
Hahaha.. even i did some stackoverflow search for the formulas
@belsoufi52172 жыл бұрын
could someone explain more mathematically : 🥵 var secHandX = centerX + 80 * cos(90* pi / 180); var secHandY = centerX + 80 * sin(90 * pi / 180);
@ratulicious3 жыл бұрын
i += 30 for exact outLine
@syedafatima28893 жыл бұрын
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
@CodeXdev3 жыл бұрын
⭕️ 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 👍🏼
@syedafatima28893 жыл бұрын
@@CodeXdev thank you sir for solving my problem☺
@panzorax.4 жыл бұрын
i loved
@_haptic_shorts4 жыл бұрын
Explain is just Awesome, But I'm pretty week on Math .. Sir, how do i learn these logic ??😔
@CodeXdev4 жыл бұрын
Don't worry, it comes with practice. Sometime googling also will help :)
@_haptic_shorts4 жыл бұрын
@@CodeXdev okay sir🥰
@GoToMan4 жыл бұрын
@@_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
@anandmagar61324 жыл бұрын
Look at your camara not on your camara Display
@CodeXdev4 жыл бұрын
Exactly, trying hard to act 😜Talking to camera is difficult than I thought.
@skimesss6 ай бұрын
ehhh its not a tutorial if you take things for granted.. i cant continue bacause im unable to create this homepage my god
@CodeXdev6 ай бұрын
4 years old video 😐 my new videos should impress you😍
@skimesss6 ай бұрын
@@CodeXdev alright thank you for letting me know, its so hard to find good tutorial for learning flutter
@darlingtonobiriyeboah96004 жыл бұрын
I love u
@CodeXdev4 жыл бұрын
Thanks for the love 💓
@Dev100-du4tc7 ай бұрын
Jay ramJiKi
@sharbelokzan96734 жыл бұрын
The video isn't working properly.. and not because my internet connection or device, other videos on KZbin are working fine except this video Anyone else noticed something like that?
@laiho1434 жыл бұрын
it’s working fine!
@CodeXdev4 жыл бұрын
I exported in normal bit rate only, on top of that KZbin does its own conversion so it should work fine!
@Karim-wd2je4 жыл бұрын
First view👍
@CodeXdev4 жыл бұрын
Super 🎊 🎉
@v0xl4 жыл бұрын
Too much copy paste
@CodeXdev4 жыл бұрын
😊 this video topic was soo deep it would have became 1 hour video.. thats y! But i tried to explain what I am pasting..