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

# Conditional

> Documentation for Conditional

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

export const conditionalPreviewJson = {
  "type": "conditional",
  "condition": "user.isLoggedIn == true",
  "ifTrue": {
    "type": "text",
    "data": "Welcome back!"
  },
  "ifFalse": {
    "type": "text",
    "data": "Please sign in"
  }
};
export const conditionalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac Conditional allows you to conditionally render widgets based on a boolean expression. It evaluates the condition at runtime and renders either the `ifTrue` or `ifFalse` widget.

## Properties

| Property  | Type         | Description                                                                    |
| --------- | ------------ | ------------------------------------------------------------------------------ |
| condition | `String`     | **Required.** The boolean expression to evaluate at runtime.                   |
| ifTrue    | `StacWidget` | **Required.** The widget to render when condition evaluates to true.           |
| ifFalse   | `StacWidget` | The widget to render when condition evaluates to false. Renders empty if null. |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacConditional(
      condition: 'user.isLoggedIn == true',
      ifTrue: StacText(data: 'Welcome back!'),
      ifFalse: StacText(data: 'Please sign in'),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "conditional",
      "condition": "user.isLoggedIn == true",
      "ifTrue": {
        "type": "text",
        "data": "Welcome back!"
      },
      "ifFalse": {
        "type": "text",
        "data": "Please sign in"
      }
    }
    ```
  </Tab>

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

      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>

## Conditional with Complex Widgets

<CodeGroup>
  ```dart Dart theme={null}
  StacConditional(
    condition: 'items.length > 0',
    ifTrue: StacListView(
      children: [
        StacText(data: 'Your items:'),
        // ... list items
      ],
    ),
    ifFalse: StacCenter(
      child: StacColumn(
        mainAxisAlignment: StacMainAxisAlignment.center,
        children: [
          StacIcon(icon: 'empty_box', size: 64.0),
          StacSizedBox(height: 16.0),
          StacText(data: 'No items found'),
          StacSizedBox(height: 8.0),
          StacElevatedButton(
            child: StacText(data: 'Add Item'),
            onPressed: StacNavigateAction(routeName: '/add-item'),
          ),
        ],
      ),
    ),
  )
  ```

  ```json JSON theme={null}
  {
    "type": "conditional",
    "condition": "items.length > 0",
    "ifTrue": {
      "type": "listView",
      "children": [
        { "type": "text", "data": "Your items:" }
      ]
    },
    "ifFalse": {
      "type": "center",
      "child": {
        "type": "column",
        "mainAxisAlignment": "center",
        "children": [
          { "type": "icon", "icon": "empty_box", "size": 64.0 },
          { "type": "sizedBox", "height": 16.0 },
          { "type": "text", "data": "No items found" },
          { "type": "sizedBox", "height": 8.0 },
          {
            "type": "elevatedButton",
            "child": { "type": "text", "data": "Add Item" },
            "onPressed": {
              "actionType": "navigate",
              "routeName": "/add-item"
            }
          }
        ]
      }
    }
  }
  ```
</CodeGroup>

## Condition Expression Syntax

The `condition` property accepts expressions that are evaluated against the current state. Common patterns include:

* **Equality**: `user.role == 'admin'`
* **Boolean check**: `user.isVerified == true`
* **Comparison**: `cart.total > 100`
* **Length check**: `items.length > 0`
* **Null check**: `user.name != null`

<Note>
  The condition is evaluated at runtime by Stac's expression resolver against the current application state.
</Note>