> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# InkWell

> Documentation for InkWell

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const inkWellPreviewJson = {
  "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": {}
};
export const inkWellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

**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](https://api.flutter.dev/flutter/material/InkWell-class.html).

## 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

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    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(),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "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": {}
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={inkWellPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: inkWellPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>