Themes in Flutter: Part 1

Vivek Yadav
May 23, 2020 · 3 min read

This is how the theme looks in flutter!

ThemeData class

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

Brightness is an enum with two options dark and light. It helps us to distinguish which theme (light or dark) to be used.

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.

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

This is the background color of major parts of the app like toolbars, tab bars, appbar, and many more.

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.

This is a lighter version of primaryColor.

This is a darker version of primaryColor.

This is default color of MaterialType.canvas (Rectangle using default theme canvas color)

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.

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).

It is the background color of the Scaffold widget.

It is the default color for BottomAppBar color. This can be overridden by specifying color in BottomAppBar e.g. BottomAppBar(color:#color);

This is the color of Material when used as a Card i.e. default color for Card widget.

This is color of Dividers and PopMenuDividers also used between ListTiles, between rows in DataTables and so forth.

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!

theme.dart

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

**Subscribe for upcoming posts. Thanks for reading. Let me know what you think about this post.

Flutter Community

Articles and Stories from the Flutter Community