▂▄▓▄▂         

██████╗  ██████╗███████╗██╗     ██╗ ██████╗ ██╗  ██╗████████╗
██╔══██╗██╔════╝██╔════╝██║     ██║██╔════╝ ██║  ██║╚══██╔══╝
██║  ██║██║     █████╗  ██║     ██║██║  ███╗███████║   ██║   
██║  ██║██║     ██╔══╝  ██║     ██║██║   ██║██╔══██║   ██║   
██████╔╝╚██████╗██║     ███████╗██║╚██████╔╝██║  ██║   ██║   
╚═════╝  ╚═════╝╚═╝     ╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   

DCFlight

A cross-platform mobile framework that renders actual native UI using a declarative component architecture. Built on the Flutter engine for Dart runtime, DCFlight provides direct native rendering - no platform views and no absurd abstractions.

🚀 What is DCFlight?

DCFlight is a framework that renders actual native UI (UIKit on iOS, Android Views on Android) using a declarative component system written in Dart. It diverges from Flutter's abstraction for UI rendering and renders the root view that DCFlight depends on to render native UI. No platform views and no absurd abstractions. As a bonus, you can still render a Flutter Widget by using the WidgetToDCFAdaptor without impacting performance.

• ✅ True Native Performance - Direct native UI rendering, no platform views
• ✅ Declarative Components - Component-based architecture with state management
• ✅ Cross-Platform Consistency - Same code, native on both platforms
• ✅ VDOM Reconciliation - Efficient updates with virtual DOM diffing
• ✅ Yoga Layout Engine - Flexbox-based layout system
• ✅ Hot Reload Support - Fast development iteration

Architecture

DCFlight uses the Flutter engine for the Dart runtime (similar to how React Native uses Hermes), but diverges completely from Flutter's UI rendering. Instead, it renders directly to native views:

Dart Components → VDOM Engine → Native Bridge → Native Views (UIKit/Android Views)

Key Differences:

• Not React: DCFlight has its own component system and architecture
• Native-First: Direct native rendering, not a web view or abstraction layer
• Dart-Based: Uses Dart for the component layer, not JavaScript
• Framework-Managed: Framework handles component lifecycle and updates
• Swappable Bridge: The communication layer is abstracted and can be replaced with different mechanisms

📝 Quick Start

iOS Setup

import dcflight

@main
@objc class AppDelegate: DCFAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Dart Example

import 'package:dcflight/dcflight.dart';
import 'package:dcf_primitives/dcf_primitives.dart';

void main() async {
  DCFlight.setLogLevel(DCFLogLevel.debug);

  await DCFlight.start(app: DCFView(
    layout: DCFLayout(
      flex: 1, 
      justifyContent: YogaJustifyContent.center, 
      alignItems: YogaAlign.center
    ),
    styleSheet: DCFStyleSheet(backgroundColor: DCFColors.blue),
    children: [
      DCFText(content: "Hello World ✈️"),
    ]
  ));
}

📦 Packages

• dcflight - Core framework engine, renderer, and bridge
• dcf_primitives - Built-in UI primitive components (View, Text, Button, etc.)
• dcf_screens - Screen management and navigation
• dcf_reanimated - Animation system
• cli - Command-line tools for project and module creation

🛠️ CLI Tools

Create a new DCFlight app:

dcf create app

Create a new module:

dcf create module

See CLI Guide for more information.

📚 Documentation

Getting Started

• Framework Overview - Architecture and concepts
• Component Protocol - Component development guide
• Event System - Event handling and propagation

Development Guides

• Framework Guidelines - Complete development guide
• Module Development - Creating modules
• Component Conventions - Naming and patterns

Contributing

• Contributing Guide - How to contribute to DCFlight
• Code of Conduct - Community guidelines

Technical Documentation

• Registry System - Component registration
• Tunnel System - Native method calls
• Architecture Comparison - Framework comparison

🏗️ Architecture

DCFlight follows a layered architecture:

┌─────────────────────────────────────┐
│    Dart Layer (Components)          │
│  StatelessComponent / StatefulComponent │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│      VDOM Engine (Reconciliation)    │
│  Component Diffing & Update Batching │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│      Native Bridge Interface         │
│  Communication Layer (Swappable)     │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│    Native Layer (iOS/Android)        │
│  DCFComponent Implementation         │
└─────────────────────────────────────┘

🎯 Key Features

• Native UI Rendering - Direct native views, no platform views or abstractions
• Component-Based - Declarative component architecture with state management
• Cross-Platform - Write once, native on both platforms
• VDOM System - Efficient updates with virtual DOM diffing and reconciliation
• Yoga Layout - Flexbox-based layout engine for consistent layouts
• Hot Reload - Fast development iteration with hot restart support
• Type-Safe - Full Dart type safety throughout the framework
• Extensible - Plugin system for creating custom modules and components

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

• Read Framework Guidelines for development practices
• Check Component Protocol for component development
• Follow our Code of Conduct

📄 License

MIT License - see LICENSE file for details.

☕ Support

Your support fuels the grind. Every contribution keeps this journey alive.

---

Built with ❤️