syntaxify 0.1.0-alpha.3

AST-based Flutter UI code generator with multi-style design system. Write components once, render in Material, Cupertino, or custom designs.

Syntaxify ⚡

AST-based Flutter UI Code Generator with Multi-Style Design System

Stop writing repetitive UI code. Define components once, render in any design system.

---

⚡ Quick Win: Generate Screens in Seconds

// Create meta/login.screen.dart
final loginScreen = ScreenDefinition(
  id: 'login',
  layout: AstNode.column(children: [
    AstNode.text(text: 'Welcome'),
    AstNode.textField(label: 'Email'),
    AstNode.button(label: 'Login', onPressed: 'handleLogin'),
  ]),
);

Run: dart run syntaxify build Get: Complete Flutter screen in lib/screens/login_screen.dart

No boilerplate. No repetition. Just results. ✨

---

👀 See It In Action

Check out the example app - A working Flutter app demonstrating all features with live style switching!

cd example && flutter run

---

🤔 Why Syntaxify?

The Problem: Flutter's Design System Scalability Crisis

Flutter developers face a fundamental dilemma when building production apps:

The Multi-Platform UI Duplication Problem:

• Material Design for Android
• Cupertino for iOS
• Custom designs for brand identity

Traditional approach means writing everything 3 times:

// You write this for EVERY component!
Widget buildButton() {
  if (Platform.isIOS) {
    return CupertinoButton(
      onPressed: onPressed,
      child: Text(label),
    );
  } else if (useCustom) {
    return CustomButton(
      onPressed: onPressed,
      label: label,
    );
  } else {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

Real-World Impact:

• 🏢 Large Apps: 100+ screens, 1000+ components
• 👥 Team Scale: Multiple developers, changing requirements
• 🔄 Maintenance Nightmare: "Change all buttons to rounded corners" = touching 500+ files
• 💸 Cost: "Switch from Material to Cupertino" = rewriting the entire app
• 🎨 Design Changes: "Our designer wants a custom look" = building everything from scratch

The Solution: Separation of WHAT and HOW

Syntaxify delivers on Flutter's original promise: "write once, run anywhere" - but for design systems.

With Syntaxify:

// Write once
AppButton(label: 'Click Me', onPressed: ...)

// Renders appropriately everywhere
AppTheme(style: MaterialStyle())   // Material on Android
AppTheme(style: CupertinoStyle())  // iOS-native on iPhone
AppTheme(style: NeoStyle())        // Custom brand design

Change your entire app's design system in one line:

// Before: Material Design
AppTheme(style: MaterialStyle(), child: MyApp())

// After: iOS-native Cupertino
AppTheme(style: CupertinoStyle(), child: MyApp())
// Zero component code changes needed!

---

🚀 Getting Started

1. Install

# pubspec.yaml
dev_dependencies:
  syntaxify: ^0.1.0-alpha.2

dart pub get

2. Initialize

dart run syntaxify init

3. Build

dart run syntaxify build

4. Use

import 'package:your_app/syntaxify/index.dart';

AppTheme(
  style: MaterialStyle(),  // or CupertinoStyle() or NeoStyle()
  child: MaterialApp(
    home: AppButton.primary(
      label: 'Hello Syntaxify!',
      onPressed: () => print('It works!'),
    ),
  ),
)

---

📦 What's Included

Components with Full Renderer Pattern

• AppButton - Primary, secondary, outlined variants
• AppText - Typography with 6 text styles
• AppInput - Text fields with validation

Design Styles

• MaterialStyle - Google Material Design 3
• CupertinoStyle - Apple iOS native
• NeoStyle - Modern neumorphic design

Screen Generation

• Define screens in .screen.dart files
• Generate complete Flutter screens
• Editable after generation - you own the code!

---

✨ Features

• AST-Based Generation - Type-safe, declarative UI definitions
• Renderer Pattern - Separates WHAT (behavior) from HOW (rendering)
• Multi-Style Support - Material, Cupertino, Neo
• Screen Generation - Generate editable screen scaffolds
• Design Tokens - Centralized styling with tokens
• Extensible - Create custom design styles

---

🗺️ Roadmap

v0.1.0 (Current)

• ✅ 3 components (Button, Text, Input)
• ✅ 3 design styles (Material, Cupertino, Neo)
• ✅ Screen generation

v0.2.0 (Next)

• 🔄 More components: Card, Badge, Avatar, Chip

v1.0.0 (Future)

• 🔮 Complete component library
• 🔮 VS Code extension

---

📚 Documentation

• Full README - Comprehensive guide
• API Reference - Component usage
• Design System - Renderer pattern

---

🤝 Contributing

See Developer Manual for architecture details.

📄 License

MIT License - See LICENSE

---

Built with ❤️ for Flutter developers

⭐ Star us on GitHub • 📦 pub.dev