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

# Text

> Documentation for Text

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

export const textPreviewJson = {
  "type": "text",
  "data": "Hello, World!",
  "style": {
    "color": "#FFFFFF",
    "fontSize": 24
  }
};
export const textPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Text allows you to build a Flutter Text widget using JSON.
To know more about the text widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Text-class.html).

## Properties

| Property        | Type                  | Description                                        |
| --------------- | --------------------- | -------------------------------------------------- |
| data            | `String`              | The text to display.                               |
| children        | `List<StacTextSpan>`  | The list of text spans to display.                 |
| style           | `StacTextStyle`       | The style to apply to the text.                    |
| copyWithStyle   | `StacCustomTextStyle` | Optional style overrides applied on top of style.  |
| textAlign       | `StacTextAlign`       | The alignment of the text.                         |
| textDirection   | `StacTextDirection`   | The direction of the text.                         |
| softWrap        | `bool`                | Whether the text should break at soft line breaks. |
| overflow        | `StacTextOverflow`    | How visual overflow should be handled.             |
| textScaleFactor | `double`              | The number of font pixels for each logical pixel.  |
| maxLines        | `int`                 | The maximum number of lines to display.            |
| semanticsLabel  | `String`              | The semantics label for the text.                  |
| textWidthBasis  | `StacTextWidthBasis`  | The width basis for the text.                      |
| selectionColor  | `StacColor`           | The color of the text selection.                   |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacText(
      data: 'Hello, World!',
      style: StacTextStyle(
        color: StacColors.white,
        fontSize: 24.0,
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "text",
      "data": "Hello, World!",
      "style": {
        "color": "#FFFFFF",
        "fontSize": 24
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={textPreviewSrc}
        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: textPreviewJson
      };

      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>