Getting Started with DCFlight

Build native mobile apps with Dart. No platform views, no abstractions. Just pure native UI with React-like development experience.

Installation

Prerequisites

• Flutter SDK (3.0 or higher)
• Dart SDK (2.17 or higher)
• Xcode (for iOS development)
• Android Studio (for Android development - coming soon)

About Flutter Dependency

Current: DCFlight uses Flutter SDK (build tools, Flutter Engine, etc) - Flutter's UI abstractions are completely bypassed.

Future: We plan to ship with "Flutter Naked" - a fork of the Flutter Engine without UI abstractions, making Flutter SDK dependency temporary.

Important: Flutter widgets and abstractions won't work in DCFlight unless you use specific bindings that interop from the DCFlight framework.

Install DCFlight CLI

dart pub global activate dcflight_cli

Create a new project

dcf create my_app
cd my_app
dcf run

CLI Commands

dcf create [project_name]

Create a new DCFlight project with all necessary boilerplate and native iOS setup

dcf add [package_name]

Add Dart packages to your DCFlight project with proper dependency management

dcf run

Build and run your DCFlight app with hot restart support (in development)

dcf build ios

Build iOS app bundle for release or testing

Your First DCFlight App

Here's a complete example of a DCFlight app with state management and user interactions:

void main() {
  DCFlight.start(app: MyApp());
}

class MyApp extends StatefulComponent {
  @override
  DCFComponentNode render() {
    final counter = useState(0);
    final globalCounter = useStore(globalCounterState);
    
    return DCFSafeAreaView(
      layout: LayoutProps(flex: 1),
      children: [
        DCFScrollView(
          showsScrollIndicator: true,
          style: StyleSheet(backgroundColor: Colors.white),
          layout: LayoutProps(
            paddingHorizontal: 20,
            justifyContent: YogaJustifyContent.center,
            alignItems: YogaAlign.center,
            flex: 1,
          ),
          children: [
            DCFText(
              content: "Welcome to DCFlight!",
              textProps: DCFTextProps(
                fontSize: 28,
                fontWeight: "bold",
                color: Colors.black,
                textAlign: "center",
              ),
            ),
            DCFText(
              content: "Counter: ${counter.value}",
              textProps: DCFTextProps(
                fontSize: 24,
                color: Colors.blue,
                textAlign: "center",
              ),
            ),
            DCFButton(
              buttonProps: DCFButtonProps(
                title: "Increment",
                backgroundColor: Colors.blue,
                titleColor: Colors.white,
              ),
              onPress: () {
                counter.setValue(counter.value + 1);
                globalCounter.setState(globalCounter.state + 1);
              },
            ),
            DCFText(
              content: "Global Count: ${globalCounter.state}",
              textProps: DCFTextProps(
                fontSize: 16,
                color: Colors.gray,
                textAlign: "center",
              ),
            ),
          ],
        ),
      ],
    );
  }
}

// Global state management
final globalCounterState = Store<int>(0);