No video :(

(1.2) Coding the New Flutter Counter App - Dynamic Light/Dark Theme, Flare Animation, Responsiveness

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

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

50% 1

Hi there!
Here's the github repository where you can clone all the source code:
github.com/The...
Here's the github repository from where you can download my default startup project: github.com/The...
I get my colors from --- colorsinspo.com/
Old Flare website --- flare.rive.app/
In this long tutorial I'll show you how to implement the redesigned counter app we discussed in the previous video. We'll implement amazing features like dynamically changing light/dark theme, flare animations, live background, responsiveness and many many more.
All animations were done in VideoScribe, you can try it by clicking my affiliate link --- www.awin1.com/...
You can contact me directly here:
Join my Discord Server --- / discord
Twitter --- / letsgetwckd
Instagram --- / letsgetwckd
Also, if you want to support me furthermore you can become an RU-vid Member, donate or buy my courses on Udemy, using the following links:
Become an Official RU-vid Member! ---- / flutterly
Buy my Udemy Courses! ---- www.udemy.com/...
Support me on Revolut! ---- revolut.me/let...
Buy me a Ko-fi! --- ko-fi.com/wckdyt
Donate me on Paypal! --- www.paypal.me/...
Support me on Patreon! --- / wckdyt
Captions:
0:00 - Intro
0:40 - StartUp Project
1:19 - Routes
5:25 - Light/Dark Themes
11:00 - ThemeCubit
19:00 - Animated Background
22:19 - Dart Extensions
24:05 - Modularisation
25:40 - CounterSlider
27:40 - Flare Animations
31:10 - CounterCubit
34:30 - Animating the CounterValue
36:40 - Responsiveness

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

14 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I'm not sure if using 'themeMode' was necessary here. By default it changes when system theme changes. So the app theme should change automatically between light and dark theme when you switch system theme.

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

Actually, you're right, just tried it and I can confirm that it works fine without ThemeMode. I don't know why it didn't work for me in the first place. The only problem I see is that it won't also change the status & navigation bar colors accordingly, because there's nowhere to call that function when the theme rebuilds. So it's still a solid idea to work with a theme cubit.

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

Anyways, so the thing is that there's no need for the themeMode parameter, but you'd still need the WidgetBindingObserver to detect if the theme changes in order to switch the status and navigation bar theming.

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

Thanks for the feedback, mate, pinned your comment so that people will be able to see it faster.

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

@@Flutterly Thanks for great videos!

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

@@mivoligo Thank you for the great feedback!

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

This channel transforms you from a beginner flutter developer to a pro in nothing! Man you’re amazing 👑

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

Thanks, bro, I really appreciate it!

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

I will keep promoting your videos to my friends due to the huge attention you are giving to the comunity, thank you very much dude! You are inspiring.

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

Thank you so much for your kind words. They're really appreciated!

@rkumar4593 Год назад

Best flutter channel on RU-vid ! Great way of concept explanation and presentation. Thanku 😇

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

Best flutter channel on RU-vid! Just don't stop this amazing work! ❤️

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

Thanks a lot for the feedback, man!

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

Damn dude, you're crazy! I have not seen such dedication from a tutorial channel in a long while. You are an angel, nobody does tutorial that well structured and informative. I am asking you again =)), please make videos in the future about firebase scalability, I think you'd be the best at this.

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

I will, mate, thanks for the kind feedback!

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

One of the best instructor on such crucial topics! Hope you gain a lot more deserved popularity soon and thanks a lot

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

Thank you so much for your kind feedback! Hopefully I will!

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

Thanks, you reuploaded I was in the middle last time and gone :D As usual, very well explained even small little things I didn't know.

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

Yes, there was an issue with a video, fixed it

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

This one tutorial has covered a lot of topics together which is certainly worth praising. You deserve a thank you for that ❤. I would like to see more videos like this in the future.😊

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

Thank you for this amazing feedback! ✨

@skypuff Год назад

I finished this tutorial and I have learned a lot. I hope you are okay and able to make more of these. Thank you very much! 😄😄

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

GJ man - subscribed and liked for the algo. Hopefully your channel will blow up soon ;)

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

Very good guy, I learned a lot about the Flutter intern, good teaching and good work!

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

Thank you so much!

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

wow !! I have learned a lot, more than a counter app this is a tutorial that allows you to make a professional and scalable setup of any Flutter app.

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

Thank you so much for the feedback!

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

Can't say how much this is useful. and clean. many thanks please keep the good work.

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

Thank you so much! ✨

@batmanonabike3119 10 месяцев назад

Flutterly is my bible for flutter reference and good practises

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

Wow you are amazing! ❤ I can't wait for a firebase tutorial from you that would be super cool or perhaps a combination of firebase and bloc 💙

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

The problem with using the sizer package for responsiveness is that you can't work professionally with it for production-ready app where the design is carefully crafted by the Designer in Figma and Adobe XD. In such cases having a SizeConfig injection to the MaterialApp widget helps in using the exact size provided in Figma. I created a specific functions to accept the exact pixels and change according to the screen. If someone needs the code, I can provide it to them. If I get some time, I will make it into a package. The responsiveness works for text, height, width and image sizes.

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

Yup, you're right. 👍 I think you should publish your code as a package and let us know! ✨

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

Awesome. Please share to the community while you can. I wish you the best in your endeavours...

@mohammadmujahid8850 Год назад

Please provide the code.

@giuliopimenoff Год назад

These tutorials are amazing!

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

Thank you so much Wicked. It was awesome time

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

I can't breathe, you're awesome tutor. Thank you

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

Thank you so much!

@HarshKumar-qw5ou 3 года назад

excited for next episodes.

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

Nice tutorial. Learned so many new things. waiting for new tutorials

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

Glad to hear that! Thanks!

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

Thanks Man, I Learned A Lot

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

Thanks a lot! ✨

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

Great video, looking forward to the next in the series.

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

Hey Wicked, I was working on one of my projects and I wanted to implement circle animation like the one you have in this tutorial but dynamically controlled with voice/audio/sound waves. I any of here can help me out I will be really grateful to all. Thank you Wicked for this awesome tutorial! I just contributed to this git repo too✌

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

Haha, well, I think you got a bit of an advanced topic to cover right here. What I would do is to perhaps use bloc to listen to a voice recorder plugin perhaps emitting various streams of data, and based of those emit the necessary states that will rebuild your animation widget accordingly.

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

Funky groovy baby yeah !

@md.ruhulamin7963 3 года назад

Thank you so much sir. Now the waiting is over.

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

I really love your videos, they are the best development tutorials I've ever seen, I love the editing. It's amazing how you give extremely detailed descriptions of how and why things work, but at the same time, you fly through it. I'm blown away, you have a really talent for this stuff! Not sure if you take requests, but I'm trying to build my own TypeAhead Search widget, with nice animations and stuff using flutter_bloc, but I'm having trouble with the Overlay widget. If you want an idea for your next video, maybe you could do that :-)

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

Also, I'm not sure if you have to reach a certain level of subscribers before RU-vid enables the feature, but if you did a subscription thing, I'd give you $5 a month or whatever to help you keep making these awesome videos. (I hate paypal and refuse to use it)

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

Thank you so much for your kind words and appreciation! I'm actually planning on launching RU-vid memberships along with a discord server next week so you may want to take a look into that. Thank you again!

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

I wish you make these video 1 year ago. When I struggling with building app on my work :)

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

Haha, 1 year ago I couldn't make it since I wasn't really sure about some topics

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

Best channel for flutter

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

Thank you so much! ✨

@GabrielCosta-xr5vr 3 года назад

Wooow, so cool! Thank you for the video! The only thing that I'm a bit concerned is with the Sizer package. I liked the possibility to check for mobile or tablet size but I think that using percentage of screen in every width/height isn't good for the experience on the same type of device. For example: You have 5 smartphones from different sizes. The screen is a a list view with 10 rectangles each ocuppying 9% of height and some padding between them. * In the smaller smartphone it'll appear all the rectangles * In the larger smartphone it'll appear all the rectangles (larger than the previous one) That's not how responsiveness generally works, in the larger smartphone you would have more rectangles showing than in the smaller one. I know it was used to speed up the responsiveness because the project is simple. I'm just commenting to someone that would use these percentages in every part of the project. I did this one time and the feel of the interface was bad for some users because of this scaling. After this I'm using constant values for the sizes changing based on the device type or some constraints limits. Just a few widgets that are binded to percentages of the screen.

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

Man, for completely changing the style of the app whenever the device switches from mobile to tablet you need separate widgets rendering different stuff. Of course you need some constrains you should follow on a more advanced app, will cover them later on.

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

It's just like in bootstrap library, you set up the exact number of rectangles that should fit on a small(sm) , medium(MD) and large(LG) device. Will cover those later on, but for smaller projects like this one, sizer is more than enough.

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

@@Flutterly I have found ScreenUtil package very helpful check it once if you haven't because I mostly work with flutter web apps and it helps there a lot in maintaining responsiveness and is quite simplified

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

Thanks a lot, will certainly take a look!

@GabrielCosta-xr5vr 3 года назад

@@Flutterly Yes, sure! I left the comment just to people know this difference. Glad that you will make about the other forms of responsiveness too!

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

Learned a lot with your videos! Can't wait for more

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

Awesome tutorial

@samiyaqureshiofficial1704 Год назад

is there anayone like you??? bcuz u were the best

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

I love your code organization and use of responsiveness-related libraries. You're definitely one of the better tutorial makers. I have only one criticism with this based on my current knowledge of Flutter and Bloc/Cubit: If you're targeting beginners/mid-level Flutter devs, you probably want to start with a Stateful widget for simple content like a counter. It can be done with much less code and much easier to understand conceptually. I can see how you can lose someone during that portion.

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

Hey Man, appreciate the serie, any chance of having the rest of it soon?

@FLUTTER_HUB 5 месяцев назад

waitng for your new videos

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

OMG, you're amazing! Really looking forward to the next videos!! Just a quick question: is it my iOS simulator or the theme flickers when toggling the dark mode?

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

Hello! Thank you so much for your kind words, unfortunately I can't test on an iPhone device yet since I don't own neither of an iPhone or Mac pc. I'll soon create a discord server for everyone to share their experiences.

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

@@Flutterly don't worry! I tried it on my real device and everything works fine, also testes it on the Android simulator and it worked fine so I guess it was just the silly iOS simulator. Thanks though!

@edgarsjaudzems9837 Год назад

Great video, thanks.

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

Hi Bro, Nice work. I am following your tutorial to develop my application with clear architecture. Can u develop the app based on real-time applications like Menu, Forms, Text, Dropdown, button, and API?. It will help a lot of people.

@satdevlpr Год назад

in copy pasting CounterSlider Codes at 25:42 , key, initialValue, onChanged properties giving an error can't have a value of 'null' because of its type,

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

If you tell the design team you can put an extension on the ThemData class they will bombard you with tons and tons of colors. let's keep it simple. 😊

@HenrikHuehn Год назад

Thank you for your great work! One question, Hot Reload doesn't work for me with this approach. It's a bit annoying having to restart the app every time I change something in the theme data. Is there anything I can do to prevent this?

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

another great tutorial, by the way, can you do tutorial about Stream, example working with Firebase.looking forward for that.thanks

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

GEM❣️

@mohammadmujahid8850 Год назад

Bro, why you stop creating this series, can't wait for it, please continue, this series seems amazing, but I saw the last video was 1 year before. When we are going to see this new addition in this series.

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

Thanks a lot, Wck

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

best golden counter/legendary app

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

Thank you, Ahmed! ✨ Really appreciate it!

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

Thanks for your efforts. Like so many developers have already mentioned that this the best tutorial I have seen for the bloc. I just wanted to confirm why we are not creating a separate folder for each feature inside Cubit or Bloc? eg: cubit/theme/theme_cubit.dart and cubit/theme/theme_state.dart

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

Thank you so much! We should actually create a separate folder for each feature. You should check my latest video on very good cli because that's the architecture I'll be using from now on.

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

@@Flutterly Thank you so much for your response. GOD bless you

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

Hello , i 'm really fascinated by your tutorials and i learned a lot from this tutorials series , is the series ever going to continue ? either way thank you for your awesome job

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

its awesome tutorial .. one thing just a suggestion can you slow down a little bit too fast to follow :-)

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

Your Best Tutor❤️

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

Thanks a ton!

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

this is much of work, thanks

@sarunsuresh574 5 месяцев назад

thank you very much

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

where did I get lost? Error: No named parameter with the name 'nullOk'. final media = MediaQuery.of(context, nullOk: true) ?? did the clean and rebuild.... not working yet

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

Same problem with my flutter 2.0.1 / dart 2.12.0

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

I think there might be something wrong with one of the packages I used, most probably sizer, since it may not support null safety.

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

Yep ! I changed my flutter version with FVM and bingo. Thanks

@Veiqeit Год назад

can you tell me which plugin do you use for icon in vs code?

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

I have a circle in the middle of my Flare animation in 30:00 why is that?? and it will be gone once I remove the color: Theme.of(context).accentColor

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

@Flutterly what could be the problem about this?

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

Can you please add the release build of the app in the GitHub repo? Thank you for the great video! Cheers!

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

It is added, check description

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

Great tutorial! Just one question: Is Sizer the same thing as MediaQuery's screen size? For example, if we make size parameter static and accessible throughout the app it's the same right?

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

very good!!! thank you!!!!

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

You should add documentations to each file, because i dont understand why the repository folder, http folder and debug folder is used for.

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

can you implement nested navigation ? i have been searching on it but less tutorial which makes me hard to understand

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

I'll see in the near future

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

awesome, thank you very much!

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

thank you so much..🙏🏻🙏🏻

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

You're welcome, bro! ✨

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

Super awesome

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

Thanks, man!

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

why did you use a lower version of sizer? 1.1.8 . the new version you can only wrap materialApp with Sizer

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

Because that was the latest version back then

@MdSiam-kw5ox 2 года назад

What is the name of that "File Icon Theme"??

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

Can you make one video for Flutter 2.0, non-nullable types and Flutter Web? I want to learn from you!

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

Unfortunately not now as I'm too busy with other projects 😔

@MiguelAngel-pz8qi 3 года назад

Very good video. I would like a tutorial that is with flutter_bloc. 1. Authentication with bloc 2. login bloc 3. theme bloc 4. flutter_localizations I'm going to donate to your beautiful channel

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

please can you help me to found about Global Key Value Key Unique Key Object Key in your channle ineed to understand this points

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

just Wow man, I can't breathe, thank u for the video can u tell us the Emulator that u use ! u can change type of phone with that easy

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

The tool I use to screen my android phone to pc is srccpy github.com/Genymobile/scrcpy The pub package I use to switch to multiple devices is, as I mentioned, device preview.

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

woah! thanks!

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

You're welcome, mate!

@wilfried1607 Год назад

Please end with series

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

Can you please do a flutter bloc 6.1+ in-depth zero to hero video?

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

You said, more amazing projects will come out soon... 😒

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

Please make an authentication system with a REST API. I'm stuck on registerstateinitial, just finished your video on bloc access and I'm wondering what I did wrong. Would you care to take a look sir?

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

Check Code Village. He made parsing Rest Api tutorial with Bloc. I guess authentication is not so different

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

@@ppopcornmovie I can share a gist with you to help me debug it? Thanks for the suggestion, will look at it now

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

@@josephjoey3904 leave github repository. recently learned Rest Api Swagger authentication

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

@@ppopcornmovie with Bloc? Kindly share please. Is swagger an alternative to express?

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

@@ppopcornmovie checked out Code Village, his pub dependencies are old. Not sure that'll work and he's using firebase

@rickycoates3003 Год назад

Please more :'(' :'( :'(

@md.rahamatullah4808 3 года назад

tHanks

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

You're welcome, bro!

@md.rahamatullah4808 3 года назад

Sir, Create project base app, drop down , manu, list, with bloc. thank you

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

Thank you very much WCKD, for the effort you have put in to bring us this quality content, I have only seen the first 15 minutes and I cannot wait to start implementing changes in my proyects.

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

You're welcome, brother, thanks, let me know when you finish it haha