ThemeData constructor
- Iterable<
Adaptation< ? adaptations,Object> > - bool? applyElevationOverlayColor,
- NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
- Iterable<
ThemeExtension> ? extensions, - InputDecorationTheme? inputDecorationTheme,
- MaterialTapTargetSize? materialTapTargetSize,
- PageTransitionsTheme? pageTransitionsTheme,
- TargetPlatform? platform,
- ScrollbarThemeData? scrollbarTheme,
- InteractiveInkFeatureFactory? splashFactory,
- bool? useMaterial3,
- VisualDensity? visualDensity,
- ColorScheme? colorScheme,
- Brightness? brightness,
- Color? colorSchemeSeed,
- Color? canvasColor,
- Color? cardColor,
- Color? dialogBackgroundColor,
- Color? disabledColor,
- Color? dividerColor,
- Color? focusColor,
- Color? highlightColor,
- Color? hintColor,
- Color? hoverColor,
- Color? indicatorColor,
- Color? primaryColor,
- Color? primaryColorDark,
- Color? primaryColorLight,
- MaterialColor? primarySwatch,
- Color? scaffoldBackgroundColor,
- Color? secondaryHeaderColor,
- Color? shadowColor,
- Color? splashColor,
- Color? unselectedWidgetColor,
- String? fontFamily,
- List<
String> ? fontFamilyFallback, - String? package,
- IconThemeData? iconTheme,
- IconThemeData? primaryIconTheme,
- TextTheme? primaryTextTheme,
- TextTheme? textTheme,
- Typography? typography,
- ActionIconThemeData? actionIconTheme,
- AppBarTheme? appBarTheme,
- BadgeThemeData? badgeTheme,
- MaterialBannerThemeData? bannerTheme,
- BottomAppBarTheme? bottomAppBarTheme,
- BottomSheetThemeData? bottomSheetTheme,
- ButtonThemeData? buttonTheme,
- Object? cardTheme,
- CheckboxThemeData? checkboxTheme,
- ChipThemeData? chipTheme,
- DataTableThemeData? dataTableTheme,
- DatePickerThemeData? datePickerTheme,
- Object? dialogTheme,
- DividerThemeData? dividerTheme,
- DrawerThemeData? drawerTheme,
- DropdownMenuThemeData? dropdownMenuTheme,
- ElevatedButtonThemeData? elevatedButtonTheme,
- ExpansionTileThemeData? expansionTileTheme,
- FilledButtonThemeData? filledButtonTheme,
- FloatingActionButtonThemeData? floatingActionButtonTheme,
- IconButtonThemeData? iconButtonTheme,
- ListTileThemeData? listTileTheme,
- OutlinedButtonThemeData? outlinedButtonTheme,
- PopupMenuThemeData? popupMenuTheme,
- ProgressIndicatorThemeData? progressIndicatorTheme,
- RadioThemeData? radioTheme,
- SearchBarThemeData? searchBarTheme,
- SearchViewThemeData? searchViewTheme,
- SegmentedButtonThemeData? segmentedButtonTheme,
- SliderThemeData? sliderTheme,
- SnackBarThemeData? snackBarTheme,
- SwitchThemeData? switchTheme,
- Object? tabBarTheme,
- TextButtonThemeData? textButtonTheme,
- TextSelectionThemeData? textSelectionTheme,
- TimePickerThemeData? timePickerTheme,
- ToggleButtonsThemeData? toggleButtonsTheme,
- TooltipThemeData? tooltipTheme,
- @Deprecated('Use OverflowBar instead. ' 'This feature was deprecated after v3.21.0-10.0.pre.') ButtonBarThemeData? buttonBarTheme,
Create a ThemeData that's used to configure a Theme.
The colorScheme
and textTheme
are used by the Material components to
compute default values for visual properties. The API documentation for
each component widget explains exactly how the defaults are computed.
When providing a ColorScheme, apps can either provide one directly
with the colorScheme
parameter, or have one generated for them by
using the colorSchemeSeed
and brightness
parameters. A generated
color scheme will be based on the tones of colorSchemeSeed
and all of
its contrasting color will meet accessibility guidelines for readability.
(See ColorScheme.fromSeed for more details.)
If the app wants to customize a generated color scheme, it can use
ColorScheme.fromSeed directly and then ColorScheme.copyWith on the
result to override any colors that need to be replaced. The result of
this can be used as the colorScheme
directly.
For historical reasons, instead of using a colorSchemeSeed
or
colorScheme
, you can provide either a primaryColor
or primarySwatch
to construct the colorScheme
, but the results will not be as complete
as when using generation from a seed color.
If colorSchemeSeed
is non-null then colorScheme
, primaryColor
and
primarySwatch
must all be null.
The textTheme
TextStyle colors are black if the color scheme's
brightness is Brightness.light, and white for Brightness.dark.
To override the appearance of specific components, provide
a component theme parameter like sliderTheme
, toggleButtonsTheme
,
or bottomNavigationBarTheme
.
See also:
- ThemeData.from, which creates a ThemeData from a ColorScheme.
- ThemeData.light, which creates the default light theme.
- ThemeData.dark, which creates the default dark theme.
- ColorScheme.fromSeed, which is used to create a ColorScheme from a seed color.
Implementation
factory ThemeData({
// For the sanity of the reader, make sure these properties are in the same
// order in every place that they are separated by section comments (e.g.
// GENERAL CONFIGURATION). Each section except for deprecations should be
// alphabetical by symbol name.
// GENERAL CONFIGURATION
Iterable<Adaptation<Object>>? adaptations,
bool? applyElevationOverlayColor,
NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
Iterable<ThemeExtension<dynamic>>? extensions,
InputDecorationTheme? inputDecorationTheme,
MaterialTapTargetSize? materialTapTargetSize,
PageTransitionsTheme? pageTransitionsTheme,
TargetPlatform? platform,
ScrollbarThemeData? scrollbarTheme,
InteractiveInkFeatureFactory? splashFactory,
bool? useMaterial3,
VisualDensity? visualDensity,
// COLOR
ColorScheme? colorScheme,
Brightness? brightness,
Color? colorSchemeSeed,
// [colorScheme] is the preferred way to configure colors. The [Color] properties
// listed below (as well as primarySwatch) will gradually be phased out, see
// https://github.com/flutter/flutter/issues/91772.
Color? canvasColor,
Color? cardColor,
Color? dialogBackgroundColor,
Color? disabledColor,
Color? dividerColor,
Color? focusColor,
Color? highlightColor,
Color? hintColor,
Color? hoverColor,
Color? indicatorColor,
Color? primaryColor,
Color? primaryColorDark,
Color? primaryColorLight,
MaterialColor? primarySwatch,
Color? scaffoldBackgroundColor,
Color? secondaryHeaderColor,
Color? shadowColor,
Color? splashColor,
Color? unselectedWidgetColor,
// TYPOGRAPHY & ICONOGRAPHY
String? fontFamily,
List<String>? fontFamilyFallback,
String? package,
IconThemeData? iconTheme,
IconThemeData? primaryIconTheme,
TextTheme? primaryTextTheme,
TextTheme? textTheme,
Typography? typography,
// COMPONENT THEMES
ActionIconThemeData? actionIconTheme,
AppBarTheme? appBarTheme,
BadgeThemeData? badgeTheme,
MaterialBannerThemeData? bannerTheme,
BottomAppBarTheme? bottomAppBarTheme,
BottomNavigationBarThemeData? bottomNavigationBarTheme,
BottomSheetThemeData? bottomSheetTheme,
ButtonThemeData? buttonTheme,
// TODO(QuncCccccc): Change the parameter type to CardThemeData
Object? cardTheme,
CheckboxThemeData? checkboxTheme,
ChipThemeData? chipTheme,
DataTableThemeData? dataTableTheme,
DatePickerThemeData? datePickerTheme,
// TODO(QuncCccccc): Change the parameter type to DialogThemeData
Object? dialogTheme,
DividerThemeData? dividerTheme,
DrawerThemeData? drawerTheme,
DropdownMenuThemeData? dropdownMenuTheme,
ElevatedButtonThemeData? elevatedButtonTheme,
ExpansionTileThemeData? expansionTileTheme,
FilledButtonThemeData? filledButtonTheme,
FloatingActionButtonThemeData? floatingActionButtonTheme,
IconButtonThemeData? iconButtonTheme,
ListTileThemeData? listTileTheme,
MenuBarThemeData? menuBarTheme,
MenuButtonThemeData? menuButtonTheme,
MenuThemeData? menuTheme,
NavigationBarThemeData? navigationBarTheme,
NavigationDrawerThemeData? navigationDrawerTheme,
NavigationRailThemeData? navigationRailTheme,
OutlinedButtonThemeData? outlinedButtonTheme,
PopupMenuThemeData? popupMenuTheme,
ProgressIndicatorThemeData? progressIndicatorTheme,
RadioThemeData? radioTheme,
SearchBarThemeData? searchBarTheme,
SearchViewThemeData? searchViewTheme,
SegmentedButtonThemeData? segmentedButtonTheme,
SliderThemeData? sliderTheme,
SnackBarThemeData? snackBarTheme,
SwitchThemeData? switchTheme,
// TODO(QuncCccccc): Change the parameter type to TabBarThemeData
Object? tabBarTheme,
TextButtonThemeData? textButtonTheme,
TextSelectionThemeData? textSelectionTheme,
TimePickerThemeData? timePickerTheme,
ToggleButtonsThemeData? toggleButtonsTheme,
TooltipThemeData? tooltipTheme,
// DEPRECATED (newest deprecations at the bottom)
@Deprecated(
'Use OverflowBar instead. '
'This feature was deprecated after v3.21.0-10.0.pre.',
)
ButtonBarThemeData? buttonBarTheme,
}) {
// GENERAL CONFIGURATION
cupertinoOverrideTheme = cupertinoOverrideTheme?.noDefault();
extensions ??= <ThemeExtension<dynamic>>[];
adaptations ??= <Adaptation<Object>>[];
inputDecorationTheme ??= const InputDecorationTheme();
platform ??= defaultTargetPlatform;
switch (platform) {
case TargetPlatform.android:
case TargetPlatform.fuchsia:
case TargetPlatform.iOS:
materialTapTargetSize ??= MaterialTapTargetSize.padded;
case TargetPlatform.linux:
case TargetPlatform.macOS:
case TargetPlatform.windows:
materialTapTargetSize ??= MaterialTapTargetSize.shrinkWrap;
}
pageTransitionsTheme ??= const PageTransitionsTheme();
scrollbarTheme ??= const ScrollbarThemeData();
visualDensity ??= VisualDensity.defaultDensityForPlatform(platform);
useMaterial3 ??= true;
final bool useInkSparkle = platform == TargetPlatform.android && !kIsWeb;
splashFactory ??= useMaterial3
? useInkSparkle ? InkSparkle.splashFactory : InkRipple.splashFactory
: InkSplash.splashFactory;
// COLOR
assert(
colorScheme?.brightness == null || brightness == null || colorScheme!.brightness == brightness,
'ThemeData.brightness does not match ColorScheme.brightness. '
'Either override ColorScheme.brightness or ThemeData.brightness to '
'match the other.'
);
assert(colorSchemeSeed == null || colorScheme == null);
assert(colorSchemeSeed == null || primarySwatch == null);
assert(colorSchemeSeed == null || primaryColor == null);
final Brightness effectiveBrightness = brightness ?? colorScheme?.brightness ?? Brightness.light;
final bool isDark = effectiveBrightness == Brightness.dark;
if (colorSchemeSeed != null || useMaterial3) {
if (colorSchemeSeed != null) {
colorScheme = ColorScheme.fromSeed(seedColor: colorSchemeSeed, brightness: effectiveBrightness);
}
colorScheme ??= isDark ? _colorSchemeDarkM3 : _colorSchemeLightM3;
// For surfaces that use primary color in light themes and surface color in dark
final Color primarySurfaceColor = isDark ? colorScheme.surface : colorScheme.primary;
final Color onPrimarySurfaceColor = isDark ? colorScheme.onSurface : colorScheme.onPrimary;
// Default some of the color settings to values from the color scheme
primaryColor ??= primarySurfaceColor;
canvasColor ??= colorScheme.surface;
scaffoldBackgroundColor ??= colorScheme.surface;
cardColor ??= colorScheme.surface;
dividerColor ??= colorScheme.outline;
dialogBackgroundColor ??= colorScheme.surface;
indicatorColor ??= onPrimarySurfaceColor;
applyElevationOverlayColor ??= brightness == Brightness.dark;
}
applyElevationOverlayColor ??= false;
primarySwatch ??= Colors.blue;
primaryColor ??= isDark ? Colors.grey[900]! : primarySwatch;
final Brightness estimatedPrimaryColorBrightness = estimateBrightnessForColor(primaryColor);
primaryColorLight ??= isDark ? Colors.grey[500]! : primarySwatch[100]!;
primaryColorDark ??= isDark ? Colors.black : primarySwatch[700]!;
final bool primaryIsDark = estimatedPrimaryColorBrightness == Brightness.dark;
focusColor ??= isDark ? Colors.white.withOpacity(0.12) : Colors.black.withOpacity(0.12);
hoverColor ??= isDark ? Colors.white.withOpacity(0.04) : Colors.black.withOpacity(0.04);
shadowColor ??= Colors.black;
canvasColor ??= isDark ? Colors.grey[850]! : Colors.grey[50]!;
scaffoldBackgroundColor ??= canvasColor;
cardColor ??= isDark ? Colors.grey[800]! : Colors.white;
dividerColor ??= isDark ? const Color(0x1FFFFFFF) : const Color(0x1F000000);
// Create a ColorScheme that is backwards compatible as possible
// with the existing default ThemeData color values.
colorScheme ??= ColorScheme.fromSwatch(
primarySwatch: primarySwatch,
accentColor: isDark ? Colors.tealAccent[200]! : primarySwatch[500]!,
cardColor: cardColor,
backgroundColor: isDark ? Colors.grey[700]! : primarySwatch[200]!,
errorColor: Colors.red[700],
brightness: effectiveBrightness,
);
unselectedWidgetColor ??= isDark ? Colors.white70 : Colors.black54;
// Spec doesn't specify a dark theme secondaryHeaderColor, this is a guess.
secondaryHeaderColor ??= isDark ? Colors.grey[700]! : primarySwatch[50]!;
dialogBackgroundColor ??= isDark ? Colors.grey[800]! : Colors.white;
indicatorColor ??= colorScheme.secondary == primaryColor ? Colors.white : colorScheme.secondary;
hintColor ??= isDark ? Colors.white60 : Colors.black.withOpacity(0.6);
// The default [buttonTheme] is here because it doesn't use the defaults for
// [disabledColor], [highlightColor], and [splashColor].
buttonTheme ??= ButtonThemeData(
colorScheme: colorScheme,
buttonColor: isDark ? primarySwatch[600]! : Colors.grey[300]!,
disabledColor: disabledColor,
focusColor: focusColor,
hoverColor: hoverColor,
highlightColor: highlightColor,
splashColor: splashColor,
materialTapTargetSize: materialTapTargetSize,
);
disabledColor ??= isDark ? Colors.white38 : Colors.black38;
highlightColor ??= isDark ? const Color(0x40CCCCCC) : const Color(0x66BCBCBC);
splashColor ??= isDark ? const Color(0x40CCCCCC) : const Color(0x66C8C8C8);
// TYPOGRAPHY & ICONOGRAPHY
typography ??= useMaterial3
? Typography.material2021(platform: platform, colorScheme: colorScheme)
: Typography.material2014(platform: platform);
TextTheme defaultTextTheme = isDark ? typography.white : typography.black;
TextTheme defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black;
if (fontFamily != null) {
defaultTextTheme = defaultTextTheme.apply(fontFamily: fontFamily);
defaultPrimaryTextTheme = defaultPrimaryTextTheme.apply(fontFamily: fontFamily);
}
if (fontFamilyFallback != null) {
defaultTextTheme = defaultTextTheme.apply(fontFamilyFallback: fontFamilyFallback);
defaultPrimaryTextTheme = defaultPrimaryTextTheme.apply(fontFamilyFallback: fontFamilyFallback);
}
if (package != null) {
defaultTextTheme = defaultTextTheme.apply(package: package);
defaultPrimaryTextTheme = defaultPrimaryTextTheme.apply(package: package);
}
textTheme = defaultTextTheme.merge(textTheme);
primaryTextTheme = defaultPrimaryTextTheme.merge(primaryTextTheme);
iconTheme ??= isDark ? IconThemeData(color: kDefaultIconLightColor) : IconThemeData(color: kDefaultIconDarkColor);
primaryIconTheme ??= primaryIsDark ? const IconThemeData(color: Colors.white) : const IconThemeData(color: Colors.black);
// COMPONENT THEMES
appBarTheme ??= const AppBarTheme();
badgeTheme ??= const BadgeThemeData();
bannerTheme ??= const MaterialBannerThemeData();
bottomAppBarTheme ??= const BottomAppBarTheme();
bottomNavigationBarTheme ??= const BottomNavigationBarThemeData();
bottomSheetTheme ??= const BottomSheetThemeData();
// TODO(QuncCccccc): Clean it up once the type of `cardTheme` is changed to `CardThemeData`
if (cardTheme != null) {
if (cardTheme is CardTheme) {
cardTheme = cardTheme.data;
} else if (cardTheme is! CardThemeData) {
throw ArgumentError('cardTheme must be either a CardThemeData or a CardTheme');
}
}
cardTheme ??= const CardThemeData();
checkboxTheme ??= const CheckboxThemeData();
chipTheme ??= const ChipThemeData();
dataTableTheme ??= const DataTableThemeData();
datePickerTheme ??= const DatePickerThemeData();
// TODO(QuncCccccc): Clean this up once the type of `dialogTheme` is changed to `DialogThemeData`
if (dialogTheme != null) {
if (dialogTheme is DialogTheme) {
dialogTheme = dialogTheme.data;
} else if (dialogTheme is! DialogThemeData) {
throw ArgumentError('dialogTheme must be either a DialogThemeData or a DialogTheme');
}
}
dialogTheme ??= const DialogThemeData();
dividerTheme ??= const DividerThemeData();
drawerTheme ??= const DrawerThemeData();
dropdownMenuTheme ??= const DropdownMenuThemeData();
elevatedButtonTheme ??= const ElevatedButtonThemeData();
expansionTileTheme ??= const ExpansionTileThemeData();
filledButtonTheme ??= const FilledButtonThemeData();
floatingActionButtonTheme ??= const FloatingActionButtonThemeData();
iconButtonTheme ??= const IconButtonThemeData();
listTileTheme ??= const ListTileThemeData();
menuBarTheme ??= const MenuBarThemeData();
menuButtonTheme ??= const MenuButtonThemeData();
menuTheme ??= const MenuThemeData();
navigationBarTheme ??= const NavigationBarThemeData();
navigationDrawerTheme ??= const NavigationDrawerThemeData();
navigationRailTheme ??= const NavigationRailThemeData();
outlinedButtonTheme ??= const OutlinedButtonThemeData();
popupMenuTheme ??= const PopupMenuThemeData();
progressIndicatorTheme ??= const ProgressIndicatorThemeData();
radioTheme ??= const RadioThemeData();
searchBarTheme ??= const SearchBarThemeData();
searchViewTheme ??= const SearchViewThemeData();
segmentedButtonTheme ??= const SegmentedButtonThemeData();
sliderTheme ??= const SliderThemeData();
snackBarTheme ??= const SnackBarThemeData();
switchTheme ??= const SwitchThemeData();
// TODO(QuncCccccc): Clean this up once the type of `tabBarTheme` is changed to `TabBarThemeData`
if (tabBarTheme != null) {
if (tabBarTheme is TabBarTheme) {
tabBarTheme = tabBarTheme.data;
} else if (tabBarTheme is! TabBarThemeData) {
throw ArgumentError('tabBarTheme must be either a TabBarThemeData or a TabBarTheme');
}
}
tabBarTheme ??= const TabBarThemeData();
textButtonTheme ??= const TextButtonThemeData();
textSelectionTheme ??= const TextSelectionThemeData();
timePickerTheme ??= const TimePickerThemeData();
toggleButtonsTheme ??= const ToggleButtonsThemeData();
tooltipTheme ??= const TooltipThemeData();
// DEPRECATED (newest deprecations at the bottom)
buttonBarTheme ??= const ButtonBarThemeData();
return ThemeData.raw(
// For the sanity of the reader, make sure these properties are in the same
// order in every place that they are separated by section comments (e.g.
// GENERAL CONFIGURATION). Each section except for deprecations should be
// alphabetical by symbol name.
// GENERAL CONFIGURATION
adaptationMap: _createAdaptationMap(adaptations),
applyElevationOverlayColor: applyElevationOverlayColor,
cupertinoOverrideTheme: cupertinoOverrideTheme,
extensions: _themeExtensionIterableToMap(extensions),
inputDecorationTheme: inputDecorationTheme,
materialTapTargetSize: materialTapTargetSize,
pageTransitionsTheme: pageTransitionsTheme,
platform: platform,
scrollbarTheme: scrollbarTheme,
splashFactory: splashFactory,
useMaterial3: useMaterial3,
visualDensity: visualDensity,
// COLOR
canvasColor: canvasColor,
cardColor: cardColor,
colorScheme: colorScheme,
dialogBackgroundColor: dialogBackgroundColor,
disabledColor: disabledColor,
dividerColor: dividerColor,
focusColor: focusColor,
highlightColor: highlightColor,
hintColor: hintColor,
hoverColor: hoverColor,
indicatorColor: indicatorColor,
primaryColor: primaryColor,
primaryColorDark: primaryColorDark,
primaryColorLight: primaryColorLight,
scaffoldBackgroundColor: scaffoldBackgroundColor,
secondaryHeaderColor: secondaryHeaderColor,
shadowColor: shadowColor,
splashColor: splashColor,
unselectedWidgetColor: unselectedWidgetColor,
// TYPOGRAPHY & ICONOGRAPHY
iconTheme: iconTheme,
primaryTextTheme: primaryTextTheme,
textTheme: textTheme,
typography: typography,
primaryIconTheme: primaryIconTheme,
// COMPONENT THEMES
actionIconTheme: actionIconTheme,
appBarTheme: appBarTheme,
badgeTheme: badgeTheme,
bannerTheme: bannerTheme,
bottomAppBarTheme: bottomAppBarTheme,
bottomNavigationBarTheme: bottomNavigationBarTheme,
bottomSheetTheme: bottomSheetTheme,
buttonTheme: buttonTheme,
cardTheme: cardTheme as CardThemeData,
checkboxTheme: checkboxTheme,
chipTheme: chipTheme,
dataTableTheme: dataTableTheme,
datePickerTheme: datePickerTheme,
dialogTheme: dialogTheme as DialogThemeData,
dividerTheme: dividerTheme,
drawerTheme: drawerTheme,
dropdownMenuTheme: dropdownMenuTheme,
elevatedButtonTheme: elevatedButtonTheme,
expansionTileTheme: expansionTileTheme,
filledButtonTheme: filledButtonTheme,
floatingActionButtonTheme: floatingActionButtonTheme,
iconButtonTheme: iconButtonTheme,
listTileTheme: listTileTheme,
menuBarTheme: menuBarTheme,
menuButtonTheme: menuButtonTheme,
menuTheme: menuTheme,
navigationBarTheme: navigationBarTheme,
navigationDrawerTheme: navigationDrawerTheme,
navigationRailTheme: navigationRailTheme,
outlinedButtonTheme: outlinedButtonTheme,
popupMenuTheme: popupMenuTheme,
progressIndicatorTheme: progressIndicatorTheme,
radioTheme: radioTheme,
searchBarTheme: searchBarTheme,
searchViewTheme: searchViewTheme,
segmentedButtonTheme: segmentedButtonTheme,
sliderTheme: sliderTheme,
snackBarTheme: snackBarTheme,
switchTheme: switchTheme,
tabBarTheme: tabBarTheme as TabBarThemeData,
textButtonTheme: textButtonTheme,
textSelectionTheme: textSelectionTheme,
timePickerTheme: timePickerTheme,
toggleButtonsTheme: toggleButtonsTheme,
tooltipTheme: tooltipTheme,
// DEPRECATED (newest deprecations at the bottom)
buttonBarTheme: buttonBarTheme,
);
}