DCF Primitives

pub package License: MIT

The official primitive component library for the DCFlight framework. This package provides a comprehensive set of cross-platform UI components that work seamlessly across iOS, Android, and other platforms supported by DCFlight.

Features

  • Cross-Platform Components: Write once, run everywhere with native performance
  • Type-Safe API: Full TypeScript-style type safety in Dart
  • Adaptive Theming: Automatic light/dark mode support
  • Native Performance: Direct native rendering without widget overhead
  • Component-Based Architecture: React-like development experience

Installation

Add dcf_primitives to your pubspec.yaml:

dependencies:
  dcf_primitives: ^0.0.1
  dcflight: ^0.0.1

Then run:

dart pub get

Quick Start

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

class MyApp extends StatelessComponent {
  @override
  DCFComponentNode render() {
    return DCFView(
      children: [
        DCFText(
          content: "Hello DCFlight!",
          textProps: DCFTextProps(fontSize: 24),
        ),
        DCFButton(
          buttonProps: DCFButtonProps(title: "Click me"),
          onPress: (data) => print("Button pressed!"),
        ),
      ],
    );
  }
}

Available Components

Basic Components

  • DCFView - Container view with layout support
  • DCFText - Text display with rich formatting
  • DCFImage - Image display with caching
  • DCFIcon - Icon display from built-in icon library
  • DCFSVG - SVG image rendering

Input Components

  • DCFButton - Touchable button with press events
  • DCFTextInput - Text input with keyboard support
  • DCFCheckbox - Checkbox with custom styling
  • DCFToggle - Switch/toggle component
  • DCFSlider - Range slider input
  • DCFDropdown - Dropdown/picker component

Layout Components

  • DCFScrollView - Scrollable container
  • DCFFlatList - High-performance list component
  • DCFSafeAreaView - Safe area handling
  • DCFModal - Modal dialog component
  • DCFModalHeader - Modal header with close button

Interactive Components

  • DCFTouchableOpacity - Touchable wrapper with opacity feedback
  • DCFGestureDetector - Gesture recognition (tap, swipe, etc.)
  • DCFSwipeableView - Swipeable container for custom interactions

Animation Components

  • DCFAnimatedView - Animated container
  • DCFAnimatedText - Animated text with transitions
  • DCFSpinner - Loading spinner/activity indicator

Component Props and Styling

All components support:

  • Layout Props: Flexbox-based layout system
  • Style Sheet: CSS-like styling with type safety
  • Event Handlers: Type-safe event callbacks
DCFButton(
  buttonProps: DCFButtonProps(title: "Styled Button"),
  layout: LayoutProps(
    width: 200,
    height: 50,
    margin: EdgeInsets.all(10),
  ),
  styleSheet: StyleSheet(
    backgroundColor: Colors.blue,
    borderRadius: 8,
  ),
  onPress: (data) => handleButtonPress(),
)

Theming and Customization

DCF Primitives supports adaptive theming that automatically responds to system light/dark mode:

// Components automatically adapt to system theme
DCFView(
  styleSheet: StyleSheet(
    backgroundColor: Colors.systemBackground, // Adapts to light/dark
  ),
  children: [
    DCFText(
      content: "Adaptive text",
      textProps: DCFTextProps(
        color: Colors.label, // Adapts to light/dark
      ),
    ),
  ],
)

Event Handling

All interactive components provide type-safe event callbacks:

DCFTextInput(
  onValueChange: (Map<dynamic, dynamic> data) {
    final String newValue = data['value'];
    print('Input changed to: $newValue');
  },
  onFocus: (data) => print('Input focused'),
  onBlur: (data) => print('Input blurred'),
)

Performance

DCF Primitives is built for performance:

  • Native Rendering: Components render directly to native views
  • Efficient Updates: Only changed properties trigger updates
  • Memory Efficient: Automatic view recycling in lists
  • Smooth Animations: Hardware-accelerated animations

Platform Support

  • ✅ iOS (UIKit)
  • ✅ Android (Native Android Views)
  • 🚧 macOS (Coming soon)
  • 🚧 Windows (Coming soon)
  • 🚧 Linux (Coming soon)

Examples

Check out the example app for comprehensive usage examples.

Documentation

Contributing

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

License

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

About DCFlight

DCF Primitives is part of the DCFlight framework, a next-generation cross-platform mobile development framework that brings React-like component architecture to native mobile development.

Made with ❤️ by Dotcorr Studio

Libraries

dcf_primitives