Using Themes in Flutter to Share Colors and Font Styles
In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.
Instructor: [00:01] To demonstrate theming, we'll start with a basic material app widget with the theme set to themeData and the home widget set to mainApp. mainApp will contain three widgets, an app bar, a body, and a floating action button. None of these widgets will have any explicit styling. Everything will be inherited from the theme.
[00:29] The first theme property we'll change is the primary color. When we update the primary color to gray, we notice that the app bar turns gray, and the title turns black. Any widget in our application that uses this primary color will now inherit the gray color from the main theme. The next property we'll look at is accent color.
[00:51] When we update the accent color to black, we notice that the floating action button is now black. As with the primary color, any widget in our application using the accent color will now inherit the new accent color of black.
[01:04] We can change the text theme for text within our application by updating the primary text theme property. To demonstrate this, we'll update the title property to be a color of white.
[01:30] To update the main background color, we can update the canvas color property. When we hover over a color in our text editor, we'll notice that we get a list of all of the color swatches available for that color. We can also update the brightness property.
[01:55] The brightness property updates the brightness of the overall theme of the application. This property is used by widgets like buttons to determine what color to pick when not using the primary or accent color. We can also directly access properties of our theme using the context variable.
[02:17] To demonstrate this, we'll update the color of our text widget by accessing the theme.of context primary color. We can also use the primary swatch property to theme our application. The primary swatch property will lay out different colors within our application for properties like primary color, shadow, border, and accent color.