🚀 Introducing Stac — A Server Driven UI framework for Flutter

Mobile apps have existed for quite a long time since the launch of AppStore and PlayStore in 2008, until today when there are millions of apps out there. But in this time frame, it’s not only the number of apps that have changed. Apps have become much more dynamic, personalized, and smart.

Yet, one thing hasn’t changed: how we publish mobile apps.

It’s still the same tedious process. You push updates to the store, wait for approval (sometimes praying it doesn’t get stuck in review limbo), and then hope users actually bother to update their app. Oh, and if there’s a bug? Welcome to emergency patch territory. sigh 😮‍💨

What if you could escape the tedious app update cycle entirely? Imagine sending updates on the fly and steering the UI directly from the server — no delays, no approvals. That’s exactly what Server-Driven UI is all about.

To understand Server-Driven UI, let’s first talk about the traditional approach, i.e. Client-Driven UI.

What is Client-Driven UI?

In the traditional Client-Driven UI approach, the app’s UI is tightly coupled with its codebase. Essentially, the client (your app) handles everything — UI layouts, business logic, and rendering. Want to change how a button looks or add a new feature? You’ll need to update the app’s code, test it, and then push the update to the app stores. And then comes the waiting game: store approvals followed by users actually updating their apps. Sound familiar? Yeah, it’s exhausting.

While this approach works, it has some glaring limitations:

• Slow Update Cycles: Even minor UI tweaks require a full update process.
• Scalability Issues: Managing multiple platforms becomes a headache as each app has its own codebase.
• Lack of Flexibility: Changes aren’t instantaneous — you’re at the mercy of app store approvals and user behavior.

What is Server-Driven UI (SDUI)?

Server-Driven UI (SDUI) is a paradigm where the server drives the UI, rather than the UI being hardcoded in the app itself. Instead of the client app determining what to render, it primarily focuses on how to render the components defined by the server.

Think of it like a browser rendering a website. Your browser doesn’t know ahead of time what content it’s going to display — it just knows how to interpret and render tags. Similarly, in SDUI, the app is equipped to render widgets or components sent by the server, making the UI dynamic, flexible, and completely server-controlled.

Here’s how does Server-Driven UI works:

1. The server defines the app’s UI (typically in a lightweight format like JSON).
2. The client (your app) receives these definitions and renders the UI dynamically.
3. Any changes to the UI? Just update the server, and the app instantly reflects them — no app updates required!

But building Server-Driven UI is hard — you need to support countless Flutter widgets, manage complex navigation, handle network calls, and efficiently manage state, all while ensuring seamless compatibility and top-notch performance. That’s exactly where Stac saves the day.

Introducing Stac 🚀

Meet Stac (formerly Mirai), the powerful Server-Driven UI (SDUI) framework built specifically for Flutter. With Stac, you can build stunning, cross-platform applications dynamically, using JSON to define your UI in real time.

Installing Stac

To get started with Stac, follow the installation instructions below:

1. Add the Stac dependency to your pubspec.yaml file:

Run the following command:

1
flutter pub add stac

This will add Stac to your package’s pubspec.yaml (and run an implicit flutter pub get):

Alternatively, you can manually add the dependency to your app from within your pubspec.yaml:

1
dependencies:
2
  stac: ^<latest-version>

2. Run the following command in your terminal to install the package:

1
flutter pub get

3. Import the Stac package in your Dart file:

1
import 'package:stac/stac.dart';

Now, you’re ready to start using Stac in your Flutter project.

Initializing Stac

In the main function, initialize Stac to set up the necessary configurations, and prepare your app for rendering UI from JSON.

1
void main() async {
2
  await Stac.initialize();
3
  runApp(const MyApp());
4
}

That’s it. Now that your app is SDUI packed you can use Stac.fromJson(), Stac.fromAsset() or Stac.fromNetwork() method to render UI.

Defining Stac JSONs

Stac JSONs are designed to feel familiar, especially if you’ve worked with Flutter’s widget structure. In fact, Stac JSONs are essentially the JSON equivalent of Flutter widgets — they mirror the same hierarchy and logic, just in a different format.

Here’s the magic: if you can write a Flutter widget tree, you can easily define a Stac JSON. Let’s compare:

Flutter Widget:

1
Column(
2
  children: [
3
    Text("Hello, Stac!"),
4
    ElevatedButton(
5
      onPressed: () => print("Button Pressed"),
6
      child: Text("Click Me"),
7
    ),
8
  ],
9
)

Stac JSON Equivalent:

1
{
2
  "type": "column",
3
  "children": [
4
    {
5
      "type": "text",
6
      "data": "Hello, Stac!"
7
    },
8
    {
9
      "type": "elevatedButton",
10
      "onPressed": {
11
          "action": "print",
12
          "message": "Button Pressed"
13
        },
14
        "child": {
15
          "type": "text",
16
          "data": "Click Me"
17
        }
18
    }
19
  ]
20
}

See the resemblance? It’s like translating your Flutter widgets into JSON. The structure remains intuitive, so you’re not learning a whole new paradigm — you’re just writing Flutter in JSON form.

Key Benefits of Stac

1. Instant UI Updates : Skip the hassle of app updates and store approvals. With SDUI, changes made on the server go live instantly, ensuring your app stays up-to-date at all times.
2. Personalization Made Easy: Deliver unique, tailored experiences to users by serving different UIs based on preferences, behaviors, or demographics — all without touching client-side code.
3. Simplified Maintenance: Manage your UI logic centrally on the server. This reduces the complexity of maintaining multiple app versions and keeps updates consistent across platforms.
4. Effortless A/B Testing: Experiment with multiple UI versions in real-time by serving variant payloads directly from the server. Gain insights and iterate faster without additional development cycles.
5. Reduced Development Overhead: Focus your efforts on backend logic while the server handles UI updates. This minimizes client-side development, making your workflow faster and more efficient.

Form screen example with Stac

Let’s see Stac in action by building a simple Sign-In Screen.

Server-Side JSON Definition

Here’s how the server defines the Sign-In screen in Stac JSON:

1
{
2

3
  "type": "scaffold",
4
  "backgroundColor": "#F4F6FA",
5
  "appBar": {
6
    "type": "appBar",
7
    "backgroundColor": "#00FFFFFF",
8
  },
9
  "body": {
10
    "type": "form",
11
    "child": {
12
      "type": "padding",
13
      "padding": {"left": 24, "right": 24},
14
      "child": {
15
        "type": "column",
16
        "crossAxisAlignment": "start",
17
        "children": [
18
          {
19
            "type": "text",
20
            "data": "Sign in",
21
            "style": {"fontSize": 24, "fontWeight": "w800", "height": 1.3}
22
          },
23
          {"type": "sizedBox", "height": 24},
24
          {
25
            "type": "textFormField",
26
            "id": "email",
27
            "autovalidateMode": "onUserInteraction",
28
            "validatorRules": [
29
              {"rule": "isEmail", "message": "Please enter a valid email"}
30
            ],
31
            "style": {"fontSize": 16, "fontWeight": "w400", "height": 1.5},
32
            "decoration": {
33
              "hintText": "Email",
34
              "filled": true,
35
              "fillColor": "#FFFFFF",
36
              "border": {
37
                "type": "outlineInputBorder",
38
                "borderRadius": 8,
39
                "color": "#24151D29"
40
              }
41
            }
42
          },
43
          {"type": "sizedBox", "height": 16},
44
          {
45
            "type": "textFormField",
46
            "autovalidateMode": "onUserInteraction",
47
            "validatorRules": [
48
              {"rule": "isPassword", "message": "Please enter a valid password"}
49
            ],
50
            "obscureText": true,
51
            "maxLines": 1,
52
            "style": {"fontSize": 16, "fontWeight": "w400", "height": 1.5},
53
            "decoration": {
54
              "hintText": "Password",
55
              "filled": true,
56
              "fillColor": "#FFFFFF",
57
              "border": {
58
                "type": "outlineInputBorder",
59
                "borderRadius": 8,
60
                "color": "#24151D29"
61
              }
62
            }
63
          },
64
          {"type": "sizedBox", "height": 32},
65
          {
66
            "type": "filledButton",
67
            "style": {
68
              "backgroundColor": "#151D29",
69
              "shape": {"borderRadius": 8}
70
            },
71
            "onPressed": {
72
              "actionType": "none",
73
            },
74
            "child": {
75
              "type": "padding",
76
              "padding": {"top": 14, "bottom": 14, "left": 16, "right": 16},
77
              "child": {
78
                "type": "row",
79
                "mainAxisAlignment": "spaceBetween",
80
                "children": [
81
                  {"type": "text", "data": "Proceed"},
82
                  {
83
                    "type": "icon",
84
                    "iconType": "material",
85
                    "icon": "arrow_forward"
86
                  }
87
                ]
88
              }
89
            }
90
          },
91
          {"type": "sizedBox", "height": 16},
92
          {
93
            "type": "align",
94
            "alignment": "center",
95
            "child": {
96
              "type": "textButton",
97
              "onPressed": {
98
                "actionType": "none",
99
              },
100
              "child": {
101
                "type": "text",
102
                "data": "Forgot password?",
103
                "style": {
104
                  "fontSize": 15,
105
                  "fontWeight": "w500",
106
                  "color": "#4745B4"
107
                }
108
              }
109
            }
110
          },
111
          {"type": "sizedBox", "height": 8},
112
          {
113
            "type": "align",
114
            "alignment": "center",
115
            "child": {
116
              "type": "text",
117
              "data": "Don't have an account? ",
118
              "style": {
119
                "fontSize": 15,
120
                "fontWeight": "w400",
121
                "color": "#000000"
122
              },
123
              "children": [
124
                {
125
                  "data": "Sign Up for BettrDo",
126
                  "style": {
127
                    "fontSize": 15,
128
                    "fontWeight": "w500",
129
                    "color": "#4745B4"
130
                  }
131
                }
132
              ]
133
            }
134
          }
135
        ]
136
      }
137
    }
138
  }
139
}

Client-Side Implementation

Here’s how to render the server-defined UI on the client side using Stac.fromNetwork method.

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: 'Stac App',
16
      theme: ThemeData(),
17
      home: Stac.fromNetwork(
18
        request: StacNetworkRequest(
19
          url: 'https://example.com/ui.json',
20
        ),
21
        context: context,
22
      ),
23
    );
24
  }
25
}

With just a few lines of code and a JSON definition, you’ve got a dynamic sign-in screen powered by Stac. It’s that simple! 🚀

What’s Next?

Ready to explore Stac? Head over to our GitHub to dive into the code, check out our detailed docs to get started, and experiment with dynamic UIs in real-time using the Stac Playground. It’s everything you need to build smarter, faster, and better apps with Stac!

Stay tuned for more in-depth blogs on Stac, where we’ll explore advanced features, best practices, and real-world examples to help you unlock its full potential! 🌟