diff --git a/assets/login.png b/assets/login.png new file mode 100644 index 000000000..a92da6bbc Binary files /dev/null and b/assets/login.png differ diff --git a/examples/counter_example/README.md b/examples/counter_example/README.md index 92d13d7e3..09fce75db 100644 --- a/examples/counter_example/README.md +++ b/examples/counter_example/README.md @@ -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 + ``` diff --git a/examples/movie_app/README.md b/examples/movie_app/README.md index 681d9a021..015d78c6e 100644 --- a/examples/movie_app/README.md +++ b/examples/movie_app/README.md @@ -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 + ``` diff --git a/examples/stac_gallery/README.md b/examples/stac_gallery/README.md index 3d1300aa6..1f87114a5 100644 --- a/examples/stac_gallery/README.md +++ b/examples/stac_gallery/README.md @@ -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 + ``` diff --git a/packages/stac/README.md b/packages/stac/README.md index 792214d71..8e4a8f7e6 100644 --- a/packages/stac/README.md +++ b/packages/stac/README.md @@ -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! + + + + + + +
+ +```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), + ], + ), + ), + ); +} +``` + + Stac Form Screen +
## Documentation @@ -71,12 +211,3 @@ This project is licensed under the MIT License - see the [LICENSE](/LICENSE) fil

-[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/ diff --git a/packages/stac_cli/README.md b/packages/stac_cli/README.md index 02f9ba5fd..f0ef2a5d1 100644 --- a/packages/stac_cli/README.md +++ b/packages/stac_cli/README.md @@ -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 diff --git a/packages/stac_core/README.md b/packages/stac_core/README.md index 65dbef334..97c303e85 100644 --- a/packages/stac_core/README.md +++ b/packages/stac_core/README.md @@ -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. \ No newline at end of file +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. \ No newline at end of file diff --git a/packages/stac_framework/README.md b/packages/stac_framework/README.md index 11513dd6c..99d2db755 100644 --- a/packages/stac_framework/README.md +++ b/packages/stac_framework/README.md @@ -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: diff --git a/packages/stac_logger/README.md b/packages/stac_logger/README.md index 995830bb6..022763178 100644 --- a/packages/stac_logger/README.md +++ b/packages/stac_logger/README.md @@ -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 diff --git a/packages/stac_logger/analysis_options.yaml b/packages/stac_logger/analysis_options.yaml index a5744c1cf..12e713abf 100644 --- a/packages/stac_logger/analysis_options.yaml +++ b/packages/stac_logger/analysis_options.yaml @@ -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 diff --git a/packages/stac_webview/README.md b/packages/stac_webview/README.md index 1bf36f6b2..df1505d92 100644 --- a/packages/stac_webview/README.md +++ b/packages/stac_webview/README.md @@ -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