Skip to content

docs: enhance widget documentation with playground examples and JSON structures #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
divyanshub024 merged 6 commits into from
Apr 28, 2026
Merged

docs: enhance widget documentation with playground examples and JSON structures #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4c8a63b
docs: enhance widget documentation with playground examples and JSON …
Potatomonsta Apr 17, 2026
88511a0
docs: update widget documentation with better examples for some widgets
Potatomonsta Apr 18, 2026
847466d
docs: refactor widget documentation to import playground base URL
Potatomonsta Apr 23, 2026
5318c19
docs: update widget documentation t
divyanshub024 Apr 28, 2026
35d741a
docs: refactor Align widget documentation to use Scaffold structure
divyanshub024 Apr 28, 2026
2254742
docs: refine SliverGrid and Align widget documentation
divyanshub024 Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/snippets/playground_base.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";
102 changes: 98 additions & 4 deletions docs/widgets/alert_dialog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,62 @@ title: "AlertDialog"
description: "Documentation for AlertDialog"
---

import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";

export const alertDialogPreviewJson = {
"type": "alertDialog",
"content": {
"type": "padding",
"padding": {
"top": 0,
"left": 12,
"right": 12,
"bottom": 8
},
"child": {
"type": "text",
"data": "Discard draft?",
"align": "center",
"style": {
"fontSize": 14
}
}
},
"actions": [
{
"type": "textButton",
"child": {
"type": "text",
"data": "CANCEL"
},
"onPressed": {
"actionType": "navigate",
"navigationStyle": "pop"
}
},
{
"type": "sizedBox",
"width": 8
},
{
"type": "textButton",
"child": {
"type": "text",
"data": "DISCARD"
},
"onPressed": {
"actionType": "navigate",
"navigationStyle": "pop"
}
},
{
"type": "sizedBox",
"width": 12
}
]
};
export const alertDialogPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

Expand Down Expand Up @@ -39,8 +95,10 @@ To know more about the alert dialog widget in Flutter, refer to the [official do

## Example

<CodeGroup>
```dart Dart
<Tabs sync={false}>
<Tab title="Dart">

```dart
StacAlertDialog(
content: StacPadding(
padding: StacEdgeInsets(
Expand Down Expand Up @@ -70,7 +128,10 @@ StacAlertDialog(
)
```

```json JSON
</Tab>
<Tab title="JSON">

```json
{
"type": "alertDialog",
"content": {
Expand Down Expand Up @@ -124,4 +185,37 @@ StacAlertDialog(
]
}
```
</CodeGroup>

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

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>
144 changes: 108 additions & 36 deletions docs/widgets/align.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,66 +3,138 @@ title: "Align"
description: "Documentation for Align"
---

import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";

export const alignPreviewJson = {
"type": "scaffold",
"body": {
"type": "align",
"child": {
"type": "container",
"color": "#FC5632",
"height": 250,
"width": 200,
"child": {
"type": "align",
"alignment": "bottomCenter",
"child": {
"type": "text",
"data": "Flutter",
"style": {
"fontSize": 23,
"fontWeight": "w600"
}
}
}
}
}
};
export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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

The playground centers the root widget; this example wraps `Align` in a `Scaffold` body so it gets full-screen constraints.

## Properties

| Property | Type | Description |
|--------------|-----------------------|-------------------------------------------------------------------------------|
| alignment | `StacAlignment` | How to align the child. |
| Property | Type | Description |
|--------------|----------------------------|-------------------------------------------------------------------------------|
| alignment | `StacAlignmentDirectional` | How to align the child. |
| widthFactor | `double` | If non-null, sets its width to the child's width multiplied by this factor. |
| heightFactor | `double` | If non-null, sets its height to the child's height multiplied by this factor. |
| child | `StacWidget` | The widget below this widget in the tree. |

## Example

<CodeGroup>
```dart Dart
StacAlign(
alignment: StacAlignment.topEnd,
child: StacContainer(
color: '#FC5632',
clipBehavior: StacClip.hardEdge,
height: 250,
width: 200,
child: StacAlign(
alignment: StacAlignment.bottomCenter,
child: StacText(
data: 'Flutter',
style: StacTextStyle(
fontSize: 23,
fontWeight: StacFontWeight.w600,
<Tabs sync={false}>
<Tab title="Dart">

```dart
StacScaffold(
body: StacAlign(
child: StacContainer(
color: '#FC5632',
height: 250,
width: 200,
child: StacAlign(
alignment: StacAlignmentDirectional.bottomCenter,
child: StacText(
data: 'Flutter',
style: StacTextStyle(
fontSize: 23,
fontWeight: StacFontWeight.w600,
),
),
),
),
),
)
```

```json JSON
</Tab>

<Tab title="JSON">


```json
{
"type": "align",
"alignment": "topEnd",
"child": {
"type": "container",
"color": "#FC5632",
"clipBehavior": "hardEdge",
"height": 250,
"width": 200,
"type": "scaffold",
"body": {
"type": "align",
"child": {
"type": "align",
"alignment": "bottomCenter",
"type": "container",
"color": "#FC5632",
"height": 250,
"width": 200,
"child": {
"type": "text",
"data": "Flutter",
"style": {
"fontSize": 23,
"fontWeight": "w600"
"type": "align",
"alignment": "bottomCenter",
"child": {
"type": "text",
"data": "Flutter",
"style": {
"fontSize": 23,
"fontWeight": "w600"
}
}
}
}
}
}
```
</CodeGroup>

</Tab>

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

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