outlinedButtonTheme static method

OutlinedButtonThemeData outlinedButtonTheme({
  1. required ColorScheme colorScheme,
  2. double? radius,
  3. double pressedOutlineWidth = kThickBorderWidth,
  4. double outlineWidth = kThinBorderWidth,
  5. EdgeInsetsGeometry? padding,
  6. Size minButtonSize = kButtonMinSize,
})

An opinionated OutlinedButtonThemeData theme.

Requires a ColorScheme. The color scheme would typically be equal the color scheme also used to define the color scheme for your app theme.

The adjustable button corner radius defaults to 20. This is the new default in M3, Flutter SDK M2 defaults to 4.

Implementation

static OutlinedButtonThemeData outlinedButtonTheme({
  /// Typically the same [ColorScheme] that is also used for your [ThemeData].
  required final ColorScheme colorScheme,

  /// The button corner border radius.
  ///
  /// Defaults to 20 [kButtonRadius].
  final double? radius,

  /// The outline thickness when the button is pressed.
  ///
  /// Defaults to 2.0.
  final double pressedOutlineWidth = kThickBorderWidth,

  /// The outline thickness when the button is not selected and not pressed.
  ///
  /// Defaults to 1.5.
  final double outlineWidth = kThinBorderWidth,

  /// Padding for the button theme.
  ///
  /// Defaults to null and uses `styleFrom` constructors default padding.
  ///
  /// M3 has more horizontal padding 24dp, but the tighter default padding
  /// in M2 that is 16dp looks fine as well when using stadium borders
  /// as in M3.
  /// Making the custom scalable padding and separate one for icon
  /// versions is rather involved, so sticking to defaults, but exposing the
  /// padding property for future or external use.
  final EdgeInsetsGeometry? padding,

  /// Minimum button size.
  ///
  /// Defaults to `kButtonMinSize` = Size(40, 40).
  final Size minButtonSize = kButtonMinSize,
}) =>
    OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        minimumSize: minButtonSize,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(radius ?? kButtonRadius),
          ),
        ), //buttonShape,
        padding: padding,
      ).copyWith(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return colorScheme.primary
                  .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
                  .withAlpha(kDisabledForegroundAlpha);
            }
            return colorScheme.primary;
          },
        ),
        overlayColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.hovered)) {
              return colorScheme.primary.withAlpha(kHoverBackgroundAlpha);
            }
            if (states.contains(MaterialState.focused)) {
              return colorScheme.primary.withAlpha(kFocusBackgroundAlpha);
            }
            if (states.contains(MaterialState.pressed)) {
              return colorScheme.primary.withAlpha(kPressedBackgroundAlpha);
            }
            return Colors.transparent;
          },
        ),
        side: MaterialStateProperty.resolveWith<BorderSide?>(
          (final Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return BorderSide(
                color: colorScheme.primary
                    .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
                    .withAlpha(kDisabledBackgroundAlpha),
                width: outlineWidth,
              );
            }
            if (states.contains(MaterialState.error)) {
              return BorderSide(
                color: colorScheme.error,
                width: pressedOutlineWidth,
              );
            }
            if (states.contains(MaterialState.pressed)) {
              return BorderSide(
                color: colorScheme.primary,
                width: pressedOutlineWidth,
              );
            }
            return BorderSide(
              color: colorScheme.primary.withAlpha(kEnabledBorderAlpha),
              width: outlineWidth,
            );
          },
        ),
      ),
    );