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

# Row

> Documentation for Row

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

export const rowPreviewJson = {
  "type": "row",
  "mainAxisAlignment": "center",
  "crossAxisAlignment": "center",
  "spacing": 12,
  "children": [{
    "type": "image",
    "src": "https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "width": 100
  }, {
    "type": "image",
    "src": "https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "width": 100
  }, {
    "type": "image",
    "src": "https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
    "width": 100
  }]
};
export const rowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

## Properties

| Property           | Type                     | Description                                                                                                           |
| ------------------ | ------------------------ | --------------------------------------------------------------------------------------------------------------------- |
| mainAxisAlignment  | `StacMainAxisAlignment`  | How the children should be placed along the main axis.                                                                |
| crossAxisAlignment | `StacCrossAxisAlignment` | How the children should be placed along the cross axis.                                                               |
| mainAxisSize       | `StacMainAxisSize`       | How much space should be occupied in the main axis.                                                                   |
| textDirection      | `StacTextDirection`      | Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction. |
| verticalDirection  | `StacVerticalDirection`  | The order to lay children out vertically.                                                                             |
| textBaseline       | `StacTextBaseline`       | The baseline to use when aligning text.                                                                               |
| spacing            | `double`                 | How much space to place between children in the main axis.                                                            |
| children           | `List<StacWidget>`       | The widgets below this widget in the tree.                                                                            |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacRow(
      mainAxisAlignment: StacMainAxisAlignment.center,
      crossAxisAlignment: StacCrossAxisAlignment.center,
      spacing: 12,
      children: [
        StacImage(
          src: 'https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg',
          width: 100,
        ),
        StacImage(
          src: 'https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg',
          width: 100,
        ),
        StacImage(
          src: 'https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg',
          width: 100,
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "row",
      "mainAxisAlignment": "center",
      "crossAxisAlignment": "center",
      "spacing": 12,
      "children": [
        {
          "type": "image",
          "src": "https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
          "width": 100
        },
        {
          "type": "image",
          "src": "https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
          "width": 100
        },
        {
          "type": "image",
          "src": "https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
          "width": 100
        }
      ]
    }
    ```
  </Tab>

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

      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>