Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Using Themes in Flutter to Share Colors and Font Styles

    nader dabitnader dabit
    flutterFlutter
    dartDart
    androidAndroid
    iosiOS

    In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.