Website • Console • Quickstart • Documentation • Community & Support • GitHub
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.
- 🚀 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.
It's super easy to get started. You just need to initialize Stac and tell it which screen to load.
Set up Stac in your app's main.dart and provide a routeName to fetch from your server.
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'),
);
}
}You can author your screens using Stac's Dart package. It feels just like writing normal Flutter code, but it compiles down to JSON!
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),
],
),
),
);
} |
|
- 📚 Full Documentation – Complete guides and API reference
- 🚀 Quick Start – Get up and running in minutes
- 🛠️ Stac CLI – Command-line tools for development
- 🎛️ Stac Console – Web interface for managing your app
- 🤝 Contributing – Help build Stac
This project is licensed under the MIT License - see the LICENSE file for details.
- 💬 Discord – Chat with the community and get help
- 🐙 GitHub – Report issues and contribute
- 🐦 X – Follow us for updates
Developed with 💙 by the Stac team and our amazing community
