Themes in Flutter: Part 1
This is how the theme looks in flutter!
Strange but true. We have a lot of options available in ThemeData(theme class for flutter). But mostly we use 3 – 4 of it. Some people use 8 -10 of it.
In this article, we are going to see each and every option available in ThemeData.
Let’s start with
1. Brightness brightness ( The desired theme):
Brightness is an enum with two options dark and light. It helps us to distinguish which theme (light or dark) to be used.
2. VisualDensity visualDensity:
It defines the visual density of user interface components. Density, in the context of a UI, is vertical and horizontal ‘compactness’ of the components in the UI. It is unitless since it means different for different UI components.
The default for visual density is zero for horizontal and vertical densities, which corresponds to the default visual density of components in the Material design specification.
It does not affect text sizes, icon sizes, or padding values. For example, for a button, it affects the spacing around the child of a button. For lists, it affects the distance between the baseline of entries in the list. For chips, it only affects the vertical size, not horizontal size.
3. MaterialColor primarySwatch:
Look at its type. It is MaterialColor. That’s why it will contain color shades from 50 to 900. PrimarySwatch is used to configure default values for several fields including primaryColor, primaryColorBrightness, primaryColorLight, primaryColorDark, toggableActiveColor, accentColor, colorScheme, secondaryHeaderColor, textSelectionColor,backgroundColor and buttonColor
4. Color primaryColor:
This is the background color of major parts of the app like toolbars, tab bars, appbar, and many more.
5. Brightness primaryColorBrightness:
This is the brightness of the primary color. It is used to determine the color of text and icons placed on the top of the primary color.
6. Color primaryColorLight:
This is a lighter version of primaryColor.
7. Color primaryColorDark:
This is a darker version of primaryColor.
8. Color canvasColor:
This is default color of MaterialType.canvas (Rectangle using default theme canvas color)
9. Color accentColor:
The accent color is also known as a secondary color. This is foreground color for widgets like knobs, text, overscroll edge effect, etc.
The theme’s colorScheme property contains ColorScheme.secondary as well as the color that contrasts well with a secondary color called ColorScheme.onSecondary.
10. Brightness accentColorBrightness:
It is the brightness of the accentColor. It is used to determine the color of text and icons placed on the top of the accent color(e.g. the icons on a floating action button).
11. Color scaffoldBackgroundColor:
It is the background color of the Scaffold widget.
12. Color bottomAppBarColor:
It is the default color for BottomAppBar color. This can be overridden by specifying color in BottomAppBar e.g. BottomAppBar(color:#color);
13. Color cardColor:
This is the color of Material when used as a Card i.e. default color for Card widget.
14. Color dividerColor:
This is color of Dividers and PopMenuDividers also used between ListTiles, between rows in DataTables and so forth.
15. Color focusColor:
This is a focus color used to indicate that a component has input focus.
We will see other objects of the theme in part 2 and part 3.
Till then try these themes and tell me if it was easy to make the app’s theme or not!
Full explanation will be there on youtube channel PRO Coach.
Keep subscribed on youtube and medium for updates.
If you enjoyed this blog, let me know in the comments below how much useful this blog was to you. I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you!
#HappyCoding #flutter #widgets #crossplatform #tutorial #theme #viveky259 #procoach
