home / skills / first-fluke / fullstack-starter / webf-native-ui-dev

webf-native-ui-dev skill

safe

This skill helps you expose Flutter widgets as web-native custom elements in WebF, enabling reusable UI components across HTML apps.

npx playbooks add skill first-fluke/fullstack-starter --skill webf-native-ui-dev

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.9 KB

---
name: webf-native-ui-dev
description: Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements.
---

# 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

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

// 1. Define the Element
class FlutterButtonElement extends WidgetElement {
  FlutterButtonElement(BindingContext? context) : super(context);

  @override
  Widget build(BuildContext context, List<Widget> children) {
    return ElevatedButton(
      onPressed: () {
        // Dispatch custom event to JS
        dispatchEvent(Event('click'));
      },
      child: Text(getAttribute('label') ?? 'Click Me'),
    );
  }
}

// 2. Register (usually in main.dart)
void main() {
  WebF.defineCustomElement('flutter-button', (context) => FlutterButtonElement(context));
  runApp(MyApp());
}
```

## Usage in HTML

```html
<flutter-button label="Submit Order" id="btn"></flutter-button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    console.log('Button clicked via Flutter!');
  });
</script>
```

## Best Practices

- **Attributes**: Map HTML attributes to Widget properties.
- **Events**: Dispatch standard DOM events from Flutter user interactions.
- **Performance**: Avoid heavy computations in the `build` method; use state management.

Overview

This skill helps you develop custom native UI libraries that expose Flutter widgets as WebF custom elements. It focuses on wrapping Flutter widgets, mapping attributes and events, and registering HTML-like tags so web code can use Flutter-rendered components. The goal is reusable component libraries that behave like native DOM elements in web apps backed by Flutter rendering.

How this skill works

You implement a Flutter widget and then create an Element class that extends WebF's WidgetElement. The Element class translates HTML attributes to widget properties and dispatches DOM-style events from Flutter interactions. Finally, register the element with defineCustomElement so the tag name maps to the element factory, allowing standard HTML usage and JS event listeners.

When to use it

You need rich, native-feeling UI components in a WebF-powered web layer.
You want to reuse Flutter widget logic across web and mobile with HTML-friendly tags.
You need complex widgets (animations, native gestures) that are difficult with plain HTML/CSS.
Building a design system or component library for a Flutter-backed web frontend.
Providing a JS-friendly interface for Flutter-rendered components in a fullstack app.

Best practices

Map HTML attributes to widget properties and parse types safely in the Element constructor or attributeChangedCallback.
Dispatch standard DOM events (click, change) from Flutter callbacks so JS can listen normally.
Keep build methods fast; move heavy work to state objects or use providers/state managers.
Use clear tag names and versioning in the component API to avoid collisions and breaking changes.
Test lifecycle hooks (connected/disconnected, attribute changes) and event propagation in both Flutter and web contexts.

Example use cases

Create a <flutter-button> that maps a label attribute and dispatches click events to JavaScript handlers.
Build a data table component backed by Flutter for complex layout and virtualization, exposed as <flutter-data-table>.
Wrap animated or gesture-driven widgets (carousels, sliders) to keep smooth native animations while offering HTML controls.
Provide a design-system package that teams import to get consistent, Flutter-backed custom elements.

FAQ

How do I expose attributes and keep them in sync?

Read attributes in the Element class and update widget state via setState or your state manager. Implement attributeChangedCallback to react to changes and re-render efficiently.

Can I dispatch standard DOM events from Flutter?

Yes. Use the Element's dispatchEvent method from Flutter callbacks to emit events like 'click' or custom events that JavaScript can listen to.