How Kraken 0.10.0 Enables Hybrid Flutter Widget Rendering for Web Frontends

After more than two months of intensive development, Kraken 0.10.0 is released, featuring hybrid rendering of Flutter widgets by wrapping them as Custom Elements for frontend use, enriching the component ecosystem and enabling high‑performance native containers.

Updates

1. Support for Flutter Widget Hybrid Rendering

Previously Kraken only supported simple leaf nodes (images, video, text). Version 0.10.0 adds full hybrid rendering, allowing complex containers such as waterfall flows and long lists, making nesting of Flutter widgets and Kraken possible.

The example shows how to package Flutter's pull‑to‑refresh and waterfall flow widgets into a custom component and use it on the web.

Wrap EasyFresh and WaterfallFlow widgets as a Custom Element on the Dart side.

Create the custom component with standard DOM API and use it in JSX.

Hybrid rendering lets frontend focus on layout and business logic while native handles high‑performance containers, maximizing capability and productivity. Detailed technical方案 can be found in the referenced article.

2. Enhanced Styling Capabilities

Version 0.10.0 strengthens style handling by adding support for

<style>

,

<link>

tags and

className

. Sharing styles via className reduces JSBridge transmission time and Dart memory usage compared with inline styles.

It also supports CSS Variables, enabling easy dark‑mode adaptation. Example screenshot below.

3. Performance Optimizations

Significant performance and stability improvements were achieved through architectural refactoring, fixing issues that affected first‑paint time, scroll frame rate, and memory usage.

JSBridge Optimization

Reduced JS object creation time and optimized createElement/createTextNode, speeding up C++ side DOM tree creation.

Layout Optimization

Cache‑based reduction of unnecessary constraint calculations cuts layout time by about 45% in deep Flex nesting. Long‑text rendering is limited to visible portions, avoiding extra work.

Performance Testing

A long‑list page was tested on a low‑end Android Xiaomi 6 device, comparing 0.9.0 and 0.10.0. The new version improves first‑paint time by ~10% and raises scroll frame rate to around 50 fps.

4. Flutter Version Support

Kraken 0.10.0 supports Flutter 2.5.3 and continues to support Flutter 2.2 until 0.11.0. The Flutter 2.5.3 release package is provided; for Flutter 2.2 developers must checkout the

0.10.0-flutter-2.2tag

source from GitHub and compile.

5. Linux Support

Linux system support is added; compilation instructions are in the README.

6. Other Updates

Numerous bug fixes related to rendering consistency and performance are included; see the CHANGELOG for details.

About Kraken Community

The Kraken team encourages community collaboration through contributors and a Technical Steering Committee (TSC) that defines direction, releases, and standards. Developers can become contributors by submitting quality code, and active contributors may be nominated to the TSC.