AppThemeData class

Set the theme of the application.

ColorScheme and TextTheme of MaterialDesign3 can be specified.

You can use context.theme to get this value, or you can pass ThemeData converted by toThemeData to MaterialApp and other widgets in Flutter.

ColorScheme can be obtained by color. TextTheme can be obtained by text. widget allows you to retrieve the theme used for the widget. In asset, you can get the assets of the application specified in pubspec.yaml. You can get the font of the app specified in pubspec.yaml at font.

You can also set up your own theme by extending ColorThemeData, TextThemeData, WidgetThemeData, AssetThemeData, and FontThemeData with extensions, respectively.

アプリのテーマを設定します。

MaterialDesign3のColorSchemeとTextThemeを指定することが可能です。

context.themeでこの値を取得できる様になっている他、MaterialApp等にtoThemeDataで変換したThemeDataを渡すことでFlutter内の各種ウィジェットに伝えることができます。

colorでColorSchemeを取得することができます。textでTextThemeを取得することができます。widgetでウィジェットで使うテーマを取得することができます。assetでpubspec.yamlで指定したアプリのアセットを取得することができます。fontでpubspec.yamlで指定したアプリのフォントを取得することができます。

またそれぞれColorThemeData、TextThemeData、WidgetThemeData、AssetThemeData、FontThemeDataをエクステンションで拡張することにより独自のテーマを設定することも可能です。

See also:

• https://m3.material.io/styles/color/the-color-system/color-roles
• https://m3.material.io/styles/typography/type-scale-tokens

Available Extensions

• FutureIndicatorExtensions

Annotations

• @immutable

Constructors

AppThemeData({Color primary = Colors.blue, Color secondary = Colors.cyan, Color tertiary = Colors.lightBlue, Color primaryContainer = Colors.blueAccent, Color secondaryContainer = Colors.cyanAccent, Color tertiaryContainer = Colors.lightBlueAccent, Color disabled = Colors.grey, Color weak = Colors.grey, Color outline = Colors.grey, Color? outlineVariant, Color error = Colors.red, Color warning = Colors.amber, Color info = Colors.blue, Color success = Colors.green, Color? surface, Color? surfaceVariant, Color? background, Color onPrimary = kWhiteColor, Color onSecondary = kWhiteColor, Color onTertiary = kWhiteColor, Color onPrimaryContainer = kWhiteColor, Color onSecondaryContainer = kWhiteColor, Color onTertiaryContainer = kWhiteColor, Color onDisabled = kWhiteColor, Color? onSurface, Color? onSurfaceVariant, Color? onBackground, Color onWeak = kWhiteColor, Color onError = kWhiteColor, Color onInfo = kWhiteColor, Color onSuccess = kWhiteColor, Color onWarning = kWhiteColor, Color splashColor = kSplashColor, Color shadow = Colors.black, Color? appBarColor, Color? onAppBarColor, Color? onExpandedAppBarColor, Color? scaffoldBackgroundColor, Color? dialogColor, Color? onDialogColor, Color? inversePrimary, Color? inverseSecondary, Color? inverseTertiary, Color? inversePrimaryContainer, Color? inverseSecondaryContainer, Color? inverseTertiaryContainer, Color? inverseDisabled, Color? inverseWeak, Color? inverseOutline, Color? inverseError, Color? inverseWarning, Color? inverseInfo, Color? inverseSuccess, Color? inverseSurface, Color? inverseBackground, Color? onInversePrimary, Color? onInverseSecondary, Color? onInverseTertiary, Color? onInversePrimaryContainer, Color? onInverseSecondaryContainer, Color? onInverseTertiaryContainer, Color? onInverseDisabled, Color? onInverseSurface, Color? onInverseBackground, Color? onInverseWeak, Color? onInverseError, Color? onInverseInfo, Color? onInverseSuccess, Color? onInverseWarning, Color? inverseSplashColor, Color? inverseShadow, Color? inverseAppBarColor, Color? onInverseAppBarColor, Color? onInverseExpandedAppBarColor, Color? inverseScaffoldBackgroundColor, Color? inverseDialogColor, Color? onInverseDialogColor, ThemeMode themeMode = ThemeMode.system, TextStyle displayLarge = const TextStyle(fontSize: 57, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displayMedium = const TextStyle(fontSize: 45, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displaySmall = const TextStyle(fontSize: 36, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle headlineLarge = const TextStyle(fontSize: 32, fontWeight: FontWeight.w400, height: 1.25, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineMedium = const TextStyle(fontSize: 28, fontWeight: FontWeight.w400, height: 1.29, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineSmall = const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, height: 1.33, leadingDistribution: TextLeadingDistribution.proportional), TextStyle titleLarge = const TextStyle(fontSize: 22, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleMedium = const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleSmall = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyLarge = const TextStyle(fontSize: 16, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyMedium = const TextStyle(fontSize: 14, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodySmall = const TextStyle(fontSize: 12, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle labelLarge = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelMedium = const TextStyle(fontSize: 12, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelSmall = const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), double fontSizeFactor = 1.0, double fontSizeDelta = 0.0, String? defaultFontFamily, bool useMaterial3 = true, TargetPlatform platform = TargetPlatform.iOS, bool? centerTitleOnAppBar, Brightness brightness = Brightness.light, Brightness? statusBarBrightnessOnIOS, Brightness? statusBarBrightnessOnAndroid, bool fixed = false})

The light theme defines the initial color.

AppThemeData.dark({Color primary = Colors.blue, Color secondary = Colors.cyan, Color tertiary = Colors.lightBlue, Color primaryContainer = Colors.blueAccent, Color secondaryContainer = Colors.cyanAccent, Color tertiaryContainer = Colors.lightBlueAccent, Color disabled = Colors.grey, Color weak = Colors.grey, Color outline = Colors.grey, Color? outlineVariant, Color error = Colors.red, Color warning = Colors.amber, Color info = Colors.blue, Color success = Colors.green, Color? surface, Color? surfaceVariant, Color? background, Color onPrimary = kWhiteColor, Color onSecondary = kWhiteColor, Color onTertiary = kWhiteColor, Color onPrimaryContainer = kWhiteColor, Color onSecondaryContainer = kWhiteColor, Color onTertiaryContainer = kWhiteColor, Color onDisabled = kWhiteColor, Color? onSurface, Color? onSurfaceVariant, Color? onBackground, Color onWeak = kWhiteColor, Color onError = kWhiteColor, Color onInfo = kWhiteColor, Color onSuccess = kWhiteColor, Color onWarning = kWhiteColor, Color splashColor = kSplashColor, Color shadow = Colors.black, Color? appBarColor, Color? onAppBarColor, Color? onExpandedAppBarColor, Color? scaffoldBackgroundColor, Color? dialogColor, Color? onDialogColor, Color? inversePrimary, Color? inverseSecondary, Color? inverseTertiary, Color? inversePrimaryContainer, Color? inverseSecondaryContainer, Color? inverseTertiaryContainer, Color? inverseDisabled, Color? inverseWeak, Color? inverseOutline, Color? inverseError, Color? inverseWarning, Color? inverseInfo, Color? inverseSuccess, Color? inverseSurface, Color? inverseBackground, Color? onInversePrimary, Color? onInverseSecondary, Color? onInverseTertiary, Color? onInversePrimaryContainer, Color? onInverseSecondaryContainer, Color? onInverseTertiaryContainer, Color? onInverseDisabled, Color? onInverseSurface, Color? onInverseBackground, Color? onInverseWeak, Color? onInverseError, Color? onInverseInfo, Color? onInverseSuccess, Color? onInverseWarning, Color? inverseSplashColor, Color? inverseShadow, Color? inverseAppBarColor, Color? onInverseAppBarColor, Color? onInverseExpandedAppBarColor, Color? inverseScaffoldBackgroundColor, Color? inverseDialogColor, Color? onInverseDialogColor, ThemeMode themeMode = ThemeMode.system, TextStyle displayLarge = const TextStyle(fontSize: 57, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displayMedium = const TextStyle(fontSize: 45, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displaySmall = const TextStyle(fontSize: 36, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle headlineLarge = const TextStyle(fontSize: 32, fontWeight: FontWeight.w400, height: 1.25, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineMedium = const TextStyle(fontSize: 28, fontWeight: FontWeight.w400, height: 1.29, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineSmall = const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, height: 1.33, leadingDistribution: TextLeadingDistribution.proportional), TextStyle titleLarge = const TextStyle(fontSize: 22, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleMedium = const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleSmall = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyLarge = const TextStyle(fontSize: 16, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyMedium = const TextStyle(fontSize: 14, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodySmall = const TextStyle(fontSize: 12, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle labelLarge = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelMedium = const TextStyle(fontSize: 12, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelSmall = const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), double fontSizeFactor = 1.0, double fontSizeDelta = 0.0, String? defaultFontFamily, bool useMaterial3 = true, TargetPlatform platform = TargetPlatform.iOS, bool? centerTitleOnAppBar, Brightness? statusBarBrightnessOnIOS, Brightness? statusBarBrightnessOnAndroid, bool fixed = false})

The dark theme defines the initial color.

AppThemeData.light({Color primary = Colors.blue, Color secondary = Colors.cyan, Color tertiary = Colors.lightBlue, Color primaryContainer = Colors.blueAccent, Color secondaryContainer = Colors.cyanAccent, Color tertiaryContainer = Colors.lightBlueAccent, Color disabled = Colors.grey, Color weak = Colors.grey, Color outline = Colors.grey, Color? outlineVariant, Color error = Colors.red, Color warning = Colors.amber, Color info = Colors.blue, Color success = Colors.green, Color? surface, Color? surfaceVariant, Color? background, Color onPrimary = kWhiteColor, Color onSecondary = kWhiteColor, Color onTertiary = kWhiteColor, Color onPrimaryContainer = kWhiteColor, Color onSecondaryContainer = kWhiteColor, Color onTertiaryContainer = kWhiteColor, Color onDisabled = kWhiteColor, Color? onSurface, Color? onSurfaceVariant, Color? onBackground, Color onWeak = kWhiteColor, Color onError = kWhiteColor, Color onInfo = kWhiteColor, Color onSuccess = kWhiteColor, Color onWarning = kWhiteColor, Color splashColor = kSplashColor, Color shadow = Colors.black, Color? appBarColor, Color? onAppBarColor, Color? onExpandedAppBarColor, Color? scaffoldBackgroundColor, Color? dialogColor, Color? onDialogColor, Color? inversePrimary, Color? inverseSecondary, Color? inverseTertiary, Color? inversePrimaryContainer, Color? inverseSecondaryContainer, Color? inverseTertiaryContainer, Color? inverseDisabled, Color? inverseWeak, Color? inverseOutline, Color? inverseError, Color? inverseWarning, Color? inverseInfo, Color? inverseSuccess, Color? inverseSurface, Color? inverseBackground, Color? onInversePrimary, Color? onInverseSecondary, Color? onInverseTertiary, Color? onInversePrimaryContainer, Color? onInverseSecondaryContainer, Color? onInverseTertiaryContainer, Color? onInverseDisabled, Color? onInverseSurface, Color? onInverseBackground, Color? onInverseWeak, Color? onInverseError, Color? onInverseInfo, Color? onInverseSuccess, Color? onInverseWarning, Color? inverseSplashColor, Color? inverseShadow, Color? inverseAppBarColor, Color? onInverseAppBarColor, Color? onInverseExpandedAppBarColor, Color? inverseScaffoldBackgroundColor, Color? inverseDialogColor, Color? onInverseDialogColor, ThemeMode themeMode = ThemeMode.system, TextStyle displayLarge = const TextStyle(fontSize: 57, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displayMedium = const TextStyle(fontSize: 45, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle displaySmall = const TextStyle(fontSize: 36, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle headlineLarge = const TextStyle(fontSize: 32, fontWeight: FontWeight.w400, height: 1.25, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineMedium = const TextStyle(fontSize: 28, fontWeight: FontWeight.w400, height: 1.29, leadingDistribution: TextLeadingDistribution.proportional), TextStyle headlineSmall = const TextStyle(fontSize: 24, fontWeight: FontWeight.w400, height: 1.33, leadingDistribution: TextLeadingDistribution.proportional), TextStyle titleLarge = const TextStyle(fontSize: 22, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleMedium = const TextStyle(fontSize: 16, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle titleSmall = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyLarge = const TextStyle(fontSize: 16, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodyMedium = const TextStyle(fontSize: 14, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle bodySmall = const TextStyle(fontSize: 12, fontWeight: FontWeight.w400, leadingDistribution: TextLeadingDistribution.even), TextStyle labelLarge = const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelMedium = const TextStyle(fontSize: 12, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), TextStyle labelSmall = const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, leadingDistribution: TextLeadingDistribution.even), double fontSizeFactor = 1.0, double fontSizeDelta = 0.0, String? defaultFontFamily, bool useMaterial3 = true, TargetPlatform platform = TargetPlatform.iOS, bool? centerTitleOnAppBar, Brightness? statusBarBrightnessOnIOS, Brightness? statusBarBrightnessOnAndroid, bool fixed = false})

The light theme defines the initial color.

Properties

asset → AssetThemeData

Obtains a list of asset paths.

no setter

brightness → Brightness

Get the Brightness currently used by the application.

no setter

centerTitleOnAppBar → bool?

Specify whether to center the title of AppBar.

final

color → ColorThemeData

Retrieve the color scheme.

no setter

fixed → bool

Specifies whether to always use the same theme instead of switching between light and dark modes.

final

font → FontThemeData

Retrieve font themes.

no setter

hashCode → int

The hash code for this object.

no setter, inherited

platform → TargetPlatform

Specify the target platform for the design.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

statusBarBrightnessOnAndroid → Brightness?

Explicitly specifies the color of the status bar icon.

final

statusBarBrightnessOnIOS → Brightness?

Explicitly specifies the color of the status bar icon.

final

text → TextThemeData

Retrieve the text theme.

final

themeMode → ThemeMode

Specifies the theme mode.

final

useMaterial3 → bool

If this is set to true, the app will be designed with Material3 design.

final

widget → WidgetThemeData

Get the theme of the widget.

no setter

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

toThemeData({Brightness? brightness, String? defaultFontFamily}) → ThemeData

Convert to ThemeData in Flutter.

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Static Methods

of(BuildContext context) → AppThemeData

Get AppThemeData placed on the widget tree.