Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.
Want to create your own native UI library for WebF by wrapping Flutter widgets? This skill guides you through the complete process of building custom native UI libraries that make Flutter widgets accessible from JavaScript/TypeScript with React and Vue support.
Native UI development in WebF means:
webf-native-ui skill)A native UI library consists of three layers:
┌─────────────────────────────────────────┐
│ JavaScript/TypeScript (React/Vue) │ ← Generated by CLI
│ @openwebf/my-component-lib │
├─────────────────────────────────────────┤
│ TypeScript Definitions (.d.ts) │ ← You write this
│ Component interfaces and events │
├─────────────────────────────────────────┤
│ Dart (Flutter) │ ← You write this
│ Flutter widget wrappers │
│ my_component_lib package │
└─────────────────────────────────────────┘
# 1. Create Flutter package with Dart wrappers
# 2. Write TypeScript definition files
# 3. Generate React/Vue components with WebF CLI
# 4. Test and publish
webf codegen my-ui-lib --flutter-package-src=./flutter_package
Create a standard Flutter package:
# Create Flutter package
flutter create --template=package my_component_lib
cd my_component_lib
Directory structure:
my_component_lib/
├── lib/
│ ├── my_component_lib.dart # Main export file
│ └── src/
│ ├── button.dart # Dart widget wrapper
│ ├── button.d.ts # TypeScript definitions
│ ├── input.dart
│ └── input.d.ts
├── pubspec.yaml
└── README.md
pubspec.yaml dependencies: