Analog Clock Light & Dark Theme - Flutter UI - Speed Code

Подписаться 228 тыс.

Просмотров 49 тыс.

50% 1

We design a nice clean analog clock app UI by using flutter. Our clock supports both the Dark and Light theme. If you want to learn how to use both Light and Dark theme then it helps a lot.
►Starting Code: bit.ly/34Ibhhs
►Source Code: github.com/abuanwar072/Flutte...
►Codex Video Link
• Flutter Custom Painter...
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / theflutterway
► Timestamps
0:00 Intro
0:36 Project Setup
1:56 AppBar
4:02 Digital Clock
8:10 Analog Clock
20:14 Country Card
Thanks for watching!
Make sure to like + Subscribe For More!

Опубликовано:

16 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 159

@SeriesTube01 3 года назад

Great channel, amazing tutorials. Thank you very much. 👏👏👏 For anyone wondering about the guide lines: the colored ones come from the extension "Bracket Pair Colorizer" and the dashed lines are enabled with the option "Preview Flutter Ui Guides" on VS Code settings from the Dart & Flutter extension. Kind regards.

@joshua_v_thomas 3 года назад

your channel really motivates me to learn flutter. tysm

@TheFlutterWay 3 года назад

That's awesome!

@trololopower4395 2 года назад

The best channel about Flutter! Thank you for that!

@oscarh4066 3 года назад

Your videos make my heart Flutter!

@TheFlutterWay 3 года назад

I'm glad!

@oscarh4066 3 года назад

@@TheFlutterWay I have a question on themeData(context) and darkThemeData(context) functions, why are you passing down context to themeData? It works without passing BuildContext, is there a reason?

@denilsoncosta9837 3 года назад

amazing video, i'm learnig a lot with you. keep going. regards from Angola!

@TheFlutterWay 3 года назад

Happy to hear that!

@dire_vin 3 года назад

Enjoyed this video. Learned some ideas along the way. For anyone reading this comment, ```center + Offset.fromDirection(angle * pi / 180, length)``` can also be used to get line end position.

@TheFlutterWay 3 года назад

Thanks, man❤️

@ajaygujja6815 2 года назад

@Vinayak Will you please Elaborate this. Where exactly we need to change

@leonardocoutinho8469 3 года назад

I bag my things to go home, but i stay cause i receive a notification of a new video of Flutter Way Channel

@TheFlutterWay 3 года назад

You're the best!❤️❤️❤️

@RamKumar-zf5cl 3 года назад

Awsome Work Brother. Keep going

@TheFlutterWay 3 года назад

Thanks ✌️

@access0288 3 года назад

Thank you so much! It solved my deadlocked problem.

@prabinmaharjan5150 3 года назад

it's amazing... you've been so much helpful

@TheFlutterWay 3 года назад

Happy to help!

@rohansingh4327 3 года назад

Dude Such an Amazing Job

@TheFlutterWay 3 года назад

I'm glad you like it

@abdulaziz4594 3 года назад

khub e sundor hoyeche. design guru :)

@TheFlutterWay 3 года назад

Thank you so much

@petersvictor1141 3 года назад

This man is just too gooood

@ahmedmohsen1873 3 года назад

AMAZING !!

@peterugah9295 3 года назад

awesome man

@TheFlutterWay 3 года назад

Glad you enjoyed it

@d.developer 2 года назад

i loved 14:11 how you mentioned other channel

@AlexM-me4vz 3 года назад

Great work

@TheFlutterWay 3 года назад

Thank you! Cheers!

@hamzasusam3790 3 года назад

if you want 1:01 instead of 1:1 change; ${_timeOfDay.minute.)} to ${_timeOfDay.minute.toString().padLeft(2, "0")}

@briankavishe3300 3 года назад

How about 01:01 ??

@hamzasusam3790 3 года назад

@@briankavishe3300 do same thing for hour too

@hamzasusam3790 3 года назад

@@briankavishe3300 or replace minute with periodhour

@briankavishe3300 3 года назад

@@hamzasusam3790 ${_timeOfDay.periodhour} OR ${_timeOfDay.periodhour.toString().padLeft(2, "0")}

@TheFlutterWay 3 года назад

${_timeOfDay.periodhour.toString().padLeft(2, "0")}

@kennguyen1016 3 года назад

I really like it!!!

@TheFlutterWay 3 года назад

Glade to hear that!

@muhammadrodhy213 3 года назад

Thank you. very useful

@TheFlutterWay 3 года назад

Glad to hear that

@miladedalatian1876 3 года назад

perfect and perfect :)

@TheFlutterWay 3 года назад

Thanks

@putlom555 3 года назад

Thank you very much, You are my teacher

@TheFlutterWay 3 года назад

Glad I could help!

@somapp4773 3 года назад

keep going i love like you

@jhonydellavalentina3248 3 года назад

Ohhh all your videos are awesome, i'm learning a lot. Please make a video using more examples of State Management (Provider and MobX). Best regards from Brazil

@TheFlutterWay 3 года назад

Sure I will

@FP8J 3 года назад

@@TheFlutterWay any chance for a Redux or BLoC one?

@oscarh4066 3 года назад

I second that, I would love to see a BLoC one.

@here-to-go 3 года назад

Amazing

@TheFlutterWay 3 года назад

Thank you! Cheers!

@walmosawi 3 года назад

very nice

@TheFlutterWay 3 года назад

Thanks

@gowshikajayaprakash4213 3 года назад

You are doing a great work.And your presentation is awesome👌.. My request is can you make tutorial for flutter app development

@Acika2223 2 года назад

Great video as usual, but one question, how do you create this intro where you show the finish app?

@huutran6053 3 года назад

I like You. Good job!

@TheFlutterWay 3 года назад

Oh thank you

@tiefsoftwarelab 3 года назад

hello.new friend thank you for the tutorial

@atangbao5478 3 года назад

Thank you. It's amazing video. Where do you download images in your project?

@mukhsin915 3 года назад

Mantap gan

@walmosawi 3 года назад

thanx

@TheFlutterWay 3 года назад

Most welcome 🙏

@mohit_pal_singh 3 года назад

This is just so mesmerizing 🥺💕. Can you tell me what extensions do you use please🙏🏻?

@TheFlutterWay 3 года назад

Flutter and Bracket Pair Colorizer

@mohit_pal_singh 3 года назад

@@TheFlutterWay thankyou

@k0lbis 3 года назад

How do you decide what colors you use? Your color game is always on point!

@banabda 3 года назад

True

@isalihkilic 3 года назад

There is some rules known as color theory

@prince-sonawane 3 года назад

Code Overflow are you talking about adobe kuler ?

@prince-sonawane 3 года назад

He said in some previous video reply that his Ux / UI guy gives it.

@isalihkilic 3 года назад

@@Flutterful This website is a makeup website?

@yashpatki270 3 года назад

Can you explain what the SizeConfig class does, please? Awesome video nonetheless.

@TheFlutterWay 3 года назад

It helps us to make responsive UI

@tommyeagen3763 3 года назад

the champ

@TheFlutterWay 3 года назад

Thanks 😇

@helloworld7796 3 года назад

Hi, on your patreon, do you share you VS plugins and configs? I have flutter plugin, when saving code, it formats code in a really strange way. While I do prefer your formating of the code, as I am more use to it

@matiasvirasoro 3 года назад

wow, very nice tutorial. One question. how can I display the minutes or hours in two digits? Example 08:05 am. tsm

@Kot-hc3nv 3 года назад

Thank you, very useful! But how to save the theme? When i close the app, the theme is changed...

@TheFlutterWay 3 года назад

Maybe you can use sharedpreferences for that

@mars3142 3 года назад

How did you record the Rotato intro? I know how you rotate the phone. What I want to know is the app content within the device frame...

@naveenjangra8582 3 года назад

😍

@developerypc 3 года назад

Why don't you add it to the backend? I think it would be great. You are also great.

@dkayk1985 3 года назад

In flutter how to make complete app ui is one part. for back-end or working app what I have to learn

@dontsubscribetomychannel8619 3 года назад

How does he make that phone which is in the right side

@zamar_roura 3 года назад

Where is the codex clock link in the description? Great vid.

@TheFlutterWay 3 года назад

please check now, sorry somehow I missed it

@zamar_roura 3 года назад

@@TheFlutterWay hahaha no problem, you made me get python and try to understand the formula myself. I forgot all trigonometry since highschool, had to search again what a radian was.

@raccoonteachesyou 3 года назад

Hey ! Great tutorial :) Is this responsive ? Thanks you !

@TheFlutterWay 3 года назад

Yes, it is

@muhammadtalha5665 3 года назад

did you compete in the flutter clock challenge hosted by google a year back ? from Nov 2019 to 11th of feb 2020

@gowshikajayaprakash4213 3 года назад

Can you make tutorial for flutter app development from beginning to advanced level please

@briankavishe3300 3 года назад

How can I set the time to be two digits..?

@berkecankalyon5431 3 года назад

Hello brother, How do you prepare intro scene?

@hamzasusam3790 3 года назад

my intellisense doesnt show me () {} and () => when i press "ctrl+space". Is there an extension for it? Im tired of writing those brackets.

@AL-eo2gb 3 года назад

Wooow

@dailystudykorean6401 3 года назад

First 😄😁😆😅

@giorgiozarantonello2211 3 года назад

fabolous channel ! what is the key ".." ??

@somapp4773 3 года назад

1:01

@BurtonJohnson 3 года назад

What is the VS Code extension that adds the tree to your code, pointing to all the children? I've been trying to find it everywhere, I even had a Stack Overflow question about it closed.

@TheFlutterWay 3 года назад

Bracket Pair Colorizer

@aakashjangidme 3 года назад

Do a specific size config tutorial please

@TheFlutterWay 3 года назад

Great suggestion!

@aakashjangidme 3 года назад

@@TheFlutterWay thank you, that's needed.

@tabulaonline 3 года назад

Hi, author! Great work, but I've found a little calculation error on analog arrows offset. Instead of using dateTime.minute * 6 (for seconds and minutes, but same principle applies to hours), you should use (dateTime.minute * 6 - 90). This way zero seconds will be on 12 hour position, but not on 3. Sorry for my unclear english )

@tabulaonline 3 года назад

Oops, it seems you are using Transform.rotate() to fix this issue, but anyways, there was a pure mathematical approach :)

@tabulaonline 3 года назад

Also, it's advised to cancel all timers in widget's dispose to avoid memory leak )

@TheFlutterWay 3 года назад

Yep you are absolutely right.

@ishanknijhawan 3 года назад

At 23:16 , How did you add @required to all the parameters simultaneously ?

@IllllIIllllI 3 года назад

In VS code you can hold middlemouse and drag to edit multiple rows at once

@dummail5709 3 года назад

Nice, hope some explain in the video

@TheFlutterWay 3 года назад

We will

@dummail5709 3 года назад

Hurry up broo , hahaha

@JesviJonathan 3 года назад

First

@nishantdhartalvar 3 года назад

The size of the app getting too big in Flutter! How to solve this problem?

@prince-sonawane 3 года назад

@TheFlutterWay can you tell, do I need to call `SizeConfig.init(context)` on everyscreen or it is usable on everyscreen once called in main screen...

@TheFlutterWay 3 года назад

Just need to call in main or the first screen on your app, otherwise it shows error

@prince-sonawane 3 года назад

@@TheFlutterWay Can I do this same thing for getting SharedPreference data and use it across the tree below. as it will be an async fetch, is it effective ?

@azam2390 3 года назад

1. In real how much time it took for you? 2. Where did you learn This?

@barath4829 3 года назад

How to use getProportionateScreenWidth widget??? In my flutter ide,it's not coming..... Did you install any dependencies for that?? Please reply

@TheFlutterWay 3 года назад

no, SizConfig() is a widget that I build for responsive my UI

@barath4829 3 года назад

@@TheFlutterWay thank you

@BurtonJohnson 3 года назад

Are you using Cascadia Code for your font, but not using font ligatures? You monster!

@yiwuzh 3 месяца назад

Do you have a github?

@yiwuzh 3 месяца назад

got it, thx very much

@6112arjun Год назад

Lots of trouble starting for windows and android emulator users

@Tamer_Ali 3 года назад

Where is Ep 4 of Complete E-Commerce App Flutter UI?

@TheFlutterWay 3 года назад

Coming Soon

@aamirali8114 3 года назад

svg where did you get it from can you share the link.

@TheFlutterWay 3 года назад

My designer provide me those

@watchingcontent438 3 года назад

first

@ujjwalbarman142 3 года назад

Can you please make a tutorial on how to make these flutter apps as installable signed apks

@TheFlutterWay 3 года назад

Noted!

@user-gs9ib5gb6z 3 года назад

you can google it :) this is already described in detail on the official flutter website.

@ujjwalbarman142 3 года назад

@@user-gs9ib5gb6z I have tried following the official documentation but I faced issues and the signed apk that was generated kept crashing on my device. Hence the request.

@simmslabs 3 года назад

77th Liker

@omarfarouk8507 3 года назад

Third

@512hamada 3 года назад

I'm trying using your responsive size_config code but every time it gives me an error

@TheFlutterWay 3 года назад

What kind of error

@512hamada 3 года назад

@@TheFlutterWay The method '*' was called on null. Receiver: null Tried calling: *(0.25) this appear when I'm writing for example sizeconfig.screenwidth * 0.25 I tried to print sizeconfig.screenwidth it gives null

@wpcreator4413 3 года назад

i want to learn flutter 💔🙄😭

@TheFlutterWay 3 года назад

you may check this one www.udemy.com/course/flutter-bootcamp-with-dart/

@LaosMasterClub 3 года назад

how to run this app

@TheFlutterWay 3 года назад

Check how to run flutter app on google

@LaosMasterClub 3 года назад

@@TheFlutterWay I want to run on vscode

@TheFlutterWay 3 года назад

@@LaosMasterClub F5

@reflekx5977 3 года назад

Dada ghori cholbe to?!

@TheFlutterWay 3 года назад

obbosoi cholbe data, try mere dekhen😜

@sodiqmirzo 3 года назад

Please share github profile

@serdaroraz3129 3 года назад

I don't understood , you are write very fast

@wpcreator4413 3 года назад

i am not a scam

@jaimindudharejiya914 3 года назад

Dont ever ask your doubts here.. cause this developer is very busy(fake) to answer them, just you tell them good things they will lick your back 🤦‍♂️ PS:- I`ve personally felt this😒