Scribd
Upload
24 views5 pages

Themes - Flutter

This document explains how to use themes in Flutter to share colors and font styles across an app, utilizing Material 3 as the default theme since Flutter 3.16. It details how to create, apply, and override themes using ThemeData, including methods for setting a unique theme or extending an existing one. The document also provides code examples for implementing themes in widgets and encourages users to refer to the ThemeData documentation for more properties.

Uploaded by

hyang16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views5 pages

Themes - Flutter

This document explains how to use themes in Flutter to share colors and font styles across an app, utilizing Material 3 as the default theme since Flutter 3.16. It details how to create, apply, and override themes using ThemeData, including methods for setting a unique theme or extending an existing one. The document also provides code examples for implementing themes in widgets and encourages users to refer to the ThemeData documentation for more properties.

Uploaded by

hyang16
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

 On this pageUse themes to share colors and font styles

Use themes to share


colors and font styles
Cookbook  Design  Themes

 Note
This recipe uses Flutter's support for Material 3 and the google_fonts package. As of
the Flutter 3.16 release, Material 3 is Flutter's default theme.

To share colors and font styles throughout an app, use themes.

You can define app-wide themes. You can extend a theme to change a theme style for one
component. Each theme defines the colors, type style, and other parameters applicable
for the type of Material component.

Flutter applies styling in the following order:

1. Styles applied to the specific widget.


2. Themes that override the immediate parent theme.
3. Main theme for the entire app.

After you define a Theme , use it within your own widgets. Flutter's Material widgets use
your theme to set the background colors and font styles for app bars, buttons,
checkboxes, and more.

Create an app theme


To share a Theme across your entire app, set the theme property to your MaterialApp
constructor. This property takes a ThemeData instance.

As of the Flutter 3.16 release, Material 3 is Flutter's default theme.

If you don't specify a theme in the constructor, Flutter creates a default theme for you.

dart
MaterialApp(
title: appName,
theme: ThemeData(
// Define the default brightness and colors.
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.purple,
// ···
brightness: Brightness.dark,
),

// Define the default `TextTheme`. Use this to specify the default


// text styling for headlines, titles, bodies of text, and more.
textTheme: TextTheme(
displayLarge: const TextStyle(
fontSize: 72,
fontWeight: FontWeight.bold,
),
// ···
titleLarge: GoogleFonts.oswald(
fontSize: 30,
fontStyle: FontStyle.italic,
),
bodyMedium: GoogleFonts.merriweather(),
displaySmall: GoogleFonts.pacifico(),
),
),
home: const MyHomePage(title: appName),
);

Most instances of ThemeData set values for the following two properties. These
properties affect the entire app.

1. colorScheme defines the colors.


2. textTheme defines text styling.

To learn what colors, fonts, and other properties, you can define, check out the
ThemeData documentation.
Apply a theme
To apply your new theme, use the Theme.of(context) method when specifying a
widget's styling properties. These can include, but are not limited to, style and color .

The Theme.of(context) method looks up the widget tree and retrieves the nearest
Theme in the tree. If you have a standalone Theme , that's applied. If not, Flutter applies
the app's theme.

In the following example, the Container constructor uses this technique to set its color .

dart
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
color: Theme.of(context).colorScheme.primary,
child: Text(
'Text with a background color',
// ···
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),

Override a theme
To override the overall theme in part of an app, wrap that section of the app in a Theme
widget.

You can override a theme in two ways:

1. Create a unique ThemeData instance.


2. Extend the parent theme.

Set a unique ThemeData instance


If you want a component of your app to ignore the overall theme, create a ThemeData
instance. Pass that instance to the Theme widget.
dart
Theme(
// Create a unique theme with `ThemeData`.
data: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
child: FloatingActionButton(onPressed: () {}, child: const Icon(Icons.add)),
);

Extend the parent theme


Instead of overriding everything, consider extending the parent theme. To extend a theme,
use the copyWith() method.

dart
Theme(
// Find and extend the parent theme using `copyWith`.
// To learn more, check out the section on `Theme.of`.
data: Theme.of(
context,
).copyWith(colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink)),
child: const FloatingActionButton(onPressed: null, child: Icon(Icons.add)),
);

Watch a video on Theme


To learn more, watch this short Widget of the Week video on the Theme widget:
Theme | Flutter widget of the week

Try an interactive example


Was this page's content helpful?

 

Except as otherwise noted, this site is licensed under a Creative Commons Attribution 4.0 International
License, and code samples are licensed under the 3-Clause BSD License.

Terms Brand Privacy Security

You might also like