Conditional

Documentation for Conditional

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

Dart

StacConditional(
  condition: 'user.isLoggedIn == true',
  ifTrue: StacText(data: 'Welcome back!'),
  ifFalse: StacText(data: 'Please sign in'),
)

JSON

{
  "type": "conditional",
  "condition": "user.isLoggedIn == true",
  "ifTrue": {
    "type": "text",
    "data": "Welcome back!"
  },
  "ifFalse": {
    "type": "text",
    "data": "Please sign in"
  }
}

Preview

Conditional with Complex Widgets

Dart

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'),
        ),
      ],
    ),
  ),
)

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

The condition is evaluated at runtime by Stac’s expression resolver against the current application state.