ZdsButton class

An ElevatedButton with pre-applied Zds styling.

There are four variants:

  • ZdsButton, which returns a filled button.
  • ZdsButton.outlined, which returns a non-filled button with a border.
  • ZdsButton.text, which returns the equivalent of a TextButton with Zds styling.
  • ZdsButton.muted, which returns a non-filled button with a border and muted grey colors. These variants can be thought of being the primary, secondary, tertiary, and quarternary buttons respectively.

If isDangerButton is true, it will make the button red, used for destructive actions (deleting, removing, etc...). isDangerButton can only be set to true if the variant used is either ZdsButton or ZdsButton.outlined.

If onTap and onLongPress are null, the button will be disabled and change its appareance to a disabled state.

The other parameters act the same way as the ones in ElevatedButton.

Inheritance
Available Extensions

Constructors

ZdsButton({required Widget child, Key? key, VoidCallback? onTap, bool isDangerButton = false, bool autofocus = false, Clip clipBehavior = Clip.none, FocusNode? focusNode, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, EdgeInsets? textPadding, String? semanticLabel})
Creates a filled ZdsButton. (Primary button). Use ZdsButton.filled until old buttons are fully removed. Currently, this acts as a backward compatible constructor for the old buttons.
const
ZdsButton.filled({required Widget child, Key? key, VoidCallback? onTap, bool isDangerButton = false, bool autofocus = false, Clip clipBehavior = Clip.none, FocusNode? focusNode, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, EdgeInsets? textPadding, Color? customColor, String? semanticLabel})
Creates a filled ZdsButton. (Primary button). Will be removed when old button versions are fully removed. Will be replaced with ZdsButton constructor.
const
ZdsButton.muted({required Widget child, Key? key, VoidCallback? onTap, bool autofocus = false, Clip clipBehavior = Clip.none, FocusNode? focusNode, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, EdgeInsets? textPadding, Color? customColor, String? semanticLabel})
Constructs a muted ZdsButton. (Quaternary button)
const
ZdsButton.outlined({required Widget child, Key? key, VoidCallback? onTap, bool isDangerButton = false, bool autofocus = false, Clip clipBehavior = Clip.none, FocusNode? focusNode, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, EdgeInsets? textPadding, Color? customColor, String? semanticLabel})
Creates an outlined ZdsButton. (Secondary button)
const
ZdsButton.text({required Widget child, Key? key, bool isOnDarkBackground = false, VoidCallback? onTap, bool autofocus = false, Clip clipBehavior = Clip.none, FocusNode? focusNode, VoidCallback? onLongPress, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocusChange, EdgeInsets? textPadding, Color? customColor, String? semanticLabel})
Creates a ZdsButton that behaves as a TextButton. (Tertiary button)
const

Properties

autofocus bool
Whether to autofocus on this button.
final
child Widget
The Widget that will go inside the button, typically a Text with style TextTheme.titleMedium.
final
clipBehavior Clip
Whether to clip the contents of this button.
final
customColor Color?
Custom color override.
final
focusNode FocusNode?
FocusNode for the button.
final
hashCode int
The hash code for this object.
no setterinherited
isDangerButton bool
Whether to use danger/red colors. If true, the variant used must be either ZdsButton or ZdsButton.outlined.
final
isOnDarkBackground bool
Whether to use white text as the button is on a dark background. Can only be used with ZdsButton.text
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onFocusChange ValueChanged<bool>?
Called when the focus changes, with true if this widget's node gains focus, and false if it loses focus.
final
onHover ValueChanged<bool>?
Called whenever a pointer enters or exits the button response area, with true if a pointer has entered this button and false if it has exited it.
final
onLongPress VoidCallback?
If this and onTap are null, the button will be disabled.
final
onTap VoidCallback?
If this and onLongPress are null, the button will be disabled.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
semanticLabel String?
This is for talkback text on child.
final
textPadding EdgeInsets?
padding for the text within the button
final

Methods

build(BuildContext context) Widget
Describes the part of the user interface represented by this widget.
override
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) bool
The equality operator.
inherited

Static Methods

getStyle({required ZdsButtonVariant variant, required ZetaColors zetaColors, required TextTheme textTheme, EdgeInsetsGeometry? textPadding, bool isDangerButton = false, bool isOnDarkBackground = false, Color? customColor}) ButtonStyle
Returns a ButtonStyle based on the provided parameters.