QuicUI - Server-Driven UI Framework for Flutter #

QuicUI is a powerful Server-Driven UI (SDUI) framework for Flutter that enables you to build, update, and deliver dynamic user interfaces without redeploying your app. Define your UI as JSON and render it natively at runtime.

🚀 Features #

Instant Updates: Ship UI changes without App Store/Play Store approval
JSON-Driven: Define widgets in JSON, render natively in Flutter
Dart to JSON: Convert Flutter widgets to JSON and deploy dynamically
Dynamic Navigation: Control routes and API calls from the backend
Form Management: Server-side forms with built-in validation
Dynamic Theming: Update branding and styles in real-time
Offline Support: Lightning-fast local database (ObjectBox) for offline-first apps
Extensible: Custom widgets, actions, and native integrations
A/B Testing: Built-in support for feature flags and personalization
Cross-Platform: iOS, Android, Web, Windows, macOS, Linux

📦 What's New #

v0.0.1-planning (October 2025)

📋 Comprehensive implementation plan
🏗️ Complete architecture documentation
💾 Advanced local storage strategy
🛣️ 7-week development roadmap
✨ Quick start guide with examples

🎯 Quick Start #

Installation #

flutter pub add quicui

Basic Usage #

import 'package:quicui/quicui.dart';

void main() async {
  await QuicUIManager.initialize();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: QuicUIScreen(
        jsonData: '''
        {
          "type": "container",
          "properties": {"padding": "16"},
          "child": {
            "type": "text",
            "properties": {"text": "Hello QuicUI!"}
          }
        }
        ''',
      ),
    );
  }
}

📚 Documentation #

Getting Started #

Quick Start Guide - 5-minute setup guide with examples
Implementation Plan - Detailed 7-week roadmap and architecture

Technical Documentation #

Architecture Guide - System design and component structure
Database Strategy - ObjectBox integration and local storage
Development Roadmap - Phase-by-phase breakdown with milestones

Example Applications #

See /example folder for:

Simple text and button rendering
Form with validation
Dynamic lists from API
Conditional UI rendering
Theme switching
Offline mode

🏗️ Architecture Overview #

Layered Architecture #

┌─────────────────────────────┐
│   Presentation Layer (UI)   │
│  Widgets, Factory, Rendering│
└─────────────────────────────┘
              ↓
┌─────────────────────────────┐
│ Business Logic Layer        │
│ State, Forms, Actions       │
└─────────────────────────────┘
              ↓
┌─────────────────────────────┐
│   Data Layer                │
│ API, Database, Cache        │
└─────────────────────────────┘

Core Components #

Component	Purpose
Widget Factory	Convert JSON to Flutter widgets
JSON Parser	Parse and validate JSON schemas
State Manager	Centralized reactive state
Action Executor	Handle navigation, API, events
Form System	Build & validate forms server-side
Local DB (ObjectBox)	Fast, persistent local storage
Theme Manager	Dynamic runtime theming
Sync Manager	Offline-first sync strategy

🎨 Supported Widgets #

Layout Widgets #

Container, Column, Row, Stack, Center
Scaffold, AppBar, BottomNav, Drawer
ListView, GridView, SingleChildScrollView

Input Widgets #

TextField, Checkbox, Radio, DropDown
Switch, DatePicker, FilePicker

Display Widgets #

Text, Image, Icon, Badge, Chip
Card, Dialog, SnackBar

Advanced Widgets #

Conditional (if/else)
Loop (dynamic lists)
Form (with validation)
Custom (extensible)

📝 JSON Schema Example #

Simple Screen #

{
  "type": "scaffold",
  "appBar": {
    "type": "appbar",
    "title": "Welcome"
  },
  "body": {
    "type": "column",
    "properties": {"padding": "16"},
    "children": [
      {
        "type": "text",
        "properties": {
          "text": "Hello QuicUI",
          "fontSize": 24,
          "fontWeight": "bold"
        }
      },
      {
        "type": "button",
        "properties": {"label": "Click Me"},
        "onPressed": {
          "type": "api",
          "method": "POST",
          "url": "/api/action",
          "onSuccess": {"type": "showSnackBar", "message": "Success!"}
        }
      }
    ]
  }
}

Form with Validation #

{
  "type": "form",
  "formId": "contact_form",
  "fields": [
    {
      "type": "textfield",
      "fieldName": "name",
      "label": "Full Name",
      "validators": [
        {"type": "required", "message": "Name is required"},
        {"type": "minLength", "value": 2}
      ]
    },
    {
      "type": "textfield",
      "fieldName": "email",
      "label": "Email",
      "validators": [
        {"type": "required"},
        {"type": "email"}
      ]
    }
  ],
  "submitAction": {
    "type": "api",
    "method": "POST",
    "url": "/api/contact",
    "body": {"name": "${name}", "email": "${email}"}
  }
}

💾 Local Storage (ObjectBox) #

QuicUI uses ObjectBox for blazingly fast local storage:

⚡ Sub-millisecond queries (0.2ms avg)
🔒 ACID transactions for data integrity
📦 50x faster than SQLite for typical operations
🔄 Built for sync scenarios
🔐 Optional encryption support

// Cache UI responses
await QuicUIManager.cache('home', jsonData);

// Retrieve from cache
final cached = await QuicUIManager.getCache('home');

// Offline support with automatic sync
await QuicUIManager.syncOfflineChanges();

🔧 State Management #

// Access global state
Consumer<QuicState>(
  builder: (context, state, _) {
    return Text(state.get('userName') ?? 'Guest');
  },
)

// Update state
Provider.of<QuicState>(context, listen: false)
  .set('userName', 'John Doe');

// Listen to events
state.on('userLoggedIn', (data) {
  print('User logged in: $data');
});

🎨 Dynamic Theming #

// Define theme as JSON
final theme = {
  "colors": {
    "primary": "#6366F1",
    "secondary": "#EC4899"
  },
  "typography": {
    "heading": {"fontSize": 24, "fontWeight": "bold"}
  }
};

// Apply dynamically at runtime
Provider.of<ThemeManager>(context, listen: false)
  .setTheme(jsonEncode(theme));

🧪 Testing #

QuicUI includes comprehensive testing utilities:

// Unit tests for JSON parsing
test('Parse simple widget', () {
  final json = '{"type":"text","properties":{"text":"Hello"}}';
  final widget = QuicWidget.fromJson(jsonDecode(json));
  expect(widget.type, equals('text'));
});

// Widget tests
testWidgets('Render QuicText', (tester) async {
  await tester.pumpWidget(
    MaterialApp(home: Scaffold(body: QuicText(text: 'Hello')))
  );
  expect(find.text('Hello'), findsOneWidget);
});

📊 Performance #

Metric	Target	Status
Widget render	< 100ms	✅ Target
DB query	< 10ms	✅ Target (ObjectBox)
Cache hit	< 1ms	✅ Target
Form validation	< 50ms	✅ Target
Network request	< 500ms	✅ Target

🚀 Development Roadmap #

Phase 1-2: Foundation & Widgets (Weeks 1-3) #

Core models and JSON parser
Widget factory and all core widgets
Basic rendering engine

Phase 3-4: State & Forms (Weeks 3-5) #

State management system
Action execution engine
Complete form system

Phase 5-7: Storage, Theming & Polish (Weeks 5-7) #

ObjectBox integration
Sync mechanism
Dynamic theming system
Testing & documentation

Target Release: End of Week 7 (v1.0 production-ready)

See ROADMAP.md for detailed timeline.

🔌 Extensibility #

Custom Widgets #

class CustomWidgetRegistry {
  static void register(String type, WidgetBuilder builder) {
    // Register custom widget
  }
}

Custom Actions #

class CustomActionHandler {
  static void register(String type, ActionHandler handler) {
    // Handle custom actions
  }
}

Custom Validators #

class ValidatorRegistry {
  static void register(String type, ValidatorFn validator) {
    // Custom validation logic
  }
}

🔒 Security #

✅ JSON schema validation prevents injection
✅ Encrypted local storage (optional)
✅ HTTPS-only API communication
✅ Request signing and verification
✅ Sandbox for custom code execution

📱 Platform Support #

Platform	Status	Min Version
iOS	✅ Full	11.0
Android	✅ Full	5.0 (API 21)
Web	✅ Full	Modern browsers
Windows	✅ Full	10+
macOS	✅ Full	10.13+
Linux	✅ Full	Ubuntu 18.04+

📦 Dependencies #

Core Dependencies #

flutter_bloc: ^9.0.0 - State management (BLoC pattern)
equatable: ^2.0.5 - Value equality
dio: ^5.7.0 - HTTP client
objectbox: ^4.1.1 - Local database
json_annotation: ^4.8.1 - JSON serialization

See pubspec.yaml for complete list.

📖 Examples #

Complete example applications are available in the /example folder:

Basic text and button rendering
Form with validation
API integration
List rendering
Theme switching
Offline support
A/B testing

🤝 Contributing #

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

How to Contribute #

Fork the repository
Create a feature branch
Make your changes with tests
Submit a pull request

🐛 Issue Reporting #

Found a bug? Please report it on GitHub with:

Minimal reproducible example
Flutter/Dart version
Platform details
Relevant logs

📞 Support #

💬 Discord Community - Join our community
📧 Email: support@quicui.dev
📚 Documentation
💡 Discussion Forum

📜 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments #

Inspired by:

Stac - Server-Driven UI inspiration
Flutter community and best practices
Open-source SDUI pioneers

🚀 What's Next? #

Review the Implementation Plan
Read the Architecture Guide
Follow the Quick Start
Check the Development Roadmap

Made with ❤️ by the QuicUI team

⭐ If you find QuicUI useful, please give it a star on GitHub!

quicui 1.0.0 quicui: ^1.0.0 copied to clipboard

Metadata