Professional Setup of a Theme in Flutter | Light and Dark theme Flutter
Vložit
- čas přidán 27. 07. 2024
- Learn how to create stunning, professional themes for your Flutter apps in both light and dark modes with this step-by-step tutorial.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Join Patreon to Access Premium Content: / membership
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
CHAPTERS
00:00 Introduction
00:23 Video Overview
01:30 Playlist Overview
01:45 Video Breakdown
2:48 Overview of Theme Properties in MaterialApp
6:12 Create our resuable custom ThemeData
10:12 Our own TextTheme utlity
15:21 Elevated Button Theme
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | czcams.com/users/Codingwithtea...
DETAILS
We'll guide you through setting up default Flutter themes, utilization of Theme Data in Flutter, and creating custom themes for a cohesive and visually appealing user interface. Elevate your app design skills and make your Flutter projects shine with these expert tips and techniques. Watch now and transform your app's look and feel!
Don't forget to subscribe and hit the bell icon so you never miss an update!
#tstore #codingwitht - Věda a technologie
such a good tutorial i've ever see. thank you very much sir. I'm from indonesia. love you sir
So nice of you. Thanks to you for your love and support 🎉🙏
I really like the way that you don't show us specific configurations for the app your developing , but a guidelines for better reusable code for any type of application, which is something missing in 99% of online tutorials but is perfectly constructed in your course. well done man . i really enjoyed this.
Glad to hear that 😍
I am loving this series. Lots of knowledge mr. T !
Thank you 🙏
Yes I really need this, Thank You
I hope it'll be beneficial for all 😊
i didnt still know that theme is that much powerful in flutter best explanation by you.... perfect reusability is shown
It’s very much powerful dear 🫨
Thank you so much for all your help...
You welcome 😁
thanks master! i'm learning from you
You welcome 🤗
You are a great teacher I wish for you all the best ❤
Thank you for your support 😊
Thanks man, this is the best tutorial
You welcome 🙏 and I am Glad it helped.
Good tute - cheers 👍
Thank you! Cheers! 🥂
You are so amazing guy dude!
Thank you.
Amazing tutorial!
Glad you think so!
Really respected ❤
verry amazing tutorial, sukron🙏
Thank you so much! I'm glad you enjoyed the tutorial. Sukron! 🙏😊
Amazing tutorial
Thank you for your support. I am glad that my videos are helpful for you.
Thanks❣❣❣
You welcome 🤗
What version of Android Studio are you using here? I really love how the Run/Debug toolbar is grouped and highlighted
It is the latest version of android studio.
Sir I had a query , why do you prefer GetX in your most of the projects, just want to know your perspective
There are many reasons but the main one is that. It's simple and easy to understand+ it's fast.
hi, i have a question. in chip_theme.dart, for darkChipTheme, why does it have 'const' but not for lightChipTheme in the initialization ? thank you !
There must be some value that we might not noticed is changed
keep building the world, keep building the flutter, keep building the widget 💇 😆]
Thank you! We're glad to have you on this journey of building with Flutter. Let's keep creating amazing things together! 💪🚀😊
how to make the code in a single line like the way it is in the TTextTheme (headLineLarge and headLineMedium ) whenever I save it it occupies multiple lines.
There is a line in the editor which breaks the code and makes it smaller.
what language of programmation you used : (java or Kotlin), (swift or objective c)
You don't have to change the settings while making a project. use default settings for them
thank you @@CodingwithT
I have a que if i define all type of style in themedata like elevated button and others then while creating elevated button do i need to redefine style there or not? it will be taken from the themedata?
As explained,
You have to create your theme and add that in the aap.dart file.
Then you just have to call ElevatedButton and that’s all
@@CodingwithT ok i made my first app but each time i had given custom styles to each widget but now i got this video so i will apply theme in next app for sure
Are you using compact mode for your Android Studio theme?
It's the latest one.
❤❤❤
Thank you😊
@@CodingwithTNo thank u 🙏 from what i see the code is organized and easy to understand and i can apply it on any project. U r a flutter hero 🫡🫡🫡
Sir can you tell me how you have created the packages directly because I'm using a mac
You can use folders or packages by just right clicking.
They are same.
I have an issue:
The font and Text (Text theme) is working perfectly fine in Debug mode, but it is not working in release mode.
the font and text gets lost, not showing up in release mode. i followed your tutorial and still the issue persists.
In release mode: after i run the app for first time the text shows up, but opening the app after terminating it and font gets lost.
please help
Please verify that your fonts are being bundled correctly when you build your app in release mode. You can check this by inspecting the contents of your built APK file.
@@CodingwithT Thanks for the reply, but the issue seems to be causing by using flutter_screenutil package. it is now solved after following the documentation for using it in hybrid development.
I only have fundamental knowledge in dart and flutter, can i follow this tutorial to learn ? is this suitable for beginner?
If you can create an app even a very small one then yes it’s for you.
very useful content, man
really apreciate it
never stop of doing this kinda lessons
Thank you 🙏. I'm on it
This course should be available on Udemy or Coursera, and I am willing to pay for it.
You can join me on Patreon and watch multiple courses along the way and much more.
www.patreon.com/CodingwithT848/membership
Sir in starter kit there is helper folder pricin_calculator.dart. In this file cart_model.dart file missing
😲 Comment that out for now. We will add that file in later tutorials
Code is also updated.
@@CodingwithT ok sir 😁💜
if you can it will be good if you make the font of editor more bigger
I will surely do it in the next Playlist. Thank you for your advice ❤️
where is the src code, it's not in your website, do i have to pay for it
I have shared the link in the description of every video to download the project.
It's great but I can't download App Project Starter KIT in your website is it possible to send it with mail service?
You can also download starter kit from cwtstore.gumroad.com/l/Flutter-Project-Starter-Kit
@@CodingwithT Thanks man 🙏🌹
The source code link is not working?
It’s working
future getx convert to bloc possible???
Just change the backend classes
2:48 Overview of Theme Properties in MaterialApp
6:12 Create our resuable custom ThemeData
10:12 Our own TextTheme utlity
Thank you
@@CodingwithT you are welcome sir 😅
@@CodingwithTwhere to get code for the themes'?
i have a doubt from where i can get the font files
Hi, you can get the Project Starter kit containing Assets, folder structure and more for free from codingwitht.com/product/flutter-ecommerce-app-with-firebase/
in my virtual device i cant see dark mode ..
You can update your emulator and add a latest device or you can run the code on physical device. If none of these steps resolve the issue, you may need to further investigate the settings and configurations of your virtual device
@@CodingwithT
i update the emulator and it works thnx ❤❤
cant download source code...web down
Its working. Please try again or clear the cache
where you from sir?
I'm from Planet Flutter 🍃😁.
Actually I'm from Islamabad, Pakistan.
Also travels a lot.
Please use bloc in this e-commerce project
Noted bro. I have already started this with GetX and will also create one using Bloc
@@CodingwithT ok, thanks
kindly provide assets
To download the starter kit containing assets, you can select app project starter kit in the variations from
codingwitht.com/product/flutter-ecommerce-app-with-firebase
or you can download from
cwtstore.gumroad.com/l/Flutter-Project-Starter-Kit
bro can u tell me file type
Which file type you want me to tell. can you explain?
if you do not want to give source code even, please you should give images,fonts etc.
You can get the Project starter kit for free from codingwitht.com/product/flutter-ecommerce-app-with-firebase/ , containing folder structure, localization support, error handling, utilities, assets, constants, sizes, and customizable themes. It's designed to kickstart your project with essential elements.
I got this error ,
Expected "fonts" to be a list, but got {family: poppins, fonts: [{asset: assets/fonts/Poppins-Light.ttf, weight: 300}, {asset: assets/fonts/Poppins-Regular.ttf, weight: 400}, {asset: assets/fonts/Poppins-Italic.ttf, style: italic}, {asset: assets/fonts/Poppins-Medium.ttf, weight: 500}, {asset: assets/fonts/Poppins-MediumItalic.ttf, weight: 500, style: italic}, {asset: assets/fonts/Poppins-SemiBold.ttf, weight: 800}, {asset: assets/fonts/Poppins-SemiBoldItalic.ttf, style: italic, weight: 800}, {asset: assets/fonts/Poppins-Thin.ttf, weight: 500}, {asset: assets/fonts/Poppins-ThinItalic.ttf, weight: 500}, {asset: assets/fonts/Poppins-Black.ttf, weight: 500}, {asset: assets/fonts/Poppins-BlackItalic.ttf, weight: 500, style: italic}]} (YamlMap).
Please correct the pubspec.yaml file at D:\ECommerce_Store\pubspec.yaml
what should i do now ? how to create a font list? Ive added all this fonts inside the asset folder and also added the fontsfamily in the theme.dart file.
There should be an error in the code. But you can download the project starter kit for free having assets folder structure and much more for free from codingwitht.com/product/flutter-ecommerce-app-with-firebase/