概览

Applet 是一个基于 Flutter 的 JavaScript 热更新框架。

Applet 面向需要原生 Flutter UI、同时希望获得 SwiftUI / Jetpack Compose 式声明式 脚本体验的团队：函数描述当前状态下的 UI，回调更新状态，Flutter 负责渲染。

原生渲染

渲染为真实 Flutter 组件，非 WebView。

JavaScript

默认使用 ES module、局部状态、闭包回调。

贴近 Flutter

Material、Cupertino、你所熟悉的 Flutter。

面向生产

完善的运行时和热更新交付，值得信赖。

文档章节

快速开始添加 Applet、加载 JavaScript，并渲染第一个原生 Flutter UI。

入门教程按顺序学习应用模型、状态、主题和自适应布局。

高级用法使用模块、热更新交付、运行时安全和宿主集成。

开发文档理解底层原理、开发检查和持续集成。

声明式模型

Applet 借鉴 SwiftUI 和 Jetpack Compose：用函数描述当前状态下的 UI。 不同的是，这些函数来自 Flutter 运行时加载的 JavaScript 模块。

import "@app/material";

export default function App() {
  const count = State(0);

  return MaterialApp({
    theme: ThemeData({
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed({ seedColor: "#006a6a" }),
    }),
    home: Scaffold({
      appBar: AppBar({ title: Text("Applet") }),
      body: Center(
        VStack(
          Text("Count: " + count).style({ theme: "headlineMedium" }),
          FilledButton.icon({
            icon: Icon(Icons.add),
            label: Text("Increment"),
            onPressed: () => count.update((value) => value + 1),
          })
        ).gap(12).min()
      ),
    }),
  });
}

阅读路径

1. 用 快速开始 创建第一个 applet。
2. 先看 应用模型 和 组件和页面拆分，再添加状态。
3. 拆分 applet 或准备远程交付时，查阅 模块和导入。
4. 开发过程中用 Dart 宿主 API 和 JavaScript API 作为参考。