getStyle static method
- {required ZdsButtonVariant variant,
- required ZetaColors zetaColors,
- required TextTheme textTheme,
- EdgeInsetsGeometry? textPadding,
- bool isDangerButton = false,
- bool isOnDarkBackground = false,
- Color? customColor}
Returns a ButtonStyle based on the provided parameters.
variant
: The style variant of the button.zetaColors
: Colors configuration for the application/theme.textTheme
: The text theme for the application/theme.textPadding
: Optional padding for the button's text content.isDangerButton
: Flag to determine if the button indicates a dangerous action.isOnDarkBackground
: Flag to determine if the button is on a dark background.customColor
: An optional color to override the default button color.
Implementation
static ButtonStyle getStyle({
required ZdsButtonVariant variant,
required ZetaColors zetaColors,
required TextTheme textTheme,
EdgeInsetsGeometry? textPadding,
bool isDangerButton = false,
bool isOnDarkBackground = false,
Color? customColor,
}) {
// Default text padding if none is provided.
final EdgeInsetsGeometry tp = textPadding ?? const EdgeInsets.symmetric(horizontal: 16, vertical: 6);
// Determine the default background color.
final Color defaultBackground = customColor ?? (isDangerButton ? zetaColors.negative : zetaColors.secondary);
// Common textStyle for all variants.
final textStyle = MaterialStateProperty.all(textTheme.titleMedium?.copyWith(fontWeight: FontWeight.w500));
// Helper function to calculate the overlay color.
Color calculateOverlay({double opacity = 0.1, Color? background}) {
return customColor?.withOpacity(opacity) ?? (background ?? defaultBackground).withOpacity(opacity);
}
switch (variant) {
case ZdsButtonVariant.filled:
return ButtonStyle(
padding: MaterialStateProperty.all(tp),
textStyle: textStyle,
foregroundColor: materialStatePropertyResolver(
defaultValue: defaultBackground.onColor,
disabledValue: zetaColors.textDisabled,
),
backgroundColor: materialStatePropertyResolver(
defaultValue: defaultBackground,
disabledValue: zetaColors.surfaceDisabled,
),
overlayColor: materialStatePropertyResolver(
hoveredValue: defaultBackground.darken(5), // Slight darkening for hover
pressedValue: defaultBackground.darken(15), // More noticeable darkening for pressed state
defaultValue: Colors.transparent,
),
side: materialStatePropertyResolver(
focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3),
disabledValue: BorderSide(color: zetaColors.borderDisabled),
),
);
case ZdsButtonVariant.outlined:
return ButtonStyle(
padding: MaterialStateProperty.all(tp),
textStyle: textStyle,
foregroundColor: materialStatePropertyResolver(
defaultValue: defaultBackground,
disabledValue: zetaColors.textDisabled,
),
backgroundColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
disabledValue: zetaColors.surfaceDisabled,
),
overlayColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
hoveredValue: calculateOverlay(),
pressedValue: calculateOverlay(opacity: 0.2),
),
side: materialStatePropertyResolver(
focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3),
defaultValue: BorderSide(color: defaultBackground),
disabledValue: BorderSide(color: zetaColors.borderDisabled),
),
);
case ZdsButtonVariant.text:
return ButtonStyle(
padding: MaterialStateProperty.all(tp),
textStyle: textStyle,
foregroundColor: materialStatePropertyResolver(
defaultValue: isOnDarkBackground ? zetaColors.textInverse : defaultBackground,
disabledValue: zetaColors.textDisabled,
),
backgroundColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
),
overlayColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
hoveredValue: calculateOverlay(),
pressedValue: calculateOverlay(opacity: 0.2),
),
side: materialStatePropertyResolver(
focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3),
disabledValue: const BorderSide(color: Colors.transparent),
),
);
case ZdsButtonVariant.muted:
return ButtonStyle(
padding: MaterialStateProperty.all(tp),
textStyle: textStyle,
foregroundColor: materialStatePropertyResolver(
defaultValue: zetaColors.textDefault,
disabledValue: zetaColors.textDisabled,
),
backgroundColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
disabledValue: zetaColors.surfaceDisabled,
),
overlayColor: materialStatePropertyResolver(
defaultValue: Colors.transparent,
hoveredValue: calculateOverlay(background: zetaColors.borderDefault),
pressedValue: calculateOverlay(background: zetaColors.borderDefault, opacity: 0.2),
),
side: materialStatePropertyResolver(
focusedValue: BorderSide(color: zetaColors.secondary.subtle, width: 3),
disabledValue: BorderSide(color: zetaColors.borderDisabled),
defaultValue: BorderSide(color: zetaColors.borderDefault),
),
);
}
}