WebF Native UI Dev

This skill guides the development of custom native UI components for WebF (Web on Flutter). It bridges Flutter widgets to standard HTML custom elements.

Concept

WebF allows you to render HTML/CSS using Flutter's rendering engine. This skill helps you expose complex Flutter widgets as <custom-element> tags usable in HTML.

Workflow

1. Create Flutter Widget: Build the widget using standard Flutter code.
2. Define Element Class: Create a class extending WidgetElement.
3. Register Custom Element: Use defineCustomElement to map the tag name to the class.

Example

import 'package:webf/webf.dart';
import 'package:flutter/material.dart';