Name: Using Themes in Flutter to Share Colors and Font Styles
Uploaded: 2018-12-11T16:53:49-06:00
Description: In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with Flutter

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.

Using Themes in Flutter to Share Colors and Font Styles

Share this video with your friends

Course

Getting Started with Flutter