跳转到内容
Applet

快速开始

  1. 添加依赖。

    dependencies:
      applet: ^1.0.0

  2. 声明 applet 源码 asset。

    flutter:
      uses-material-design: true
      assets:
        - src/

  3. 在 Flutter 中加载入口。

    import 'package:applet/applet.dart';
    import 'package:flutter/widgets.dart';
    

    void main() {
      runApp(const Applet.asset('src/app.js'));
    }

  4. 编写 src/app.js。

    import "@app/material";
    

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

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

  5. 运行 Flutter。

    Terminal window
    flutter run

推荐目录

Section titled “推荐目录”

入口文件保持很薄，功能拆到独立模块。

  • 文件夹src/
    • app.js
    • 文件夹app/
      • app.js
      • state.js
      • theme.js
      • components.js
      • 文件夹screens/
        • home.js
        • settings.js
src/app.js
import "@app/material";
import App from "./app/app.js";


export default App;

下一步

Section titled “下一步”