QuicUI Firebase Backend v1.0.3 #

Professional Firebase backend plugin for QuicUI - Server-Driven UI (SDUI) framework for Flutter.

Build dynamic, real-time Flutter UIs entirely from JSON stored in Firestore. No code changes needed - just update your screen definitions and watch your app UI change instantly across all devices! 🚀

☕ Buy Me a Coffee #

If QuicUI Firebase saves you time and helps your project, consider supporting the development:

Your support helps fund:

• 🚀 New features and improvements
• 📚 Documentation and examples
• 🐛 Bug fixes and maintenance
• ✨ Performance optimizations
• 📞 Dedicated support and guidance
• 🎯 Long-term project sustainability

Thank you for being awesome! 💜

✨ Key Features #

🎨 Server-Driven UI (SDUI)

• Define entire screen layouts as JSON in Firestore
• Update UI without rebuilding or redeploying the app
• Real-time UI changes across all connected devices
• Fully integrated with QuicUI DataSource interface

🔄 Real-Time Updates

• Live screen synchronization using Firestore listeners
• Push-based updates (server → client)
• Automatic refresh when screens change
• Efficient streaming with no polling

📱 Offline-First

• Queue changes while offline
• Automatic sync when connectivity returns
• Intelligent conflict resolution
• Zero data loss guaranteed

📋 Form Handling

• Capture form submissions automatically
• Store submissions in Firestore
• Metadata tracking (timestamp, device, locale)
• Analytics-ready data

� Device Tracking

• Monitor active devices using the app
• Track device metadata (OS, version, model)
• Analytics and debugging insights

🔒 Production-Ready

• Type-safe Dart code with null safety
• Comprehensive error handling
• Firebase security rules included
• 305+ passing tests
• Zero external package dependencies beyond Firebase

🚀 Quick Start (5 Minutes) #

1. Install #

dependencies:
  flutter:
    sdk: flutter
  quicui: ^1.0.0
  quicui_firebase: ^1.0.1
  firebase_core: ^23.0.0
  cloud_firestore: ^4.15.0

2. Initialize Firebase #

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Generate options: flutterfire configure

3. Initialize QuicUI Firebase #

import 'package:quicui_firebase/quicui_firebase.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  // Initialize backend
  final dataSource = FirebaseDataSourceV2(appId: 'my-app');
  await dataSource.connect();
  
  runApp(MyApp(dataSource: dataSource));
}

4. Render Dynamic UI from JSON #

The key concept: Store screen definitions as JSON in Firestore. QuicUI renders them. Done! ✨

class HomeScreen extends StatefulWidget {
  final FirebaseDataSourceV2 dataSource;
  const HomeScreen({required this.dataSource});
  
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Screen? _screen;
  late StreamSubscription _subscription;
  
  @override
  void initState() {
    super.initState();
    // Subscribe to real-time screen updates
    _subscription = widget.dataSource.subscribeToScreen(
      screenId: 'home-screen',
    ).listen((event) {
      if (event.type == RealtimeEventType.updated) {
        // When JSON in Firestore changes, UI rebuilds!
        setState(() => _screen = event.data);
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    if (_screen == null) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }
    
    // Parse JSON and render with QuicUI
    final screenJson = jsonDecode(_screen!.json);
    return UIRenderer().renderScreen(screenJson);
  }
  
  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }
}

5. Store Screen JSON in Firestore #

Firestore Path: apps/my-app/ui_screens/home-screen

Document Content:
{
  "id": "home-screen",
  "name": "Home",
  "json": {
    "type": "container",
    "padding": "16",
    "children": [
      {
        "type": "text",
        "value": "Welcome to QuicUI!",
        "fontSize": "24",
        "fontWeight": "bold"
      },
      {
        "type": "button",
        "label": "Get Started",
        "onTap": "navigate:dashboard"
      }
    ]
  },
  "version": 1,
  "metadata": {
    "createdAt": "2025-10-31T10:00:00Z",
    "updatedAt": "2025-10-31T10:00:00Z"
  }
}

Update this JSON in Firestore → Your app UI changes instantly on all devices! 🎉

� API Overview #

Main: FirebaseDataSourceV2 #

// Initialize
final dataSource = FirebaseDataSourceV2(appId: 'my-app');
await dataSource.connect();

// Fetch screens
final screen = await dataSource.fetchScreen(screenId: 'home-screen');
final allScreens = await dataSource.fetchScreens();

// Real-time updates (KEY FEATURE!)
dataSource.subscribeToScreen(screenId: 'home-screen').listen((event) {
  if (event.type == RealtimeEventType.updated) {
    // UI updates automatically when Firestore JSON changes!
  }
});

// Offline support
final pending = await dataSource.getPendingItems();
final result = await dataSource.syncData();

await dataSource.disconnect();

12 Core Methods #

🏗️ Firestore Schema #

All data with app isolation:

firestore/
└── apps/{app_id}/
    ├── ui_screens/          ← Screen JSON definitions
    │   └── {screen_id}/
    │       ├── name
    │       ├── json         ← YOUR UI DEFINITION!
    │       ├── version
    │       └── metadata
    ├── app_state_sync/      ← Offline queue
    ├── form_submissions/    ← Form data
    └── registered_devices/  ← Device tracking

Key insight: The json field stores your UI. Update it → UI changes instantly! 🎨

See FIRESTORE_SCHEMA.md for complete details.

📚 Documentation #

• Getting Started - Complete setup guide
• API Reference - All 12 methods documented
• Firestore Schema - Database structure
• Examples - Real-world code examples
• Migration Guide - Upgrade from v1.0.0

💡 Real-Time Dashboard Example #

Store this in Firestore at apps/my-app/ui_screens/dashboard:

{
  "type": "container",
  "padding": "16",
  "children": [
    {
      "type": "text",
      "value": "Live Dashboard",
      "fontSize": "24",
      "fontWeight": "bold"
    },
    {
      "type": "container",
      "direction": "row",
      "children": [
        {
          "type": "card",
          "child": {
            "type": "text",
            "value": "Users: 1,234"
          }
        },
        {
          "type": "card",
          "child": {
            "type": "text",
            "value": "Revenue: $45K"
          }
        }
      ]
    }
  ]
}

Update these numbers in Firestore → Dashboard updates instantly on all devices! 📊

🔧 Requirements #

• Flutter: >=3.0.0
• Dart: >=3.0.0
• firebase_core: ^23.0.0
• cloud_firestore: ^4.15.0
• quicui: ^1.0.0

� Supported Platforms #

🎯 When to Use QuicUI Firebase #

✅ Use for:

• Dynamic, frequently-changing UIs
• Multi-platform app consistency
• A/B testing without builds
• Content management without dev team
• Real-time feature toggles
• Admin dashboards

❌ Not ideal for:

• Offline-only apps
• Complex custom widgets
• Performance-critical animations

📊 Comparison with Supabase #

Both backends work great with QuicUI!

🔒 Security #

Included Firebase Security Rules:

rules_version = '2';
service cloud.firestore {
  match /apps/{appId} {
    allow read: if request.auth.uid != null;
    match /{subcollection=**} {
      allow read: if request.auth.uid != null;
      allow write: if request.auth.uid != null;
    }
  }
}

Customize for your security requirements.

📱 Offline Support #

Changes made offline are automatically:

1. Queued locally
2. Synced when connectivity returns
3. Conflict-resolved (server wins by default)
4. Tracked for analytics

Users never lose their work! 💪

� Testing #

flutter test

305+ tests included covering:

• Real-time subscriptions
• Offline operations
• Sync conflicts
• Device tracking
• Error scenarios

📝 License #

MIT License - See LICENSE

🤝 Support #

• 🐛 Report Issues
• 💬 Discussions
• 📖 Docs

🎓 Best Practices #

1. Unsubscribe - Always cancel subscriptions in dispose()
2. Error Handling - Wrap operations in try-catch
3. Offline Ready - Assume operations may be queued
4. Device Tracking - App automatically registers device
5. Security Rules - Customize Firestore rules for your needs
6. Connection State - Check isConnected() before operations

☕ Buy Me a Coffee #

Your support helps keep QuicUI Firebase thriving and enables faster development of new features!

Thank you for being part of the QuicUI community! 🙏

QuicUI Firebase v1.0.3 - Server-Driven UI Backend for Flutter

Status: ✅ Production Ready | ✅ 305+ Tests | ✅ Complete Docs

🎉 Store JSON, render UIs, change everything without rebuilding!

📦 pub.flutter-io.cn | 🔗 GitHub | 📚 QuicUI