Getting Started with DCFlight

DCFlight allows you to build native iOS and Android applications using Dart, rendering true native UI components instead of drawing pixels to a canvas.

Prerequisites

Flutter SDK (for Dart toolchain)
Xcode (for iOS development)
Android Studio (for Android development)

Installation

Install the DCFlight CLI globally:

dart pub global activate dcflight_cli

Verify installation:

dcf --help

Creating a Project

Create a new DCFlight app:

dcf create app
cd <project_name>
dcf go

The CLI will prompt you for:

Project name
App name
Package name
Target platforms (iOS, Android, etc.)
Description
Organization

Project Structure

When you create a new DCFlight app, you get the following structure:

my_app/
├── lib/
│   └── main.dart              # Entry point - your app component
├── android/                    # Android native code
│   ├── app/
│   │   └── src/
│   │       └── main/
│   │           └── kotlin/
│   │               └── MainActivity.kt
│   └── build.gradle.kts
├── ios/                        # iOS native code
│   ├── Runner/
│   │   ├── AppDelegate.swift
│   │   └── Info.plist
│   └── Podfile
├── assets/                     # Static assets
│   └── dcf/
│       └── dcf.png            # App icon
├── pubspec.yaml                # Dart dependencies
├── analysis_options.yaml       # Linter configuration
└── README.md

Key Files:

lib/main.dart - Your app entry point. Call DCFlight.go(app: YourComponent()) here.
pubspec.yaml - Dependencies. DCFlight packages are included by default.
android/ and ios/ - Native platform code. You typically don't need to modify these.

Your First Component

Here's a simple example to get started:

import 'package:dcflight/dcflight.dart';
import 'package:dcf_primitives/dcf_primitives.dart';
import 'package:flutter/material.dart' show Colors;

void main() async {
  await DCFlight.go(app: MyApp());
}

class MyApp extends DCFStatefulComponent {
  @override
  DCFComponentNode render() {
    final count = useState<int>(0);
    
    return DCFView(
      layout: DCFLayout(
        flex: 1,
        justifyContent: DCFJustifyContent.center,
        alignItems: DCFAlign.center,
      ),
      children: [
        DCFText(
          content: "Count: ${count.state}",
          styleSheet: DCFStyleSheet(primaryColor: Colors.black),
        ),
        DCFButton(
          buttonProps: DCFButtonProps(
            title: "Increment",
            onPress: (data) => count.setState(count.state + 1),
          ),
        ),
      ],
    );
  }
}