Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added assets/login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 23 additions & 1 deletion examples/counter_example/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
# Counter Example

A counter example using Stac showcasing how to build a Custom Widget and Action in Stac.
A simple counter application using Stac Server-Driven UI, demonstrating how to build a Custom Widget and Action in Stac.

## What this demonstrates

- Creating a **custom widget scaler parser** that isn't included in the default Stac framework.
- Implementing a **custom action** to increment a counter natively.
- Connecting local Dart logic with server-driven layout definitions.

## How to run

1. Ensure you have Flutter installed.
2. Navigate to this directory:
```bash
cd examples/counter_example
```
3. Get dependencies:
```bash
flutter pub get
```
4. Run the app:
```bash
flutter run
```
32 changes: 21 additions & 11 deletions examples/movie_app/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
# movie_app
# Movie App Example

A new Flutter project.
A comprehensive example of building a full-featured application using the Stac Server-Driven UI framework. This movie application fetches data and UI layouts dynamically to display movie listings and details.

## Getting Started
## What this demonstrates

This project is a starting point for a Flutter application.
- Complex dynamic layouts using Stac components.
- Network data fetching combined with SDUI.
- Navigating between different server-driven screens.
- Global theming using the Stac theme system.

A few resources to get you started if this is your first Flutter project:
## How to run

- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)

For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
1. Ensure you have Flutter installed.
2. Navigate to this directory:
```bash
cd examples/movie_app
```
3. Get dependencies:
```bash
flutter pub get
```
4. Run the app:
```bash
flutter run
```
31 changes: 20 additions & 11 deletions examples/stac_gallery/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,25 @@
# stac_gallery
# Stac Gallery

A Stac gallery app to showcase all the Stac widgets
A gallery application built to showcase all the widgets and components available in the Stac Server-Driven UI framework. It acts as a live interactive catalog for developers.

## Getting Started
## What this demonstrates

This project is a starting point for a Flutter application.
- Real-world usage of every built-in Stac widget.
- Action handlers (navigation, dialogs, form submissions).
- Theming and responsive layouts purely driven by JSON.

A few resources to get you started if this is your first Flutter project:
## How to run

- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)

For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
1. Ensure you have Flutter installed.
2. Navigate to this directory:
```bash
cd examples/stac_gallery
```
3. Get dependencies:
```bash
flutter pub get
```
4. Run the app:
```bash
flutter run
```
189 changes: 160 additions & 29 deletions packages/stac/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,166 @@

# Stac

**Stac** is a **Server-Driven UI (SDUI) framework for Flutter** that allows you to build, update, and deliver dynamic user interfaces without redeploying your app.
Instead of hard-coding every widget in Flutter, you define your UI as **Stac Widgets** that render at runtime from JSON.

This approach separates your app's presentation layer from its business logic, enabling teams to:

- **Ship updates instantly.** Just update your StacWidgets and push them to Stac Cloud.
- **Feature Experimentation** (A/B testing, personalization, etc.) without new releases.
- **Maintain consistency** across platforms using a unified schema.
- **Empower non-developers** (like designers or PMs) to manage layout and content.

## Features

- 🚀 Instant updates: Ship UI without app store releases.
- 🧩 JSON‑driven UI: Define widgets in JSON; render natively.
- 📦 Dart to JSON: Write Stac widgets in Dart and deploy to Stac Cloud.
- 🎛 Actions & navigation: Control routes and API calls from the backend.
- 📝 Forms & validation: Built-in form state and validation rules.
- 🎨 Theming: Brand and layout via JSON with Stac Theme.
- 💾 Caching: Intelligent screen caching with configurable strategies.
- 🔌 Extensible: Add custom widgets, actions, and native integrations.
**Stac** is a **Server-Driven UI (SDUI) framework for Flutter**. It lets you build and update your app's UI on the fly, without waiting for app store reviews!
Instead of hard-coding everything in your app, you write your UI using **Stac's intuitive Dart DSL**. Your server then delivers this UI as a JSON payload, and Stac automatically renders it natively on the client at runtime.

Why use Stac?

- **Ship instantly:** Tweak your UI in Dart, push it to your server, and boom—your users see it immediately.
- **A/B testing made easy:** Try out different layouts or personalize the experience without rolling out a new app version.
- **Build once:** Keep your UI consistent across iOS, Android, and Web with a unified backend schema.
- **Move faster:** Let your backend dictate layouts directly without ever touching the client-side Flutter codebase.

## Features 📦

- 🚀 **Instant updates:** Push UI changes straight from your server. No app store waiting rooms.
- 💻 **Familiar Dart syntax:** Write your server UI using our purely Dart DSL. It feels just like writing traditional Flutter code!
- 🧩 **Native rendering:** Stac translates your server's payload into lightning-fast native Flutter widgets on the client.
- 🧱 **Prebuilt components:** Comes with a massive library of ready-to-use standard Flutter widgets.
- 🌐 **Network requests:** Trigger API calls and manage data directly from your server payload.
- 🧭 **Navigation:** Control routing, open dialogs, and trigger bottom sheets from the backend.
- 📝 **Forms & validation:** We handle the messy form state and validation for you.
- 🎨 **Dynamic theming:** Change colors, fonts, and layouts on the fly using `StacTheme`.
- 💾 **Smart caching:** Built-in screen caching so your app feels blazing fast, even on flaky networks.
- 🛠️ **Custom widgets:** Need a custom chart or native integration? Easily build and register your own UI components.

## Quick Start

It's super easy to get started. You just need to initialize Stac and tell it which screen to load.

### 1. Initialize Stac
Set up Stac in your app's `main.dart` and provide a `routeName` to fetch from your server.

```dart
import 'package:flutter/material.dart';
import 'package:stac/stac.dart';

// import 'package:my_app/default_stac_options.dart';

void main() async {
// Initialize Stac with optional custom configurations
await Stac.initialize(options: defaultStacOptions);

runApp(const MyApp());
}

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

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stac App',
// Pass a routeName to load your dynamic SDUI screen!
home: Stac(routeName: 'get_started'),
);
}
}
```

### 2. Write your UI
You can author your screens using Stac's Dart package. It feels just like writing normal Flutter code, but it compiles down to JSON!

<table width="100%">
<tr>
<td width="70%">

```dart
import 'package:stac_core/stac_core.dart';

import '../widgets/primary_button.dart';

@StacScreen(screenName: "loginScreen")
StacWidget loginScreen() {
return StacScaffold(
appBar: StacAppBar(
leading: StacIconButton(
onPressed: StacNavigator.pop(),
icon: StacIcon(
icon: StacIcons.chevron_left,
color: StacColors.onSurfaceVariant,
),
),
),
body: StacPadding(
padding: StacEdgeInsets.symmetric(horizontal: 20),
child: StacColumn(
crossAxisAlignment: StacCrossAxisAlignment.start,
children: [
StacRow(
crossAxisAlignment: StacCrossAxisAlignment.end,
children: [
StacText(
data: 'Sign in',
style: StacThemeData.textTheme.titleLarge,
),
StacSizedBox(width: 10),
StacExpanded(
child: StacDivider(
height: 20,
thickness: 1,
color: StacColors.black,
),
),
],
),
StacSizedBox(height: 32),
StacTextField(
decoration: StacInputDecoration(
labelText: 'Email',
labelStyle: StacThemeData.textTheme.bodyMedium,
),
),
StacSizedBox(height: 24),
StacTextField(
decoration: StacInputDecoration(
labelText: 'Password',
labelStyle: StacThemeData.textTheme.bodyMedium,
),
obscureText: true,
maxLines: 1,
),
StacSizedBox(height: 4),
StacTextButton(
onPressed: StacNavigator.pushStac('forgot_password_screen'),
child: StacText(data: 'Forgot password?'),
),
StacSpacer(),
primaryButton(
text: 'Proceed',
onPressed: StacNavigator.pushStac('home_screen'),
),
],
),
),
);
}

StacWidget primaryButton({
required String text,
required StacAction onPressed,
}) {
return StacPadding(
padding: StacEdgeInsets.only(top: 20, bottom: 48),
child: StacFilledButton(
onPressed: onPressed,
child: StacRow(
children: [
StacText(data: text),
StacSpacer(),
StacIcon(icon: StacIcons.arrow_forward, size: 20),
],
),
),
);
}
```
</td>
<td align="center" valign="center">
<img src="https://github.com/StacDev/stac/blob/dev/assets/login.png?raw=true" alt="Stac Form Screen" height="840" />
</td>
</tr>
</table>

## Documentation

Expand Down Expand Up @@ -71,12 +211,3 @@ This project is licensed under the MIT License - see the [LICENSE](/LICENSE) fil
</a>
</p>

[github_stars]: https://img.shields.io/github/stars/StacDev/stac
[github_stars_link]: https://github.com/StacDev/stac/stargazers
[license_badge]: https://img.shields.io/badge/license-MIT-blue.png
[license_link]: https://opensource.org/licenses/MIT
[stac_banner]: https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/stac_banner.png
[form_screen]: https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/form_screen_image.png
[divyanshu_github]: https://github.com/divyanshub024
[rahul_linkedin]: https://www.linkedin.com/in/bybisht
[stac_website]: https://stac.dev/
12 changes: 10 additions & 2 deletions packages/stac_cli/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
# stac_cli

Official CLI for managing Stac SDUI projects.
Official command-line interface for the [Stac](https://pub.dev/packages/stac) SDUI framework. Use this CLI to quickly initialize Stac configurations, build projects, log in to Stac Cloud, and manage deployments.

📚 **[Full CLI Documentation available at docs.stac.dev/cli](https://docs.stac.dev/cli)**

## Install

**macOS / Linux**
```bash
dart pub global activate --source path .
curl -fsSL https://raw.githubusercontent.com/StacDev/install/main/install.sh | bash
```

**Windows (PowerShell)**
```powershell
irm https://raw.githubusercontent.com/StacDev/install/main/install.ps1 | iex
```

## Quick start
Expand Down
9 changes: 6 additions & 3 deletions packages/stac_core/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
## stac_core
# Stac Core

A pure Dart package that provides the core functionalities and common interfaces for the [Stac](https://pub.dev/packages/stac).
[![pub package](https://img.shields.io/pub/v/stac_core.svg?label=stac_core&color=blue)](https://pub.dev/packages/stac_core)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

This package serves as the foundation for building server-driven UIs with Stac by defining core models, functionalities, and common interfaces that stac package depend upon.
A pure Dart package that provides the core functionalities and common interfaces for the [Stac](https://pub.dev/packages/stac) SDUI framework.

This package serves as the foundation for building server-driven UIs with Stac by defining core models, functionalities, and common interfaces that Stac packages depend upon.
3 changes: 3 additions & 0 deletions packages/stac_framework/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Stac Framework

[![pub package](https://img.shields.io/pub/v/stac_framework.svg?label=stac_framework&color=blue)](https://pub.dev/packages/stac_framework)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

The Stac Framework package contains the framework files for [Stac](https://github.com/StacDev/stac), such as StacParser and StacActionParser. These classes provide a simple way to create custom parsers for widgets and actions in Stac. This can be useful for extending the functionality of Stac or for implementing custom widgets and actions.

Here are some examples of how the Stac Framework package can be used:
Expand Down
3 changes: 3 additions & 0 deletions packages/stac_logger/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Stac Logger

[![pub package](https://img.shields.io/pub/v/stac_logger.svg?label=stac_logger&color=blue)](https://pub.dev/packages/stac_logger)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

A lightweight and reusable logging utility for the Stac framework. It switches between implementations—using Flutter's debugPrint on web/WASM platforms and the robust logger package on native platforms—ensuring optimal performance and compatibility across all environments.

## Getting started
Expand Down
2 changes: 1 addition & 1 deletion packages/stac_logger/analysis_options.yaml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
include: package:flutter_lints/flutter.yaml
include: package:lints/recommended.yaml

# Additional information about this file can be found at
# https://dart.dev/guides/language/analysis-options
5 changes: 4 additions & 1 deletion packages/stac_webview/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
# Stac Web View

A webView support for [Stac](https://pub.dev/packages/stac).
[![pub package](https://img.shields.io/pub/v/stac_webview.svg?label=stac_webview&color=blue)](https://pub.dev/packages/stac_webview)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

A WebView support package for [Stac](https://pub.dev/packages/stac).

## Usage

Expand Down