Thank you. This is really good tutorial demystifying the theming and this helps keeping the logic, layout and styling separate and yet customisable. It would be great if you can add a quick tutorial of what has changed or added in new flutter.
Glad you like it! I keep on updating this code to the latest modifications but also about to launch a new tutorial series which will help you in your case.
thank you for this super tutorial, i've learnt a lot i appreciate it. but i don't understand how come we remove the primarySwatch's colors in the video around 13:51 minute ? if we want to theme would be yellow we wouldn't erase that code right ?
Yes, you can use primary Swatch and if you want to customize almost every widget as your own custom design then in that case primary Swatch is not needed.
This is an awsome tutorial, but i have a lot of questions about dynamic sizing. Many of my texts and sizes use the size of the screen how can i create these sizes in the constants or other folder which are not in the same screen as the dart file?
In last bit, you said that "we don't want user to get theme using instance of the class ", but as we are using static then can user access it using instance ?
Hi Faizan, It's simply a class whose constructor is now private means its instance cannot be created. So we will call TAppTheme.lightTheme, instead of creating an instance like TAppTheme appTheme = new TAppTheme();
Dear Sir when you paste the yellow color code and use it than where is the yellow color codes gone in theme.dart file are you remove it from the file or copy somewhere else ? i write the all yellow colors codes with shades in theme.dart file
That because whenever we use ! sign that means the value which is using this sign cannot be null but in your case value is null and along with a null value we cannot use !
I'm using vscode with Mac Pro M2 Ventura OS. My hot reload is not working after using all these .dart theme files. I always have to restart the application, which takes longer to see the visual changes. Any tips?
When you do some change in the theme files, you have to restart. Otherwise when the theme is loaded, based on that you can hot reload anything from anyfile.
I am using VS code and for me the primary swatch is not working. Also can someone please tell me what extension can we use in vs code to get the Color changing panel in the side where we can change the intensity and stuff.
To fix the primarySwatch issue, ensure you're using MaterialColor with a proper color map. For a color-changing panel in VS Code, install the Color Highlight extension. It highlights colors and provides a picker to adjust intensity and shades.
Hello sir, following your tutorial, the TextTheme does not update when using headline2. It still uses the default Flutter headline2. Any idea how to fix?
@@CodingwithT okay i will check it out, thank you very much sir also is there a certain pixel resolution we should use for the animated splash screen? Thank you again, very good tutorials 🙏
Can you update this 'How to Setup a Custom Theme in Flutter for a Light and Dark Theme - 2023' to Material 3? It's not the same anymore because the Appbar does not follow the changes you made in ThemeData. Thank you in advance!
Man you are good but one thing everyone cannot have money to buy this source code like 16 dollars.....you have to give this code to everyone free of cost
Thank you Faizan. I always try my best to help as much as I can but you know YT is not paying enough to keep this going therefore I decided to add each tutorial code separately in each blog post and only if you need the whole project, you have to pay once.
i am expecting custom them as own styling of colors. How i can set colors of my own on every widget of my choice? I have this colors for example: import 'package:flutter/material.dart'; bool darkTheme = false; Color background = darkTheme? const Color(0xFF040C23): const Color(0xFFF8EBD4); Color textMain = darkTheme? const Color(0xFFFFFFFF): const Color(0xFF000000); Color text = darkTheme? const Color(0xFFA19CC5): const Color(0xFF575D5B); Color orange = const Color(0xFFF9B091); Color primary = darkTheme? const Color(0xFFA44AFF): const Color(0xFF000000); Color circles = darkTheme? const Color(0xFFA44AFF): const Color(0xFF704214); Color gray = darkTheme? const Color(0xFF121931): const Color(0x59BBC4CE); Color logo = darkTheme? const Color(0xFFFFFFFF): const Color(0xFF704214); Color gradient1 = darkTheme? const Color(0xFFDF98FA): const Color(0xFF704214); Color gradient2 = darkTheme? const Color(0xFFB070FD): const Color(0xFFA87242); Color gradient3 = darkTheme? const Color(0xFF9055FF): const Color(0xFFE2A674);
Thank you😍. 1. Theme.of(context)textTheme.heading1⬅ When I call this line It shows me default Headline1 2. MyTextTheme.lightTextTheme.heading1⬅ This line of code shows me my Theme Headline1. But as you can see this line of code did not support dark theme or not responsive. So kindly tell me why (1) line of code didnot change according to my custom theme?
@@CodingwithT as you use headline1 to 6 and outlinedButtonTheme and elevatedButtonTheme you did not call style again and again but in my case it still does not show
![Flutter Onboarding Screen | Flutter Liquid Swipe | Flutter Smooth Page Indicator [2023]](http://i.ytimg.com/vi/BtSVdJ134dQ/mqdefault.jpg)
As an experienced mobile dev learning Flutter, these videos are essential to learning clean architecture and production-ready code
Glad you like them! 🤠🎉
This is so far the best flutter tutorials I've ever enjoyed watching. Thank you very much for these.
So nice of you 💝
Truly one of the finest in flutter!
Google may consider syndicating your channel.
Thank you so much 🥰
One of the finest flutter course!!
Thank you 😊
Thank you. This is really good tutorial demystifying the theming and this helps keeping the logic, layout and styling separate and yet customisable. It would be great if you can add a quick tutorial of what has changed or added in new flutter.
Glad you like it! I keep on updating this code to the latest modifications but also about to launch a new tutorial series which will help you in your case.
great job brother. keep up!😍
Thank you 😊🙏
شكراً على مجهودك الرائع و المعلومات الرائعة اتمنى لك المزيد
بالتوفيق 🧑💻🖥️🥇
You welcome dear 😃
thank you for this super tutorial, i've learnt a lot i appreciate it. but i don't understand how come we remove the primarySwatch's colors in the video around 13:51 minute ? if we want to theme would be yellow we wouldn't erase that code right ?
Yes, you can use primary Swatch and if you want to customize almost every widget as your own custom design then in that case primary Swatch is not needed.
& you welcome 😁
Great stuff
Thank you 😊
This is an awsome tutorial, but i have a lot of questions about dynamic sizing. Many of my texts and sizes use the size of the screen how can i create these sizes in the constants or other folder which are not in the same screen as the dart file?
Use the static functions and pass the context
In last bit, you said that "we don't want user to get theme using instance of the class ", but as we are using static then can user access it using instance ?
Hi Faizan, It's simply a class whose constructor is now private means its instance cannot be created.
So we will call TAppTheme.lightTheme, instead of creating an instance like TAppTheme appTheme = new TAppTheme();
@@CodingwithT can we also use abstract with class so its instance cant be made ? Same thing happening here?
Yes its a class so any class will do the same
Ram Ram bhai. Radhe Radhe
Hello 👋🤗
Brilliant.. Keep up the good work brother
Thank you 😊
very good 👍
this is great!
14:44 what shortcut did you use to align the code sir?
Ctrl + alt + L
@@CodingwithT thankyou very much sir.. Your videos are very helpful for a beginner like me. May Allah Bless you 🙏
hey facing the issue during building the app" 42: Error: Type 'Uint8List' not found. " after installing the google fonts
Dear Sir when you paste the yellow color code and use it than where is the yellow color codes gone in theme.dart file are you remove it from the file or copy somewhere else ? i write the all yellow colors codes with shades in theme.dart file
Big Thanks Brother.
Welcome 🤠
Error while using Material Color in primary swatch -
Null check operator used on null value
That because whenever we use ! sign that means the value which is using this sign cannot be null but in your case value is null and along with a null value we cannot use !
I'm using vscode with Mac Pro M2 Ventura OS. My hot reload is not working after using all these .dart theme files. I always have to restart the application, which takes longer to see the visual changes. Any tips?
When you do some change in the theme files, you have to restart. Otherwise when the theme is loaded, based on that you can hot reload anything from anyfile.
I am using VS code and for me the primary swatch is not working. Also can someone please tell me what extension can we use in vs code to get the Color changing panel in the side where we can change the intensity and stuff.
To fix the primarySwatch issue, ensure you're using MaterialColor with a proper color map.
For a color-changing panel in VS Code, install the Color Highlight extension. It highlights colors and provides a picker to adjust intensity and shades.
@ thank you, please make more flutter mobile app videos.
Can you please switch to dart mode? It will be much easier to see the content of your screen
Hello sir, following your tutorial, the TextTheme does not update when using headline2. It still uses the default Flutter headline2. Any idea how to fix?
Dear textTheme now modified and you can check the latest options at the link given below in the description.
@@CodingwithT okay i will check it out, thank you very much sir also is there a certain pixel resolution we should use for the animated splash screen? Thank you again, very good tutorials 🙏
Can you update this 'How to Setup a Custom Theme in Flutter for a Light and Dark Theme - 2023' to Material 3? It's not the same anymore because the Appbar does not follow the changes you made in ThemeData.
Thank you in advance!
You can watch my latest series of ecommerce app in which I have already done required changes.
brilliant
Thank you 😊
2.31 How did you put the image??
Which image?
for your next totorial you dident use the same main.dart what should i do
The style from my theme file doesn't apply to the text although the theme file is imported and there are no errors on run
First hot reload doesn't work you have to hot restart to make changes effective.
Also have to call them in Text?
I completely reloaded, there is just one difference, headline 2 is deprecated and now you must use headlineMedium(which is h2)
bro how do u get this kind of images please post the link
Its already added in the codingwitht.com/flutter-login-app
good sir
Thank you
Sir which emulator you use in this video
Hi Usama, it's my own physical mobile
@@CodingwithT How do you bring it on screen? I know of Scrcpy but it doesn't show device frame like yours is showing.
Man you are good but one thing everyone cannot have money to buy this source code like 16 dollars.....you have to give this code to everyone free of cost
Thank you Faizan. I always try my best to help as much as I can but you know YT is not paying enough to keep this going therefore I decided to add each tutorial code separately in each blog post and only if you need the whole project, you have to pay once.
The subtitle is not defined what can i do?
You can use the new methodology like Heading, Title, body, Label etc
Sir my emulator does not have dark mode system
If your Android studio is updated. You must have a dark mode in settings.
Check it out 🤠
Sir ap ak course Urdu ma bhe banaye flutter Ka please
Sure buddy! I'll do it
What emulator are you using
It's a physical device dear.
May ALLAH bless you
Thank you 😊
can anyone tell me where to get all source code ?
Link is in the description
best
Thank you
Project attachments
Anaya is watching
😂
i am expecting custom them as own styling of colors. How i can set colors of my own on every widget of my choice? I have this colors for example:
import 'package:flutter/material.dart';
bool darkTheme = false;
Color background = darkTheme? const Color(0xFF040C23): const Color(0xFFF8EBD4);
Color textMain = darkTheme? const Color(0xFFFFFFFF): const Color(0xFF000000);
Color text = darkTheme? const Color(0xFFA19CC5): const Color(0xFF575D5B);
Color orange = const Color(0xFFF9B091);
Color primary = darkTheme? const Color(0xFFA44AFF): const Color(0xFF000000);
Color circles = darkTheme? const Color(0xFFA44AFF): const Color(0xFF704214);
Color gray = darkTheme? const Color(0xFF121931): const Color(0x59BBC4CE);
Color logo = darkTheme? const Color(0xFFFFFFFF): const Color(0xFF704214);
Color gradient1 = darkTheme? const Color(0xFFDF98FA): const Color(0xFF704214);
Color gradient2 = darkTheme? const Color(0xFFB070FD): const Color(0xFFA87242);
Color gradient3 = darkTheme? const Color(0xFF9055FF): const Color(0xFFE2A674);
Thank you😍.
1. Theme.of(context)textTheme.heading1⬅ When I call this line It shows me default Headline1
2. MyTextTheme.lightTextTheme.heading1⬅ This line of code shows me my Theme Headline1. But as you can see this line of code did not support dark theme or not responsive.
So kindly tell me why (1) line of code didnot change according to my custom theme?
Reason could be that headline 1,2 etc are now obsolete and you should use Headline large, medium small etc
@@CodingwithT as you use headline1 to 6 and outlinedButtonTheme and elevatedButtonTheme you did not call style again and again but in my case it still does not show
@@CodingwithT As you say use HeadlineLarge I used it know but still it did not show my theme but Defualt headlineLarge style
@@CodingwithT After soo many trying I found an issue that I did not add theme lines in my Main.dart file 🥲. Thanks Sir
import 'package:login_flutter_app/src/utils/theme/theme.dart';
I am getting this error
can you guide me about this
Dear check if the import path is accurate