Skip to content
Applet

Quick start

  1. Add the dependency.

    dependencies:
      applet: ^1.0.0

  2. Register applet source assets.

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

  3. Host the applet entry.

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

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

  4. Write 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. Run Flutter.

    Terminal window
    flutter run
Section titled “Recommended layout”

Keep the entry module thin and split features into focused modules.

  • Directorysrc/
    • app.js
    • Directoryapp/
      • app.js
      • state.js
      • theme.js
      • components.js
      • Directoryscreens/
        • home.js
        • settings.js
src/app.js
import "@app/material";
import App from "./app/app.js";


export default App;

Next steps

Section titled “Next steps”