Hello everyone 🤩 The fourth part of our flutter roadmap topics. Theme 🎉, let’s learn together… 🤟🏻
One of the great features of the Flutter is that it gives yo absolute control of every pixel on the screen. This allows developers to implement the designer’s vision without compromise. In this tutorial, you’ ll apply styles to widgets, centralize your app’s theme and dynamically toggle between different themes.
😎 USING THEMES 🥳
First of all, i have to say that it would be very, very tiring to give style for each widget in each line of our code. The bigger problem is taht code readability will be very unprofessional and in a bad state. So our first and foremost topic will be to create a custom and dynamic helper theme class.
I open a light_theme.dart class under lib/globals/themes and add ThemeData.light() code with copyWith() method as shown below.
I seem to hear question why the copyWith() method was added. Let me clarify immediately that you know that with this method, we can make special changes in the existing code. We can change some features of the light theme. Just like the codes below.
As you can see in the codes, I made changes to scaffoldBackgroundColor and textTheme, selected them as #headline, #subtitle, #caption, and #button then i completed all my styles with the fonts chosen by me or our designer ( i used the google_fonts package here).
And finally, we have came to stage of calling the codes we have written to our widgets. as you can see below, all we have to do is call the global theme we wrote to the style parameter in the Text() widget.
😍 Thanks for reading this far with patience. Thats is all 🥳.
