defaultStyleOf method Null safety

  1. @override
ButtonStyle defaultStyleOf(
  1. BuildContext context
)
override

Defines the button's default appearance.

The button child's Text and Icon widgets are rendered with the ButtonStyle's foreground color. The button's InkWell adds the style's overlay color when the button is focused, hovered or pressed. The button's background color becomes its Material color.

All of the ButtonStyle's defaults appear below. In this list "Theme.foo" is shorthand for Theme.of(context).foo. Color scheme values like "onSurface(0.38)" are shorthand for onSurface.withOpacity(0.38). MaterialStateProperty valued properties that are not followed by a sublist have the same value for all states, otherwise the values are as specified for each state, and "others" means all other states.

The textScaleFactor is the value of MediaQuery.of(context).textScaleFactor and the names of the EdgeInsets constructors and EdgeInsetsGeometry.lerp have been abbreviated for readability.

The color of the ButtonStyle.textStyle is not used, the ButtonStyle.foregroundColor color is used instead.

Material 2 defaults

  • textStyle - Theme.textTheme.button
  • backgroundColor
    • disabled - Theme.colorScheme.onSurface(0.12)
    • others - Theme.colorScheme.primary
  • foregroundColor
    • disabled - Theme.colorScheme.onSurface(0.38)
    • others - Theme.colorScheme.onPrimary
  • overlayColor
    • hovered - Theme.colorScheme.onPrimary(0.08)
    • focused or pressed - Theme.colorScheme.onPrimary(0.24)
  • shadowColor - Theme.shadowColor
  • elevation
    • disabled - 0
    • default - 2
    • hovered or focused - 4
    • pressed - 8
  • padding
    • textScaleFactor <= 1 - horizontal(16)
    • 1 < textScaleFactor <= 2 - lerp(horizontal(16), horizontal(8))
    • 2 < textScaleFactor <= 3 - lerp(horizontal(8), horizontal(4))
    • 3 < textScaleFactor - horizontal(4)
  • minimumSize - Size(64, 36)
  • fixedSize - null
  • maximumSize - Size.infinite
  • side - null
  • shape - RoundedRectangleBorder(borderRadius: BorderRadius.circular(4))
  • mouseCursor
    • disabled - SystemMouseCursors.basic
    • others - SystemMouseCursors.click
  • visualDensity - theme.visualDensity
  • tapTargetSize - theme.materialTapTargetSize
  • animationDuration - kThemeChangeDuration
  • enableFeedback - true
  • alignment - Alignment.center
  • splashFactory - InkRipple.splashFactory

The default padding values for the ElevatedButton.icon factory are slightly different:

  • padding
    • textScaleFactor <= 1 - start(12) end(16)
    • 1 < textScaleFactor <= 2 - lerp(start(12) end(16), horizontal(8))
    • 2 < textScaleFactor <= 3 - lerp(horizontal(8), horizontal(4))
    • 3 < textScaleFactor - horizontal(4)

The default value for side, which defines the appearance of the button's outline, is null. That means that the outline is defined by the button shape's OutlinedBorder.side. Typically the default value of an OutlinedBorder's side is BorderSide.none, so an outline is not drawn.

Material 3 defaults

If ThemeData.useMaterial3 is set to true the following defaults will be used:

  • textStyle - Theme.textTheme.labelLarge
  • backgroundColor
    • disabled - Theme.colorScheme.onSurface(0.12)
    • others - Theme.colorScheme.surface
  • foregroundColor
    • disabled - Theme.colorScheme.onSurface(0.38)
    • others - Theme.colorScheme.primary
  • overlayColor
    • hovered - Theme.colorScheme.primary(0.08)
    • focused or pressed - Theme.colorScheme.primary(0.12)
  • shadowColor - Theme.colorScheme.shadow
  • surfaceTintColor - Theme.colorScheme.surfaceTint
  • elevation
    • disabled - 0
    • default - 1
    • hovered - 3
    • focused or pressed - 1
  • padding
    • textScaleFactor <= 1 - horizontal(16)
    • 1 < textScaleFactor <= 2 - lerp(horizontal(16), horizontal(8))
    • 2 < textScaleFactor <= 3 - lerp(horizontal(8), horizontal(4))
    • 3 < textScaleFactor - horizontal(4)
  • minimumSize - Size(64, 40)
  • fixedSize - null
  • maximumSize - Size.infinite
  • side - null
  • shape - StadiumBorder()
  • mouseCursor
    • disabled - SystemMouseCursors.basic
    • others - SystemMouseCursors.click
  • visualDensity - Theme.visualDensity
  • tapTargetSize - Theme.materialTapTargetSize
  • animationDuration - kThemeChangeDuration
  • enableFeedback - true
  • alignment - Alignment.center
  • splashFactory - Theme.splashFactory

Implementation

@override
ButtonStyle defaultStyleOf(BuildContext context) {
  final ThemeData theme = Theme.of(context);
  final ColorScheme colorScheme = theme.colorScheme;

  return Theme.of(context).useMaterial3
    ? _ElevatedButtonDefaultsM3(context)
    : styleFrom(
        backgroundColor: colorScheme.primary,
        foregroundColor: colorScheme.onPrimary,
        disabledBackgroundColor: colorScheme.onSurface.withOpacity(0.12),
        disabledForegroundColor: colorScheme.onSurface.withOpacity(0.38),
        shadowColor: theme.shadowColor,
        elevation: 2,
        textStyle: theme.textTheme.labelLarge,
        padding: _scaledPadding(context),
        minimumSize: const Size(64, 36),
        maximumSize: Size.infinite,
        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
        enabledMouseCursor: SystemMouseCursors.click,
        disabledMouseCursor: SystemMouseCursors.basic,
        visualDensity: theme.visualDensity,
        tapTargetSize: theme.materialTapTargetSize,
        animationDuration: kThemeChangeDuration,
        enableFeedback: true,
        alignment: Alignment.center,
        splashFactory: InkRipple.splashFactory,
      );
}