How Stac works?

Our server driven approach lets us communicate in realtime between
server and client to push updates

1
import 'package:flutter/material.dart';
2
import 'package:stac/stac.dart';
3

4
void main() async {
5
  await Stac.initialize();
6
  runApp(const MyApp());
7
}
8

9
class MyApp extends StatelessWidget {
10
  const MyApp({super.key});
11

12
  @override
13
  Widget build(BuildContext context) {
14
    return MaterialApp(
15
      title: 'Welcome to Stac',
16
      theme: ThemeData.dark(),
17
      home: Stac.fromNetwork(
18
        context: context,
19
        request: StacNetworkRequest(
20
          url: 'https://stac.dev/jsons/welcome_stac.json',
21
        ),
22
      ),
23
    );
24
  }
25
}

1
{
2
  "type": "scaffold",
3
  "backgroundColor": "#16181a",
4
  "body": {
5
    "type": "padding",
6
    "padding": {
7
      "top": 80,
8
      "left": 24,
9
      "right": 24,
10
      "bottom": 24
11
    },
12
    "child": {
13
      "type": "column",
14
      "crossAxisAlignment": "start",
15
      "children": [
16
        {
17
          "type": "container",
18
          "width": 56,
19
          "height": 56,
20
          "decoration": {
21
            "borderRadius": 12
22
          },
23
          "clipBehavior": "hardEdge",
24
          "child": {
25
            "type": "image",
26
            "src": "https://pbs.twimg.com/profile_images/1886322776921042944/5Nveo4M2_400x400.png"
27
          }
28
        },
29
        {
30
          "type": "sizedBox",
31
          "height": 40
32
        },
33
        {
34
          "type": "image",
35
          "src": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/Welcome%20to.png"
36
        },
37
        {
38
          "type": "text",
39
          "data": "Stac Playground",
40
          "style": {
41
            "fontSize": 36,
42
            "fontWeight": "w600",
43
            "height": 1.3
44
          }
45
        },
46
        {
47
          "type": "sizedBox",
48
          "height": 32
49
        },
50
        {
51
          "type": "text",
52
          "data": "Stac is a Server-Driven UI (SDUI) framework for Flutter. Stac allows you to build beautiful cross-platform applications with JSON in real time.",
53
          "style": {
54
            "fontSize": 18,
55
            "fontWeight": "w400",
56
            "height": 1.5
57
          }
58
        },
59
        {
60
          "type": "sizedBox",
61
          "height": 100
62
        },
63
        {
64
          "type": "container",
65
          "height": 1,
66
          "widht": 1000,
67
          "color": "#10ffffff"
68
        },
69
        {
70
          "type": "sizedBox",
71
          "height": 24
72
        },
73
        {
74
          "type": "text",
75
          "data": "Follow us for more updates:",
76
          "style": {
77
            "fontSize": 18,
78
            "fontWeight": "w400",
79
            "height": 1.5,
80
            "color": "#60ffffff"
81
          }
82
        },
83
        {
84
          "type": "sizedBox",
85
          "height": 20
86
        },
87
        {
88
          "type": "column",
89
          "spacing": 20,
90
          "children": [
91
            {
92
              "type": "row",
93
              "spacing": 20,
94
              "children": [
95
                {
96
                  "type": "container",
97
                  "width": 44,
98
                  "height": 44,
99
                  "decoration": {
100
                    "borderRadius": 12
101
                  },
102
                  "clipBehavior": "hardEdge",
103
                  "child": {
104
                    "type": "image",
105
                    "src": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/github.png"
106
                  }
107
                },
108
                {
109
                  "type": "text",
110
                  "data": "github.com/StacDev",
111
                  "style": {
112
                    "fontSize": 18,
113
                    "fontWeight": "w500",
114
                    "height": 1.5
115
                  }
116
                }
117
              ]
118
            },
119
            {
120
              "type": "row",
121
              "spacing": 20,
122
              "children": [
123
                {
124
                  "type": "container",
125
                  "width": 44,
126
                  "height": 44,
127
                  "decoration": {
128
                    "borderRadius": 12
129
                  },
130
                  "clipBehavior": "hardEdge",
131
                  "child": {
132
                    "type": "image",
133
                    "src": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/x.png"
134
                  }
135
                },
136
                {
137
                  "type": "text",
138
                  "data": "x.com/stac_dev",
139
                  "style": {
140
                    "fontSize": 18,
141
                    "fontWeight": "w500",
142
                    "height": 1.5
143
                  }
144
                }
145
              ]
146
            },
147
            {
148
              "type": "row",
149
              "spacing": 20,
150
              "children": [
151
                {
152
                  "type": "container",
153
                  "width": 44,
154
                  "height": 44,
155
                  "decoration": {
156
                    "borderRadius": 12
157
                  },
158
                  "clipBehavior": "hardEdge",
159
                  "child": {
160
                    "type": "image",
161
                    "src": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/linkedin.png"
162
                  }
163
                },
164
                {
165
                  "type": "text",
166
                  "data": "/company/StacDev",
167
                  "style": {
168
                    "fontSize": 18,
169
                    "fontWeight": "w500",
170
                    "height": 1.5
171
                  }
172
                }
173
              ]
174
            }
175
          ]
176
        }
177
      ]
178
    }
179
  }
180
}

incredible
and great

: feature set

Real-Time
UI Updates

Real-Time UI Updates

Instantly update your app’s UI without app store approvals.

JSON-Based
Layouts

JSON-Based Layouts

Define and manage UI with server-controlled JSON structures.

Cross-Platform
Support

Cross-Platform Support

Works seamlessly across mobile, web, and desktop.

Dynamic Variables & State Management

Create flexible UIs that adapt to real-time data.

COMING SOON

Efficient Data
Caching

Efficient Data Caching

Optimize performance with smart caching mechanisms

COMING SOON

Stac Code Convert:
Dart to JSON

Stac Code Convert: Dart to JSON

Instantly convert Dart to JSON with Stac for effortless UI updates.

COMING SOON

Community

Our Commitment
towards our Community

We are dedicated to building and growing together, ensuring Stac thrives through collaboration, transparency, and community-driven innovation.

with our insane contributors :

Connect on Discord

Learning

Stac is Simple to Start
& Easy to Learn

Get Started

Docs

Stable Release 0.10

Build dynamic UIs, Gallery Widget and Real-time Push App updates.

Release Notes

Key Widgets in Stac

Learn about the various widgets, actions and styles provided by Stac.

View Docs

Blog

Introducing Stac — A Server Driven UI framework for Flutter

Build dynamic UIs and push app updates in seconds with JSON.

Mobile apps have existed for quite a long time since the launch of AppStore and PlayStore in 2008, until today when there are million..

Open Blog

Learning

Stac is Simple to Start
& Easy to Learn

Get Started

Docs

Stable Release 0.9

Build dynamic UIs, Gallery Widget and Real-time Push App updates.

Release Notes

Key Widgets in Stac

Learn about the various widgets, actions and styles provided by Stac.

View Docs

Blog

Introducing Stac — A Server Driven UI framework for Flutter

Build dynamic UIs and push app updates in seconds with JSON.

Mobile apps have existed for quite a long time since the launch of AppStore and PlayStore in 2008, until today when there are million..

Open Blog

Stay Connected on our Journey

Get the latest on releases, events, and exclusive goodies—no spam, just the good stuff!

Stac

Dev Suite

Server Driven UI
Framework for Flutter

How Stac works?

Our server driven approach lets us communicate in realtime between
server and client to push updates

incredible
and great

: feature set

Real-Time
UI Updates

Real-Time UI Updates

JSON-Based
Layouts

JSON-Based Layouts

Cross-Platform
Support

Cross-Platform Support

Dynamic Variables & State Management

Dynamic Variables & State Management

Efficient Data
Caching

Efficient Data Caching

Stac Code Convert:
Dart to JSON

Stac Code Convert: Dart to JSON

Our Commitment
towards our Community

Stac is Simple to Start
& Easy to Learn

Stable Release 0.10

Key Widgets in Stac

Introducing Stac — A Server Driven UI framework for Flutter

Stac is Simple to Start
& Easy to Learn

Stable Release 0.9

Key Widgets in Stac

Introducing Stac — A Server Driven UI framework for Flutter

Stay Connected on our Journey

How Stac works?

Our server driven approach lets us communicate in realtime between server and client to push updates

Real-TimeUI Updates

Real-Time UI Updates

JSON-BasedLayouts

JSON-Based Layouts

Cross-PlatformSupport

Cross-Platform Support

Dynamic Variables & State Management

Dynamic Variables & State Management

Efficient DataCaching

Efficient Data Caching

Stac Code Convert:Dart to JSON

Stac Code Convert: Dart to JSON

Our Commitmenttowards our Community

Stac is Simple to Start& Easy to Learn

Stable Release 0.10

Key Widgets in Stac

Introducing Stac — A Server Driven UI framework for Flutter

Stac is Simple to Start& Easy to Learn

Stable Release 0.9

Key Widgets in Stac

Introducing Stac — A Server Driven UI framework for Flutter

Stay Connected on our Journey

Our server driven approach lets us communicate in realtime between
server and client to push updates

Real-Time
UI Updates

JSON-Based
Layouts

Cross-Platform
Support

Efficient Data
Caching

Stac Code Convert:
Dart to JSON

Our Commitment
towards our Community

Stac is Simple to Start
& Easy to Learn

Stac is Simple to Start
& Easy to Learn