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

  Рет қаралды 78,016

CodeX

CodeX

Күн бұрын

Пікірлер: 164
@mehuljain7267
@mehuljain7267 4 жыл бұрын
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. 🔥
@eleandro
@eleandro 4 жыл бұрын
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??
@CodeXdev
@CodeXdev 4 жыл бұрын
Sure, i will write blog for that. Follow my FB page to get notified.
@musicproductionbrauns2594
@musicproductionbrauns2594 4 жыл бұрын
5:23 that double dot man crazy didnt knew about that
@Jan123.
@Jan123. 4 жыл бұрын
What does it do? I don't understand it.
@crymat123
@crymat123 4 жыл бұрын
@@Jan123. it's called cascade notation: dart.dev/guides/language/language-tour#cascade-notation-
@AkhilSharmaTech
@AkhilSharmaTech 3 жыл бұрын
mind=blown with the canvas and mathematics bit
@radiowallofsound
@radiowallofsound 3 жыл бұрын
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
@gamenation4k
@gamenation4k 4 жыл бұрын
The Best canva tutorial in youtube 💗✔️ keeping making some more high level tutorials
@fatihsonmez
@fatihsonmez 2 жыл бұрын
Simple, elegant, fast. A perfect tutorial. Thanks
@jabinaansari1447
@jabinaansari1447 4 жыл бұрын
Love the way you explain. Great job.
@CodeXdev
@CodeXdev 4 жыл бұрын
Glad you liked it
@SalMakes
@SalMakes 4 жыл бұрын
It's a really solid Tutorial there even a newbie like me can Follow it Thanks !
@Grewal0007
@Grewal0007 4 жыл бұрын
But if u are expert in math 🙄
@CodeXdev
@CodeXdev 4 жыл бұрын
Agree, it will come if we think and search in right direction. I found this sin* and cos* thing on stackoverflow 😄
@Grewal0007
@Grewal0007 4 жыл бұрын
@@CodeXdev thanks for this truth 😂 gains confidence in me 🙏😊
@GoToMan
@GoToMan 4 жыл бұрын
@@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
@radiowallofsound
@radiowallofsound 3 жыл бұрын
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.deleon9822
@joshuarfernandon.deleon9822 3 жыл бұрын
Awesome since Guatemala thanks for this teach. Sure amazing teacher.
@be_like__prateek
@be_like__prateek 3 жыл бұрын
Very underrated teacher ❤️
@CodeXdev
@CodeXdev 3 жыл бұрын
For those who understand 🤭
@GArvinthKrishna
@GArvinthKrishna 2 жыл бұрын
How make second hand to pointer like hand.
@betaguitarist9385
@betaguitarist9385 4 жыл бұрын
Thank you! Keep up the good works. I'm your fan now. 😀
@CodeXdev
@CodeXdev 4 жыл бұрын
Welcome aboard! 😍
@mikethegamedev
@mikethegamedev 4 жыл бұрын
How do you get that iphone screen test?
@pravinprince3221
@pravinprince3221 Жыл бұрын
Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir
@kisanshah3739
@kisanshah3739 4 жыл бұрын
best explanation best logic
@CodeXdev
@CodeXdev 4 жыл бұрын
Glad you think so!
@kavindutharaka2273
@kavindutharaka2273 4 жыл бұрын
wow. attractive UI. nice tutorial. Thank you.
@CodeXdev
@CodeXdev 4 жыл бұрын
Glad you like it!😊
@angrykorean3323
@angrykorean3323 Жыл бұрын
Thanks a lot! Where is define of 'dashBrush' at last part.
@angrykorean3323
@angrykorean3323 Жыл бұрын
I got it at his github 113row
@SwarajRoutray
@SwarajRoutray 4 жыл бұрын
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
@ujjwalchetan4907
@ujjwalchetan4907 10 ай бұрын
Great tutorial. Thanks👍
@lowkeylyesmith
@lowkeylyesmith 3 жыл бұрын
Hi, somehow I can't get it to show me the right time and I have no idea where the problem is.
@isho7777
@isho7777 2 жыл бұрын
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?
@CodeXdev
@CodeXdev 2 жыл бұрын
If you write `stf` you will get suggestion to generate StatefulWidget. `stl` is for StatelessWidget
@junaidjameel5049
@junaidjameel5049 Жыл бұрын
Thanks Dear Afzal
@sanketpatel7924
@sanketpatel7924 4 жыл бұрын
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
@ashikmahmood4018 Жыл бұрын
is this program run in background???
@tiefsoftwarelab
@tiefsoftwarelab 4 жыл бұрын
hello.new friend thank you for the tutorial
@laiho143
@laiho143 4 жыл бұрын
awesome! well explained! 👍🏼
@CodeXdev
@CodeXdev 4 жыл бұрын
Thanks! 😃
@samsurya283
@samsurya283 4 жыл бұрын
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
@sanderluis3652
@sanderluis3652 4 жыл бұрын
wow!
@HarshKumarKhatri
@HarshKumarKhatri 4 жыл бұрын
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.
@abraiyan7984
@abraiyan7984 4 жыл бұрын
Okay, I subscribed. Hope we will get a video each week.
@CodeXdev
@CodeXdev 4 жыл бұрын
Will try my best to hit KZbin with new video each week..
@adzeyk
@adzeyk 3 жыл бұрын
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?
@CodeXdev
@CodeXdev 3 жыл бұрын
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.
@charlesclayman3909
@charlesclayman3909 4 ай бұрын
Well explained. i love this
@CodeXdev
@CodeXdev 4 ай бұрын
Nice, this is was very old video.. do you think such topics are still helpful?
@charlesclayman3909
@charlesclayman3909 4 ай бұрын
@@CodeXdev Yes, such topics are still relevant today. They come in handy once in while
@yadhusanil7077
@yadhusanil7077 2 жыл бұрын
awesome bro , can you tell me how to add animation while changing the colour in custom paint, plzz help🙏
@Gamerboy18821
@Gamerboy18821 3 жыл бұрын
sir, it doesn't showing correct time.
@mohiro3993
@mohiro3993 4 жыл бұрын
Great tutorial, it helps me a lot!
@CodeXdev
@CodeXdev 4 жыл бұрын
Glad it helped!
@jatinraj4974
@jatinraj4974 4 жыл бұрын
Will it be the fully functional clock app or just UI brother!🤗 Btw your channel content is really good♥️♥️
@CodeXdev
@CodeXdev 4 жыл бұрын
I am planning to create this as full fledge app and publish on store. Thank you for feedback 🤗
@jatinraj4974
@jatinraj4974 4 жыл бұрын
@@CodeXdev please make tutorial on that also😅😁🤣
@GoToMan
@GoToMan 4 жыл бұрын
@@CodeXdev make a tutorial on this pls
@gt_diego
@gt_diego 4 жыл бұрын
Great tutorial, thanks!
@CodeXdev
@CodeXdev 4 жыл бұрын
Glad you enjoyed it!
@faheemahmadofficial7701
@faheemahmadofficial7701 4 жыл бұрын
Pleas make more tutorials for simple apps, also make them not too faced paced make them easier too
@votuankiet5982
@votuankiet5982 4 жыл бұрын
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 !
@quicktips3858
@quicktips3858 4 жыл бұрын
Just starting typing: stf (Stateful) or stl (Stateless), then Ctrl + Space and you will see the autocomplete option.
@votuankiet5982
@votuankiet5982 4 жыл бұрын
@@quicktips3858 thank you sooo much !
@quicktips3858
@quicktips3858 4 жыл бұрын
@@votuankiet5982 u are welcome!
@Zuke22
@Zuke22 4 жыл бұрын
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?
@CodeXdev
@CodeXdev 4 жыл бұрын
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
@amartyapatil4124
@amartyapatil4124 3 жыл бұрын
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
@mustafasinankoca6439
@mustafasinankoca6439 4 жыл бұрын
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?
@CodeXdev
@CodeXdev 4 жыл бұрын
We have to calculate angles for each hand with respect to current time.. :)
@hemanthpagadala3099
@hemanthpagadala3099 3 жыл бұрын
can i run this code in android studio????
@CodeXdev
@CodeXdev 3 жыл бұрын
Yes, of course!
@Amjad_Sajjad329
@Amjad_Sajjad329 8 ай бұрын
Very nice video but please keep slow speed of writing the code for new comer students.
@LuminousAsianBeauties
@LuminousAsianBeauties 3 жыл бұрын
wow.amazing tutorial.
@nurbekbatyrzhanuulu2957
@nurbekbatyrzhanuulu2957 3 жыл бұрын
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
@RandalLSchwartz
@RandalLSchwartz 4 жыл бұрын
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.
@stlo0309
@stlo0309 3 жыл бұрын
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?
@CodeXdev
@CodeXdev 3 жыл бұрын
Use stack, put image below and on top you can draw something.. if you want free hand drawing then use signature package
@Himanshukumarcomady
@Himanshukumarcomady 4 жыл бұрын
bro can you explain me why you are using double dot for fill the color and stroke also like (..color and ..style )
@CodeXdev
@CodeXdev 4 жыл бұрын
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.
@Himanshukumarcomady
@Himanshukumarcomady 4 жыл бұрын
@@CodeXdev thanks bro and can you make video on custompaint ❤️
@CodeXdev
@CodeXdev 4 жыл бұрын
🤣🤣🤣 u r commenting on custom paint video only 😉
@Himanshukumarcomady
@Himanshukumarcomady 4 жыл бұрын
@@CodeXdev because I saw only first video of clock playlist ❤️
@CrossAIDev
@CrossAIDev Жыл бұрын
Great work.. man
@AndrewMackenzie1
@AndrewMackenzie1 2 жыл бұрын
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.
@CodeXdev
@CodeXdev 2 жыл бұрын
Hello, thanks for highlighting. Actually there are different branches on the git reference provided. I fixed this issue in latest branch. :)
@mbagozpel
@mbagozpel 3 жыл бұрын
Great
@muneebshahzad1335
@muneebshahzad1335 2 жыл бұрын
impressive
@the_offroad_diaries
@the_offroad_diaries 4 жыл бұрын
Really great tutorial
@CodeXdev
@CodeXdev 4 жыл бұрын
Thank you! Cheers!
@muhammadrizqyalfaruq9977
@muhammadrizqyalfaruq9977 4 жыл бұрын
I love this tutorial
@BEESaiShivam
@BEESaiShivam 3 жыл бұрын
sir can u plz provide us the source code of full app
@장진수-x9e
@장진수-x9e 3 жыл бұрын
amazing stuff. thx man.
@Jan123.
@Jan123. 4 жыл бұрын
Sorry, what is the .. syntax about? Thanks. Great video :)
@CodeXdev
@CodeXdev 4 жыл бұрын
Hi, Which syntax?
@Jan123.
@Jan123. 4 жыл бұрын
@@CodeXdev this dot dot .. syntax.
@Jan123.
@Jan123. 4 жыл бұрын
For example you wrote in your code ..color = Color();
@CodeXdev
@CodeXdev 4 жыл бұрын
Oh, thats called Cascade Notation in dart 🎯 It gives access to preceding object without specifying name.
@mika-pc2rc
@mika-pc2rc 4 жыл бұрын
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:)
@CodeXdev
@CodeXdev 4 жыл бұрын
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-pc2rc
@mika-pc2rc 4 жыл бұрын
@@CodeXdev wow thanks for your answer.. Thank u👍
@M37Shadow
@M37Shadow 3 жыл бұрын
U are amazing! keep going
@CodeXdev
@CodeXdev 3 жыл бұрын
Thank you so much!!
@suryameda6215
@suryameda6215 4 жыл бұрын
Wonderful
@nwosuolumide7329
@nwosuolumide7329 3 жыл бұрын
Amazing tutorial!
@CodeXdev
@CodeXdev 3 жыл бұрын
Glad it was helpful!
@franciscopalacios3799
@franciscopalacios3799 3 жыл бұрын
crack!! 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
@nazimjoli549
@nazimjoli549 3 жыл бұрын
Amazing 🤩
@thesaulo14
@thesaulo14 4 жыл бұрын
thanks
@CodeXdev
@CodeXdev 4 жыл бұрын
You're welcome!
@dipenmavani8079
@dipenmavani8079 3 жыл бұрын
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
@CodeXdev
@CodeXdev 3 жыл бұрын
Because we are making clock, and we want to work with 360' (degrees)
@عبدالرحمنايمن-ذ2ي
@عبدالرحمنايمن-ذ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
@CodeXdev
@CodeXdev 3 жыл бұрын
Its simple, cos gives X coordinate sin gives Y coordinate.
@sameerk12982
@sameerk12982 4 жыл бұрын
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.
@CodeXdev
@CodeXdev 4 жыл бұрын
It was back in college days I used Mathematics last time 😄😃 Google is the best teacher now days.
@sameerk12982
@sameerk12982 4 жыл бұрын
@@CodeXdev I never went to college... Just done school.
@fallofmanbrand
@fallofmanbrand 4 жыл бұрын
nice video bro
@CodeXdev
@CodeXdev 4 жыл бұрын
Thanks for the visit
@mtux
@mtux 4 жыл бұрын
very thanks!!!
@CodeXdev
@CodeXdev 4 жыл бұрын
You're welcome!😊
@codester1217
@codester1217 4 жыл бұрын
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.
@harloom9603
@harloom9603 4 жыл бұрын
Awesome
@CodeXdev
@CodeXdev 4 жыл бұрын
Thank you Harloom.
@urban10x43
@urban10x43 2 жыл бұрын
Très Bon travail ! Pouvons-nous rentrer en contact ? Merci
@medamine194
@medamine194 3 жыл бұрын
i need to review some basic highschool math haha
@CodeXdev
@CodeXdev 3 жыл бұрын
Hahaha.. even i did some stackoverflow search for the formulas
@belsoufi5217
@belsoufi5217 2 жыл бұрын
could someone explain more mathematically : 🥵 var secHandX = centerX + 80 * cos(90* pi / 180); var secHandY = centerX + 80 * sin(90 * pi / 180);
@ratulicious
@ratulicious 3 жыл бұрын
i += 30 for exact outLine
@syedafatima2889
@syedafatima2889 3 жыл бұрын
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
@CodeXdev
@CodeXdev 3 жыл бұрын
⭕️ 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 👍🏼
@syedafatima2889
@syedafatima2889 3 жыл бұрын
@@CodeXdev thank you sir for solving my problem☺
@panzorax.
@panzorax. 4 жыл бұрын
i loved
@_haptic_shorts
@_haptic_shorts 4 жыл бұрын
Explain is just Awesome, But I'm pretty week on Math .. Sir, how do i learn these logic ??😔
@CodeXdev
@CodeXdev 4 жыл бұрын
Don't worry, it comes with practice. Sometime googling also will help :)
@_haptic_shorts
@_haptic_shorts 4 жыл бұрын
@@CodeXdev okay sir🥰
@GoToMan
@GoToMan 4 жыл бұрын
@@_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
@anandmagar6132
@anandmagar6132 4 жыл бұрын
Look at your camara not on your camara Display
@CodeXdev
@CodeXdev 4 жыл бұрын
Exactly, trying hard to act 😜Talking to camera is difficult than I thought.
@skimesss
@skimesss 6 ай бұрын
ehhh its not a tutorial if you take things for granted.. i cant continue bacause im unable to create this homepage my god
@CodeXdev
@CodeXdev 6 ай бұрын
4 years old video 😐 my new videos should impress you😍
@skimesss
@skimesss 6 ай бұрын
@@CodeXdev alright thank you for letting me know, its so hard to find good tutorial for learning flutter
@darlingtonobiriyeboah9600
@darlingtonobiriyeboah9600 4 жыл бұрын
I love u
@CodeXdev
@CodeXdev 4 жыл бұрын
Thanks for the love 💓
@Dev100-du4tc
@Dev100-du4tc 7 ай бұрын
Jay ramJiKi
@sharbelokzan9673
@sharbelokzan9673 4 жыл бұрын
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?
@laiho143
@laiho143 4 жыл бұрын
it’s working fine!
@CodeXdev
@CodeXdev 4 жыл бұрын
I exported in normal bit rate only, on top of that KZbin does its own conversion so it should work fine!
@Karim-wd2je
@Karim-wd2je 4 жыл бұрын
First view👍
@CodeXdev
@CodeXdev 4 жыл бұрын
Super 🎊 🎉
@v0xl
@v0xl 4 жыл бұрын
Too much copy paste
@CodeXdev
@CodeXdev 4 жыл бұрын
😊 this video topic was soo deep it would have became 1 hour video.. thats y! But i tried to explain what I am pasting..
@imankamali5799
@imankamali5799 3 жыл бұрын
fantastic
@CarlosHenrique-er7zq
@CarlosHenrique-er7zq 3 жыл бұрын
Amazing tutorial!
@rec-trick
@rec-trick Жыл бұрын
amazing
Flutter Design Tutorial || Clock App (Episode-2)
11:33
CodeX
Рет қаралды 31 М.
My scorpion was taken away from me 😢
00:55
TyphoonFast 5
Рет қаралды 2,7 МЛН
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
Inspired by MKBHD | Built with Flutter - Panels App
24:24
CustomPainter - Art with Flutter
10:00
Flutter Explained
Рет қаралды 11 М.
Flutter Card Widget | Card widget in Flutter
8:06
Flutter Teacher
Рет қаралды 20 М.
Flutter Navigation with Provider || Clock App (Episode-3)
14:14
Flutter ListView Tutorial | Clock App (Episode-4)
16:10
CodeX
Рет қаралды 34 М.
Flutter Animation in 5 Minutes
5:01
Fun with Flutter
Рет қаралды 176 М.
My scorpion was taken away from me 😢
00:55
TyphoonFast 5
Рет қаралды 2,7 МЛН