Clickable class

A highly configurable clickable widget with extensive gesture and state support.

Clickable provides a comprehensive foundation for interactive widgets, handling various input gestures (tap, double-tap, long-press, etc.), visual states, and accessibility features. It manages decoration, styling, and transitions based on widget states like hover, focus, and press.

Overview

Use Clickable when building custom interactive components that need:

  • Fine-grained gesture control (primary, secondary, tertiary taps)
  • State-aware styling (decoration, text style, mouse cursor, etc.)
  • Focus management and keyboard shortcuts
  • Smooth transitions between states
  • Accessibility features like focus outlines

Example

Clickable(
  onPressed: () => print('Clicked!'),
  decoration: WidgetStateProperty.resolveWith((states) {
    if (states.contains(WidgetState.pressed)) {
      return BoxDecoration(color: Colors.blue.shade700);
    }
    return BoxDecoration(color: Colors.blue);
  }),
  child: Padding(
    padding: EdgeInsets.all(8),
    child: Text('Click Me'),
  ),
)
Inheritance
Available extensions

Constructors

Clickable({Key? key, required Widget child, WidgetStatesController? statesController, bool enabled = true, WidgetStateProperty<Decoration?>? decoration, WidgetStateProperty<MouseCursor?>? mouseCursor, WidgetStateProperty<EdgeInsetsGeometry?>? padding, WidgetStateProperty<TextStyle?>? textStyle, WidgetStateProperty<IconThemeData?>? iconTheme, VoidCallback? onPressed, FocusNode? focusNode, HitTestBehavior behavior = HitTestBehavior.translucent, ValueChanged<bool>? onHover, ValueChanged<bool>? onFocus, bool disableTransition = false, bool disableHoverEffect = false, WidgetStateProperty<EdgeInsetsGeometry?>? margin, VoidCallback? onDoubleTap, Map<LogicalKeySet, Intent>? shortcuts, Map<Type, Action<Intent>>? actions, bool focusOutline = true, bool enableFeedback = true, WidgetStateProperty<Matrix4?>? transform, VoidCallback? onLongPress, GestureTapDownCallback? onTapDown, GestureTapUpCallback? onTapUp, GestureTapCancelCallback? onTapCancel, GestureTapDownCallback? onSecondaryTapDown, GestureTapUpCallback? onSecondaryTapUp, GestureTapCancelCallback? onSecondaryTapCancel, GestureTapDownCallback? onTertiaryTapDown, GestureTapUpCallback? onTertiaryTapUp, GestureTapCancelCallback? onTertiaryTapCancel, GestureLongPressStartCallback? onLongPressStart, GestureLongPressUpCallback? onLongPressUp, GestureLongPressMoveUpdateCallback? onLongPressMoveUpdate, GestureLongPressEndCallback? onLongPressEnd, GestureLongPressUpCallback? onSecondaryLongPress, GestureLongPressUpCallback? onTertiaryLongPress, AlignmentGeometry? marginAlignment, bool disableFocusOutline = false})
Creates a Clickable widget.
const

Properties

actions → Map<Type, Action<Intent>>?
Actions to handle for intents.
final
asBuilder → NeverWidgetBuilder

Available on Widget, provided by the WidgetExtension extension

Converts this widget to a builder function.
no setter
base → TextModifier

Available on Widget, provided by the TextExtension extension

Applies base (default) font size.
no setter
behavior → HitTestBehavior
How to behave during hit testing.
final
black → TextModifier

Available on Widget, provided by the TextExtension extension

Applies black font weight (900).
no setter
blockQuote → TextModifier

Available on Widget, provided by the TextExtension extension

Applies block quote style with left border.
no setter
bold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies bold font weight (700).
no setter
child → Widget
The child widget displayed within the clickable area.
final
decoration → WidgetStateProperty<Decoration?>?
State-aware decoration for the widget.
final
disableFocusOutline → bool
Whether to disable the focus outline.
final
disableHoverEffect → bool
Whether to disable hover visual effects.
final
disableTransition → bool
Whether to disable state transition animations.
final
ellipsis → TextModifier

Available on Widget, provided by the TextExtension extension

Applies ellipsis overflow to text.
no setter
enabled → bool
Whether the widget is enabled and can respond to interactions.
final
enableFeedback → bool
Whether to enable haptic/audio feedback.
final
extraBold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-bold font weight (800).
no setter
extraLight → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-light font weight (200).
no setter
firstP → TextModifier

Available on Widget, provided by the TextExtension extension

Applies paragraph style for the first paragraph (no top spacing).
no setter
focusNode → FocusNode?
Focus node for keyboard focus management.
final
focusOutline → bool
Whether to show focus outline for accessibility.
final
foreground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies standard foreground color.
no setter
h1 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 1 style.
no setter
h2 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 2 style with bottom border.
no setter
h3 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 3 style.
no setter
h4 → TextModifier

Available on Widget, provided by the TextExtension extension

Applies heading 4 style.
no setter
hashCode → int
The hash code for this object.
no setterinherited
iconDestructiveForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with destructive foreground color.
no setter
iconLarge → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with large size theme.
no setter
iconMedium → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with medium size theme.
no setter
iconMutedForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with muted foreground color.
no setter
iconPrimary → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with primary color.
no setter
iconPrimaryForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with primary foreground color.
no setter
iconSecondary → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with secondary color.
no setter
iconSecondaryForeground → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with secondary foreground color.
no setter
iconSmall → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with small size theme.
no setter
iconTheme → WidgetStateProperty<IconThemeData?>?
State-aware icon theme applied to icon descendants.
final
iconX2Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra large size theme.
no setter
iconX2Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra small size theme.
no setter
iconX3Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra large size theme.
no setter
iconX3Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra small size theme.
no setter
iconX4Large → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra-extra large size theme.
no setter
iconX4Small → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra-extra-extra-extra small size theme.
no setter
iconXLarge → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra large size theme.
no setter
iconXSmall → WrappedIcon

Available on Widget, provided by the IconExtension extension

Wraps the icon with extra small size theme.
no setter
inlineCode → TextModifier

Available on Widget, provided by the TextExtension extension

Applies inline code style with background and padding.
no setter
italic → TextModifier

Available on Widget, provided by the TextExtension extension

Applies italic font style.
no setter
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies large font size.
no setter
lead → TextModifier

Available on Widget, provided by the TextExtension extension

Applies lead paragraph style with muted color.
no setter
li → TextModifier

Available on Widget, provided by the TextExtension extension

Applies list item style with bullet point.
no setter
light → TextModifier

Available on Widget, provided by the TextExtension extension

Applies light font weight (300).
no setter
margin → WidgetStateProperty<EdgeInsetsGeometry?>?
State-aware margin around the widget.
final
marginAlignment → AlignmentGeometry?
Alignment for applying margin.
final
medium → TextModifier

Available on Widget, provided by the TextExtension extension

Applies medium font weight (500).
no setter
modify → TextModifier

Available on Widget, provided by the TextExtension extension

Applies primary foreground color modifier.
no setter
mono → TextModifier

Available on Widget, provided by the TextExtension extension

Applies monospace font family.
no setter
mouseCursor → WidgetStateProperty<MouseCursor?>?
State-aware mouse cursor style.
final
muted → TextModifier

Available on Widget, provided by the TextExtension extension

Applies muted foreground color.
no setter
normal → TextModifier

Available on Widget, provided by the TextExtension extension

Applies normal font weight (400).
no setter
onDoubleTap → VoidCallback?
Called when the widget is double-tapped.
final
onFocus → ValueChanged<bool>?
Called when focus state changes.
final
onHover → ValueChanged<bool>?
Called when hover state changes.
final
onLongPress → VoidCallback?
Called when long-pressed.
final
onLongPressEnd → GestureLongPressEndCallback?
Called when long press ends.
final
onLongPressMoveUpdate → GestureLongPressMoveUpdateCallback?
Called when long press moves.
final
onLongPressStart → GestureLongPressStartCallback?
Called when long press starts.
final
onLongPressUp → VoidCallback?
Called when long press is released.
final
onPressed → VoidCallback?
Called when the widget is tapped (primary button).
final
onSecondaryLongPress → VoidCallback?
Called on secondary long press completion.
final
onSecondaryTapCancel → VoidCallback?
Called when secondary tap is cancelled.
final
onSecondaryTapDown → GestureTapDownCallback?
Called on secondary (right-click) tap down.
final
onSecondaryTapUp → GestureTapUpCallback?
Called on secondary tap up.
final
onTapCancel → VoidCallback?
Called when primary tap is cancelled.
final
onTapDown → GestureTapDownCallback?
Called on primary tap down.
final
onTapUp → GestureTapUpCallback?
Called on primary tap up.
final
onTertiaryLongPress → VoidCallback?
Called on tertiary long press completion.
final
onTertiaryTapCancel → VoidCallback?
Called when tertiary tap is cancelled.
final
onTertiaryTapDown → GestureTapDownCallback?
Called on tertiary (middle-click) tap down.
final
onTertiaryTapUp → GestureTapUpCallback?
Called on tertiary tap up.
final
p → TextModifier

Available on Widget, provided by the TextExtension extension

Applies paragraph style with top spacing.
no setter
padding → WidgetStateProperty<EdgeInsetsGeometry?>?
State-aware padding around the child.
final
primaryForeground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies primary foreground color.
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
sans → TextModifier

Available on Widget, provided by the TextExtension extension

Applies sans-serif font family.
no setter
secondaryForeground → TextModifier

Available on Widget, provided by the TextExtension extension

Applies secondary foreground color.
no setter
semiBold → TextModifier

Available on Widget, provided by the TextExtension extension

Applies semi-bold font weight (600).
no setter
shortcuts → Map<LogicalKeySet, Intent>?
Keyboard shortcuts to handle.
final
singleLine → TextModifier

Available on Widget, provided by the TextExtension extension

Constrains text to a single line without wrapping.
no setter
small → TextModifier

Available on Widget, provided by the TextExtension extension

Applies small font size.
no setter
statesController → WidgetStatesController?
Optional controller for programmatic state management.
final
textCenter → TextModifier

Available on Widget, provided by the TextExtension extension

Centers text horizontally.
no setter
textEnd → TextModifier

Available on Widget, provided by the TextExtension extension

Aligns text to the end (right in LTR, left in RTL).
no setter
textJustify → TextModifier

Available on Widget, provided by the TextExtension extension

Justifies text alignment.
no setter
textLarge → TextModifier

Available on Widget, provided by the TextExtension extension

Applies large text style.
no setter
textLeft → TextModifier

Available on Widget, provided by the TextExtension extension

Left-aligns text.
no setter
textMuted → TextModifier

Available on Widget, provided by the TextExtension extension

Applies muted text style with muted color.
no setter
textRight → TextModifier

Available on Widget, provided by the TextExtension extension

Right-aligns text.
no setter
textSmall → TextModifier

Available on Widget, provided by the TextExtension extension

Applies small text style.
no setter
textStart → TextModifier

Available on Widget, provided by the TextExtension extension

Aligns text to the start (left in LTR, right in RTL).
no setter
textStyle → WidgetStateProperty<TextStyle?>?
State-aware text style applied to text descendants.
final
thin → TextModifier

Available on Widget, provided by the TextExtension extension

Applies thin font weight (100).
no setter
transform → WidgetStateProperty<Matrix4?>?
State-aware transformation matrix.
final
underline → TextModifier

Available on Widget, provided by the TextExtension extension

Applies underline text decoration.
no setter
x2Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 2x large font size.
no setter
x3Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 3x large font size.
no setter
x4Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 4x large font size.
no setter
x5Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 5x large font size.
no setter
x6Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 6x large font size.
no setter
x7Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 7x large font size.
no setter
x8Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 8x large font size.
no setter
x9Large → TextModifier

Available on Widget, provided by the TextExtension extension

Applies 9x large font size.
no setter
xLarge → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-large font size.
no setter
xSmall → TextModifier

Available on Widget, provided by the TextExtension extension

Applies extra-small font size.
no setter

Methods

asSkeleton({bool enabled = true, bool leaf = false, Widget? replacement, bool unite = false, AsyncSnapshot? snapshot}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Converts the widget to a skeleton with advanced configuration options.
asSkeletonSliver({bool enabled = true}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Converts the widget to a skeleton suitable for sliver layouts.
center({Key? key}) → Widget

Available on Widget, provided by the WidgetExtension extension

Centers this widget horizontally and vertically.
clip({Clip clipBehavior = Clip.hardEdge}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a rectangle.
clipOval({Clip clipBehavior = Clip.antiAlias}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to an oval shape.
clipPath({Clip clipBehavior = Clip.antiAlias, required CustomClipper<Path> clipper}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a custom path.
clipRRect({BorderRadiusGeometry borderRadius = BorderRadius.zero, Clip clipBehavior = Clip.antiAlias}) → Widget

Available on Widget, provided by the WidgetExtension extension

Clips this widget to a rounded rectangle.
constrained({double? minWidth, double? maxWidth, double? minHeight, double? maxHeight, double? width, double? height}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a ConstrainedBox with specified constraints.
createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<Clickable>
Creates the mutable state for this widget at a given location in the tree.
override
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.
inherited
excludeSkeleton({bool exclude = true}) → Widget

Available on Widget, provided by the SkeletonExtension extension

Controls whether the widget should be preserved in skeleton mode.
expanded({int flex = 1}) → Widget

Available on Widget, provided by the WidgetExtension extension

Makes this widget expanded within a Flex parent (Row/Column).
ignoreSkeleton() → Widget

Available on Widget, provided by the SkeletonExtension extension

Excludes the widget from skeleton effects in its parent skeleton context.
intrinsic({double? stepWidth, double? stepHeight}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to both intrinsic width and height.
intrinsicHeight() → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to its intrinsic height.
intrinsicWidth({double? stepWidth, double? stepHeight}) → Widget

Available on Widget, provided by the WidgetExtension extension

Sizes this widget to its intrinsic width.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
positioned({Key? key, double? left, double? top, double? right, double? bottom}) → Widget

Available on Widget, provided by the WidgetExtension extension

Positions this widget absolutely within a Stack.
sized({double? width, double? height, double? size}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a SizedBox with specified dimensions.
then(InlineSpan span) → Widget

Available on Widget, provided by the TextExtension extension

Appends an inline span to the current text widget.
thenButton({required VoidCallback onPressed, required Widget child}) → Widget

Available on Widget, provided by the TextExtension extension

Appends a button widget to the current text widget.
thenInlineCode(String text) → Widget

Available on Widget, provided by the TextExtension extension

Appends inline code to the current text widget.
thenText(String text) → Widget

Available on Widget, provided by the TextExtension extension

Appends a text span to the current text widget.
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, int wrapWidth = 65}) → 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
transform({Key? key, required Matrix4 transform}) → Widget

Available on Widget, provided by the WidgetExtension extension

Applies a transformation matrix to this widget.
withAlign(AlignmentGeometry alignment) → Widget

Available on Widget, provided by the WidgetExtension extension

Aligns this widget within its parent.
withOpacity(double opacity) → Widget

Available on Widget, provided by the WidgetExtension extension

Applies opacity to this widget.
withPadding({double? top, double? bottom, double? left, double? right, double? horizontal, double? vertical, double? all, EdgeInsetsGeometry? padding}) → Widget

Available on Widget, provided by the WidgetExtension extension

Wraps this widget in a Padding widget.

Operators

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