Embedding Flutter Widgets as Custom Elements in Kraken's Web Engine

Component (module) encapsulation and development can greatly improve front‑end development efficiency. Teams create reusable component libraries, and similar Flutter widget libraries exist. Kraken, a high‑performance Web rendering engine, aims to combine Web and Flutter capabilities for dynamic, native‑like performance.

Using Flutter Widget to Implement a Custom Element

Developers extend

WidgetElement

to create a

FlutterContainerWidgetElement

and register it with

Kraken.defineCustomElement

. The element’s

build

method receives updated attributes and children, rebuilds the Flutter widget, and updates the UI.

<code>void main() {
  Kraken.defineCustomElement('flutter-column', (context) {
    return ColumnWidgetElement(context);
  });
}

// Extend WidgetElement to implement Custom Element
class ColumnWidgetElement extends WidgetElement {
  ColumnWidgetElement(EventTargetContext? context) : super(context);

  @override
  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
    return Column(
      textDirection: properties['direction'] ? TextDirection.ltr : TextDirection.ltr,
      children: children,
    );
  }
}
</code>

In JavaScript the custom element can be created and manipulated like any DOM element.

<code>const column = document.createElement('flutter-column');
document.body.appendChild(column);

for (let i = 0; i < 10; i++) {
  column.appendChild(document.createTextNode(i));
}
</code>

Technical Principles

Kraken’s rendering pipeline mirrors the Web’s three‑tree model (CSSOM, DOM, Render Object) while Flutter uses Widget, Element, RenderObject trees. The two trees are independent; an adapter bridges them so that a Flutter widget’s RenderObject can be attached to the parent RenderObject in the combined tree.

Four trees (DOM, Widget, Flutter Element, Render Object) are coordinated by adapters that bind and convert nodes, allowing mixed rendering.

Various nesting scenarios are supported, such as an Element containing a Flutter widget, a Flutter widget containing an Element, and deeper combinations.

Element as container appends a Flutter widget.

Flutter widget as container appends an Element (text node).

Flutter widget as container appends another Flutter widget.

Flutter widget as container appends an Element which further appends a Flutter widget.

Element as container appends an Element (text node).

Advanced Scenarios: Optimizing Waterfall‑Flow Performance with Flutter Widgets

A waterfall‑flow widget and a refresh widget are wrapped as a custom element, exposing native‑level recycling and smooth scrolling to JavaScript developers without extra effort.

<code>void main() {
  Kraken.defineCustomElement('flutter-container', (context) {
    return EasyRefreshWidgetElement(context);
  });
}

class EasyRefreshWidgetElement extends WidgetElement {
  EasyRefreshWidgetElement(EventTargetContext? context)
      : super(context, defaultStyle: {'height': '100vh', 'display': 'block'});

  @override
  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
    return EasyRefresh(
      child: WaterfallFlow.builder(
        itemCount: children.length,
        itemBuilder: (BuildContext context, int index) => children[index],
        padding: EdgeInsets.all(5.0),
        gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 5.0,
          mainAxisSpacing: 5.0,
        ),
      ),
      onRefresh: () async => dispatchEvent(Event('refresh')),
      onLoad: () async => dispatchEvent(Event('load')),
    );
  }
}
</code>

JavaScript can create the element and listen to custom events emitted by the Flutter widget.

<code>const flutterContainer = document.createElement('flutter-container');
flutterContainer.addEventListener('refresh', () => {});
</code>

The result is a high‑performance, memory‑efficient layout that behaves like a native component while being used through standard Web APIs.

Conclusion

By following W3C standards and integrating Flutter’s rendering, Kraken creates a hybrid front‑end architecture that leverages the dynamism of Web and the performance of native Flutter, offering extensibility, low‑cost customization, and open‑source collaboration.

Kraken GitHub: https://github.com/openkraken/kraken

Kraken official site: https://openkraken.com/