InkWell - Stac

Stac InkWell allows you to build the Flutter InkWell widget using JSON.
To learn more about the InkWell widget in Flutter, refer to the official documentation.

Properties

Property	Type	Description
`child`	`StacWidget`	The widget below this InkWell.
`onTap`	`StacAction`	Called when the user taps the InkWell.
`onDoubleTap`	`StacAction`	Called when the user double taps the InkWell.
`onLongPress`	`StacAction`	Called when the user presses and holds for a long duration.
`onTapDown`	`StacAction`	Called when a tap gesture starts.
`onTapUp`	`StacAction`	Called when a tap gesture is lifted.
`onTapCancel`	`StacAction`	Called when a tap gesture is aborted.
`onSecondaryTap`	`StacAction`	Called for a secondary tap (e.g., right-click on desktop).
`onSecondaryTapUp`	`StacAction`	Called when a secondary tap is lifted.
`onSecondaryTapDown`	`StacAction`	Called when a secondary tap gesture starts.
`onSecondaryTapCancel`	`StacAction`	Called when a secondary tap gesture is aborted.
`onHighlightChanged`	`StacAction`	Called when the InkWell highlight changes (pressed state).
`onHover`	`StacAction`	Called when a pointer enters or exits the widget area.
`mouseCursor`	`StacMouseCursor`	Defines the mouse cursor when it hovers over the InkWell.
`focusColor`	`StacColor`	Color of the focus highlight.
`hoverColor`	`StacColor`	Color when a pointer hovers over the InkWell.
`highlightColor`	`StacColor`	Color when the InkWell is pressed.
`overlayColor`	`StacColor`	Ripple effect color over the child.
`splashColor`	`StacColor`	The splash color of the ripple.
`radius`	`double`	Defines the splash radius.
`borderRadius`	`StacBorderRadius`	Sets rounded corners for the ripple effect.
`customBorder`	`StacBorder`	Custom border shape for clipping and ripple.
`enableFeedback`	`bool`	Whether to play feedback (e.g., sound, vibration) on tap.
`excludeFromSemantics`	`bool`	Whether to exclude from accessibility tools like screen readers.
`canRequestFocus`	`bool`	Whether this widget can request focus.
`onFocusChange`	`StacAction`	Callback for when the focus changes.
`autofocus`	`bool`	Automatically focuses when the widget is built.
`hoverDuration`	`StacDuration`	Duration for the hover animation effect.

Example

Dart
JSON
Preview

StacInkWell(
  child: StacPadding(
    padding: StacEdgeInsets(top: 20, bottom: 20, right: 20, left: 20),
    child: StacText(
      data: 'Hello, World! from Inkwell',
      textAlign: StacTextAlign.center,
    ),
  ),
  splashColor: StacColors.purple,
  borderRadius: StacBorderRadius(
    topLeft: 20,
    topRight: 20,
    bottomLeft: 20,
    bottomRight: 20,
  ),
  radius: 20,
  hoverDuration: StacDuration(seconds: 10),
  onTap: StacNoneAction(),
)

{
  "type": "inkWell",
  "child": {
    "type": "padding",
    "padding": {
      "top": 20,
      "bottom": 20,
      "right": 20,
      "left": 20
    },
    "child": {
      "type": "text",
      "data": "Hello, World! from Inkwell",
      "textAlign": "center"
    }
  },
  "splashColor": "#E1BEE7",
  "borderRadius": {
    "topLeft": 20,
    "topRight": 20,
    "bottomLeft": 20,
    "bottomRight": 20
  },
  "radius": 20,
  "hoverDuration": {
    "seconds": 10
  },
  "onTap": {}
}