snapshot of https://github.com/flutter/samples.git (main, 2026-09-16; blobs > 131072B omitted)

web_embedding/ng-flutter/.gitignore

@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+package-lock.json
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

web_embedding/ng-flutter/README.md

@@ -0,0 +1,177 @@
+# ng-flutter
+
+This Angular project is a simple example of how Angular and Flutter
+web apps could be integrated, and have them interop.
+
+## Points of Interest
+
+### Angular
+
+This repository is a quite standard Angular app. The following changes were made
+to be able to use (and interop) with a Flutter web application:
+
+* `package.json` has a custom `prebuild` script that builds the
+  Flutter web app, so Angular can find it later.
+* `flutter.js` is added as a `"scripts"` entry in `angular.json`.
+  Angular takes care of minimizing and injecting it as any other script.
+* The rest of the flutter app `flutter/build/web/` is registered
+  as an `"assets"` entry in `angular.json`, and moved to `/flutter`.
+* The `ng-flutter` component takes care of embedding Flutter web, and yielding
+  control to Angular through an `appLoaded` `EventEmitter`. The object yielded
+  by this emitter is a state controller exposed by flutter via a JS custom
+  event!
+
+### Flutter
+
+The embedded Flutter application lives in the `flutter` directory of this repo.
+That application is a standard web app, that doesn't need to be aware that it's
+going to be embedded in another framework.
+
+* Flutter uses new `@staticInterop` methods to allow certain Dart functions to
+  be called from JavaScript.
+* Look at how `createDartExport` and `broadcastAppEvent` work together to make
+  the `_state` controller of the Flutter app available to Angular!
+
+## How to build the app
+
+### Requirements
+
+If you want to build and run this demo on your machine, you'll need
+a moderately recent version of Angular:
+
+```console
+$ ng version
+
+Angular CLI: 17.0.0
+Node: 20.9.0
+Package Manager: npm 10.1.0
+OS: linux x64
+```
+
+And Flutter:
+
+```
+$ flutter --version
+
+Flutter 3.13.9 • channel stable
+Framework • revision d211f42860 (2 weeks ago) • 2023-10-25 13:42:25 -0700
+Engine • revision 0545f8705d
+Tools • Dart 3.1.5 • DevTools 2.25.0
+```
+
+**Ensure `npm`, `ng` and `flutter` are present in your `$PATH`.**
+
+### Building the app
+
+This repository is a moderately standard Angular app. It integrates
+Flutter web by making it part of the Angular `assets`.
+
+In order to build this app, first fetch its `npm` dependencies:
+
+```console
+$ npm install
+
+added 963 packages, and audited 964 packages in 17s
+
+93 packages are looking for funding
+  run `npm fund` for details
+
+found 0 vulnerabilities
+```
+
+Then run the `build` script. It'll take care of building Flutter
+automatically:
+
+```console
+$ npm run build
+
+> ng-flutter@0.0.0 prebuild
+
+... Flutter web build output ...
+
+Compiling lib/main.dart for the Web...
+
+> ng-flutter@0.0.0 build
+> ng build
+
+... Angular build output ...
+
+✔ Browser application bundle generation complete.
+✔ Copying assets complete.
+✔ Index html generation complete.
+```
+
+### Local Angular development
+
+Once you've reached this point, you should be able to work with
+your Angular application normally, for example to run a local web
+server:
+
+```console
+$ npm run start
+
+> ng-flutter@0.0.0 start
+> ng serve
+
+✔ Browser application bundle generation complete.
+
+Initial Chunk Files   | Names         |  Raw Size
+vendor.js             | vendor        |   4.38 MB | 
+
+... Angular build output...
+
+** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
+
+
+✔ Compiled successfully.
+```
+
+Navigate to `http://localhost:4200/`. The application will automatically reload
+if you change any of its Angular source files.
+
+### Local Flutter web development
+
+The Flutter app lives inside the `flutter` directory, and can be
+developed independently. Just do any changes on Flutter web as you'd
+normally do. It even includes a small `web/index.html` so you can see
+changes to your app without running the whole Angular setup.
+
+> **Note**
+> For now, Angular does _not_ auto-detect changes to your Flutter web
+app, so once you're happy with your Flutter web app, make sure to
+call `npm run build` so everything rebuilds and gets placed into its
+correct location.
+
+### Deploying the app
+
+After `npm run build`, you should have a deployable Angular + Flutter
+web app in the `dist` directory of this Angular project.
+
+Your built app can can be deployed anywhere, but do check
+[Firebase hosting](https://firebase.google.com/docs/hosting) for a
+super-easy deployment experience!
+
+## Troubleshooting
+
+### Flutter
+
+Ensure your flutter app is properly rebuilt after any changes.
+
+* Run `npm run build` to re-build the Flutter app.
+
+If you encounter error messages like:
+
+```
+Error: Can't resolve 'flutter/build/web/flutter.js' in '/my/checkout/of/ng-flutter'
+```
+
+You definitely need to run `npm run build`!
+
+## Reach out to the team(s)!
+
+Have you had any problem not covered in this README? Do you want
+to see other embedding examples?
+
+Let us know by [creating an issue](https://github.com/flutter/samples/issues/new) or opening a new pull request.
+
+Thanks!

web_embedding/ng-flutter/angular.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-flutter": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/ng-flutter",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "input": "flutter/build/web/",
+                "glob": "**/*",
+                "output": "/flutter/"
+              }
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": [
+              {
+                "input": "flutter/build/web/flutter.js",
+                "inject": true,
+                "bundleName": "flutter"
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "ng-flutter:build:production"
+            },
+            "development": {
+              "buildTarget": "ng-flutter:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "ng-flutter:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": "0ff9b6e8-2034-4f87-9ac7-46dbd612ebad"
+  }
+}

web_embedding/ng-flutter/flutter/.gitignore

@@ -0,0 +1,44 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

web_embedding/ng-flutter/flutter/.metadata

@@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled.
+
+version:
+  revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+  channel: master
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: android
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: ios
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: linux
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: macos
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: web
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+    - platform: windows
+      create_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+      base_revision: f41ae4f4c925336400b11dc02986c1b4d78a173c
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

web_embedding/ng-flutter/flutter/README.md

@@ -0,0 +1,16 @@
+# ng_companion
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.

web_embedding/ng-flutter/flutter/analysis_options.yaml

@@ -0,0 +1,30 @@
+include: ../../../analysis_options.yaml
+
+analyzer:
+  exclude:
+    - build/**
+    - android/**
+    - ios/**
+    - web/**
+    - windows/**
+    - macos/**
+    - linux/**
+  language:
+    strict-casts: true
+    strict-inference: true
+    strict-raw-types: true
+
+linter:
+  rules:
+    - avoid_types_on_closure_parameters
+    - avoid_void_async
+    - cancel_subscriptions
+    - close_sinks
+    - directives_ordering
+    - package_prefixed_library_names
+    - test_types_in_equals
+    - throw_in_finally
+    - unawaited_futures
+    - unnecessary_breaks
+    - unnecessary_statements
+    - use_super_parameters

web_embedding/ng-flutter/flutter/lib/main.dart

@@ -0,0 +1,68 @@
+import 'dart:js_interop' show createJSInteropWrapper;
+
+import 'package:flutter/material.dart';
+
+import 'pages/counter.dart';
+import 'pages/dash.dart';
+import 'pages/text.dart';
+
+import 'src/js_interop.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatefulWidget {
+  const MyApp({super.key});
+
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  final ValueNotifier<DemoScreen> _screen = ValueNotifier<DemoScreen>(
+    DemoScreen.counter,
+  );
+  final ValueNotifier<int> _counter = ValueNotifier<int>(0);
+  final ValueNotifier<String> _text = ValueNotifier<String>('');
+
+  late final DemoAppStateManager _state = DemoAppStateManager(
+    screen: _screen,
+    counter: _counter,
+    text: _text,
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    final export = createJSInteropWrapper(_state);
+
+    // Emit this through the root object of the flutter app :)
+    broadcastAppEvent('flutter-initialized', export);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Element embedding',
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
+      ),
+      home: ValueListenableBuilder<DemoScreen>(
+        valueListenable: _screen,
+        builder: (context, value, child) => demoScreenRouter(value),
+      ),
+    );
+  }
+
+  Widget demoScreenRouter(DemoScreen which) => switch (which) {
+    DemoScreen.counter => CounterDemo(counter: _counter),
+    DemoScreen.text => TextFieldDemo(text: _text),
+    DemoScreen.dash => DashDemo(text: _text),
+  };
+}

web_embedding/ng-flutter/flutter/lib/pages/counter.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+class CounterDemo extends StatefulWidget {
+  const CounterDemo({super.key, required this.counter});
+
+  final ValueNotifier<int> counter;
+
+  @override
+  State<CounterDemo> createState() => _CounterDemoState();
+}
+
+class _CounterDemoState extends State<CounterDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('Counter'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const Text('You have pushed the button this many times:'),
+            ValueListenableBuilder(
+              valueListenable: widget.counter,
+              builder: (context, value, child) => Text(
+                '$value',
+                style: Theme.of(context).textTheme.headlineMedium,
+              ),
+            ),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () {
+          widget.counter.value++;
+        },
+        tooltip: 'Increment',
+        child: const Icon(Icons.add),
+      ),
+    );
+  }
+}

web_embedding/ng-flutter/flutter/lib/pages/dash.dart

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+
+class DashDemo extends StatefulWidget {
+  const DashDemo({super.key, required this.text});
+
+  final ValueNotifier<String> text;
+
+  @override
+  State<DashDemo> createState() => _DashDemoState();
+}
+
+class _DashDemoState extends State<DashDemo> {
+  final double textFieldHeight = 80;
+  final Color colorPrimary = Colors.blue.shade700;
+  late final TextEditingController textController;
+
+  int _totalCharCount = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initial value of the text box.
+    _totalCharCount = widget.text.value.length;
+    textController = TextEditingController.fromValue(
+      TextEditingValue(
+        text: widget.text.value,
+        selection: TextSelection.collapsed(offset: widget.text.value.length),
+      ),
+    );
+    // Report changes.
+    textController.addListener(_onTextControllerChange);
+    // Listen to changes from the outside.
+    widget.text.addListener(_onTextStateChanged);
+  }
+
+  void _onTextControllerChange() {
+    widget.text.value = textController.text;
+    setState(() {
+      _totalCharCount = textController.text.length;
+    });
+  }
+
+  void _onTextStateChanged() {
+    textController.value = TextEditingValue(
+      text: widget.text.value,
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    textController.dispose();
+    widget.text.removeListener(_onTextStateChanged);
+  }
+
+  void _handleClear() {
+    textController.value = TextEditingValue(
+      text: '',
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          Expanded(
+            child: Container(
+              width: double.infinity,
+              color: colorPrimary,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    'COUNT WITH DASH!',
+                    style: Theme.of(
+                      context,
+                    ).textTheme.titleLarge!.copyWith(color: Colors.white),
+                  ),
+                  // Bordered dash avatar
+                  Padding(
+                    padding: const EdgeInsets.all(12),
+                    child: ClipOval(
+                      child: Container(
+                        color: Colors.white,
+                        padding: const EdgeInsets.all(2),
+                        child: ClipOval(
+                          child: Container(
+                            color: colorPrimary,
+                            padding: const EdgeInsets.all(2),
+                            child: const CircleAvatar(
+                              radius: 45,
+                              backgroundColor: Colors.white,
+                              foregroundImage: AssetImage('assets/dash.png'),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                  Text(
+                    '$_totalCharCount',
+                    style: Theme.of(
+                      context,
+                    ).textTheme.displayLarge!.copyWith(color: Colors.white),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(12),
+            child: Row(
+              children: [
+                Expanded(
+                  child: TextField(
+                    autofocus: true,
+                    controller: textController,
+                    maxLines: 1,
+                    decoration: const InputDecoration(
+                      border: OutlineInputBorder(),
+                      hintText: 'Type something!',
+                    ),
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 12),
+                  child: Ink(
+                    decoration: ShapeDecoration(
+                      color: colorPrimary,
+                      shape: const CircleBorder(),
+                    ),
+                    child: IconButton(
+                      icon: const Icon(Icons.refresh),
+                      color: Colors.white,
+                      onPressed: _handleClear,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

web_embedding/ng-flutter/flutter/lib/pages/text.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+class TextFieldDemo extends StatefulWidget {
+  const TextFieldDemo({super.key, required this.text});
+  final ValueNotifier<String> text;
+
+  @override
+  State<TextFieldDemo> createState() => _TextFieldDemoState();
+}
+
+class _TextFieldDemoState extends State<TextFieldDemo> {
+  late final TextEditingController textController;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initial value of the text box.
+    textController = TextEditingController.fromValue(
+      TextEditingValue(
+        text: widget.text.value,
+        selection: TextSelection.collapsed(offset: widget.text.value.length),
+      ),
+    );
+    // Report changes.
+    textController.addListener(_onTextControllerChange);
+    // Listen to changes from the outside.
+    widget.text.addListener(_onTextStateChanged);
+  }
+
+  void _onTextControllerChange() {
+    widget.text.value = textController.text;
+  }
+
+  void _onTextStateChanged() {
+    textController.value = TextEditingValue(
+      text: widget.text.value,
+      selection: TextSelection.collapsed(offset: widget.text.value.length),
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    textController.dispose();
+    widget.text.removeListener(_onTextStateChanged);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        title: const Text('Text Field'),
+      ),
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(14.0),
+          child: TextField(
+            controller: textController,
+            maxLines: null,
+            decoration: const InputDecoration(
+              border: OutlineInputBorder(),
+              hintText: 'Type something!',
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

web_embedding/ng-flutter/flutter/lib/src/js_interop.dart

@@ -0,0 +1,5 @@
+/// Exposes useful functions to interop with JS from our Flutter app.
+library;
+
+export 'js_interop/counter_state_manager.dart';
+export 'js_interop/helper.dart' show broadcastAppEvent;

web_embedding/ng-flutter/flutter/lib/src/js_interop/counter_state_manager.dart

@@ -0,0 +1,83 @@
+import 'dart:js_interop';
+
+import 'package:flutter/foundation.dart';
+
+enum DemoScreen {
+  counter('counter'),
+  text('text'),
+  dash('dash');
+
+  const DemoScreen(String screen) : _screen = screen;
+  final String _screen;
+
+  @override
+  String toString() => _screen;
+}
+
+/// This is the bit of state that JS is able to see.
+///
+/// It contains getters/setters/operations and a mechanism to
+/// subscribe to change notifications from an incoming [notifier].
+@JSExport()
+class DemoAppStateManager {
+  // Creates a DemoAppStateManager wrapping a ValueNotifier.
+  DemoAppStateManager({
+    required ValueNotifier<DemoScreen> screen,
+    required ValueNotifier<int> counter,
+    required ValueNotifier<String> text,
+  }) : _counter = counter,
+       _text = text,
+       _screen = screen;
+
+  final ValueNotifier<DemoScreen> _screen;
+  final ValueNotifier<int> _counter;
+  final ValueNotifier<String> _text;
+
+  // _counter
+  int getClicks() {
+    return _counter.value;
+  }
+
+  void setClicks(int value) {
+    _counter.value = value;
+  }
+
+  void incrementClicks() {
+    _counter.value++;
+  }
+
+  void decrementClicks() {
+    _counter.value--;
+  }
+
+  // _text
+  void setText(String text) {
+    _text.value = text;
+  }
+
+  String getText() {
+    return _text.value;
+  }
+
+  // _screen
+  void setScreen(String screen) {
+    _screen.value = DemoScreen.values.byName(screen);
+  }
+
+  String getScreen() {
+    return _screen.value.toString();
+  }
+
+  // Allows clients to subscribe to changes to the wrapped value.
+  void onClicksChanged(VoidCallback f) {
+    _counter.addListener(f);
+  }
+
+  void onTextChanged(VoidCallback f) {
+    _text.addListener(f);
+  }
+
+  void onScreenChanged(VoidCallback f) {
+    _screen.addListener(f);
+  }
+}

web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart

@@ -0,0 +1,16 @@
+import 'dart:js_interop';
+import 'package:web/web.dart';
+
+/// Locates the root of the flutter app (for now, the first element that has
+/// a flt-renderer tag), and dispatches a JS event named [name] with [data].
+void broadcastAppEvent(String name, JSObject data) {
+  final HTMLElement? root =
+      document.querySelector('[flt-renderer]') as HTMLElement?;
+  assert(root != null, 'Flutter root element cannot be found!');
+
+  final eventDetails = CustomEventInit(detail: data);
+  eventDetails.bubbles = true;
+  eventDetails.composed = true;
+
+  root!.dispatchEvent(CustomEvent(name, eventDetails));
+}

web_embedding/ng-flutter/flutter/pubspec.yaml

@@ -0,0 +1,25 @@
+name: ng_companion
+description: A flutter app with a counter that can be manipulated from JS.
+publish_to: none
+version: 1.0.0
+resolution: workspace
+
+environment:
+  sdk: ^3.9.0-0
+
+dependencies:
+  flutter:
+    sdk: flutter
+  web: ^1.0.0
+
+dev_dependencies:
+  analysis_defaults:
+    path: ../../../analysis_defaults
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+
+flutter:
+  uses-material-design: true
+  assets:
+    - assets/

web_embedding/ng-flutter/flutter/web/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="ng_companion">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>ng_companion</title>
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    // The value below is injected by flutter build, do not touch.
+    var serviceWorkerVersion = null;
+  </script>
+  <!-- This script adds the flutter initialization JS code -->
+  <script src="flutter.js" defer></script>
+</head>
+<body>
+  <script>
+    // Listen until Flutter tells us it's ready to rumble
+    window.addEventListener('flutter-initialized', function (event) {
+      const state = event.detail;
+      window['_debugCounter'] = state;
+      state.onClicksChanged(() => {
+        console.log('New clicks value: ', state.getClicks());
+      });
+    });
+    window.addEventListener('load', function(ev) {
+      // Download main.dart.js
+      _flutter.loader.loadEntrypoint({
+        serviceWorker: {
+          serviceWorkerVersion: serviceWorkerVersion,
+        },
+        onEntrypointLoaded: async function(engineInitializer) {
+          await engineInitializer.autoStart();
+        }
+      });
+    });
+  </script>
+</body>
+</html>

web_embedding/ng-flutter/flutter/web/manifest.json

@@ -0,0 +1,35 @@
+{
+    "name": "ng_companion",
+    "short_name": "ng_companion",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}

web_embedding/ng-flutter/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "ng-flutter",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "prebuild": "pushd flutter && flutter clean && flutter build web && popd",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^22.0.2",
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.1",
+    "@angular/compiler": "^22.0.2",
+    "@angular/core": "^22.0.2",
+    "@angular/forms": "^22.0.0",
+    "@angular/material": "^22.0.2",
+    "@angular/platform-browser": "^22.0.1",
+    "@angular/platform-browser-dynamic": "^22.0.0",
+    "@angular/router": "^22.0.1",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^22.0.1",
+    "@angular/cli": "~22.0.2",
+    "@angular/compiler-cli": "^22.0.1",
+    "@types/jasmine": "~6.0.0",
+    "jasmine-core": "~7.0.1",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~7.0.2"
+  },
+  "sideEffects": false
+}

web_embedding/ng-flutter/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'ng-flutter'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('ng-flutter');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('ng-flutter app is running!');
+  });
+});

web_embedding/ng-flutter/src/app/app.component.ts

@@ -0,0 +1,176 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { NgFlutterComponent } from './ng-flutter/ng-flutter.component';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  standalone: true,
+  selector: 'app-root',
+  template: `
+<mat-toolbar color="primary">
+  <button
+    aria-label="Toggle sidenav"
+    mat-icon-button
+    (click)="drawer.toggle()">
+    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+  </button>
+  <span>Angular 🤝 Flutter</span>
+  <span class="toolbar-spacer"></span>
+  <mat-icon aria-hidden="true">flutter_dash</mat-icon>
+</mat-toolbar>
+<mat-sidenav-container [hasBackdrop]=false class="sidenav-container">
+  <mat-sidenav #drawer mode="side" [opened]=false class="sidenav">
+    <mat-nav-list autosize>
+      <section>
+        <h2>Effects</h2>
+        <div class="button-list">
+          <button class="mb-control" mat-stroked-button color="primary"
+              (click)="container.classList.toggle('fx-shadow')">Shadow</button>
+          <button class="mb-control" mat-stroked-button color="primary"
+              (click)="container.classList.toggle('fx-mirror')">Mirror</button>
+          <button class="mb-control" mat-stroked-button color="primary"
+              (click)="container.classList.toggle('fx-resize')">Resize</button>
+          <button class="mb-control" mat-stroked-button color="primary"
+              (click)="container.classList.toggle('fx-spin')">Spin</button>
+        </div>
+      </section>
+
+      <section>
+        <h2>JS Interop</h2>
+        <mat-form-field appearance="outline">
+          <mat-label>Screen</mat-label>
+          <mat-select 
+              (valueChange)="this.flutterState?.setScreen($event)" 
+              [value]="this.flutterState?.getScreen()">
+            <mat-option value="counter">Counter</mat-option>
+            <mat-option value="text">TextField</mat-option>
+            <mat-option value="dash">Custom App</mat-option>
+          </mat-select>
+        </mat-form-field>
+        @if (this.flutterState?.getScreen() === 'counter') {
+          <mat-form-field appearance="outline">
+            <mat-label>Clicks</mat-label>
+            <input type="number" matInput (input)="onCounterSet($event)" [value]="this.flutterState?.getClicks()" />
+          </mat-form-field>
+        } @else {
+          <mat-form-field appearance="outline">
+            <mat-label>Text</mat-label>
+            <input type="text" matInput (input)="onTextSet($event)" [value]="this.flutterState?.getText()" />
+            @if (this.flutterState?.getText()) {
+              <button matSuffix mat-icon-button aria-label="Clear" (click)="this.flutterState?.setText('')">
+                <mat-icon>close</mat-icon>
+              </button>
+            }
+          </mat-form-field>    
+        }
+      </section>
+    </mat-nav-list>
+  </mat-sidenav>
+
+  <mat-sidenav-content class="sidenav-content">
+    <div class="flutter-app" #container>
+      <ng-flutter
+        src="flutter/main.dart.js"
+        assetBase="/flutter/"
+        (appLoaded)="onFlutterAppLoaded($event)"></ng-flutter>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>
+`,
+  styles: [`
+  :host{
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+  .toolbar-spacer {
+    flex: 1 1 auto;
+  }
+  .sidenav-container {
+    flex: 1;
+  }
+  .sidenav {
+    width: 300px;
+    padding: 10px;
+  }
+  .button-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-bottom: 20px;
+  }
+  .button-list button {
+    min-width: 130px;
+  }
+  .sidenav-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .flutter-app {
+    border: 1px solid #eee;
+    border-radius: 5px;
+    height: 480px;
+    width: 320px;
+    transition: all 150ms ease-in-out;
+    overflow: hidden;
+  }
+  `],
+  imports: [
+    NgFlutterComponent,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatSidenavModule,
+    MatIconModule,
+    CommonModule,
+    MatListModule,
+    MatCardModule,
+    MatSliderModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+  ],
+})
+export class AppComponent {
+  title = 'ng-flutter';
+  flutterState?: any;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef, private breakpointObserver: BreakpointObserver) { }
+
+  onFlutterAppLoaded(state: any) {
+    this.flutterState = state;
+    this.flutterState.onClicksChanged(() => { this.onCounterChanged() });
+    this.flutterState.onTextChanged(() => { this.onTextChanged() });
+  }
+
+  onCounterSet(event: Event) {
+    let clicks = parseInt((event.target as HTMLInputElement).value, 10) || 0;
+    this.flutterState.setClicks(clicks);
+  }
+
+  onTextSet(event: Event) {
+    this.flutterState.setText((event.target as HTMLInputElement).value || '');
+  }
+
+  // I need to force a change detection here. When clicking on the "Decrement"
+  // button, everything works fine, but clicking on Flutter doesn't trigger a
+  // repaint (even though this method is called)
+  onCounterChanged() {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  onTextChanged() {
+    this.changeDetectorRef.detectChanges();
+  }
+}

web_embedding/ng-flutter/src/app/ng-flutter/ng-flutter.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgFlutterComponent } from './ng-flutter.component';
+
+describe('NgFlutterComponent', () => {
+  let component: NgFlutterComponent;
+  let fixture: ComponentFixture<NgFlutterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NgFlutterComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NgFlutterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web_embedding/ng-flutter/src/app/ng-flutter/ng-flutter.component.ts

@@ -0,0 +1,65 @@
+import { Component, AfterViewInit, SimpleChanges, ViewChild, ElementRef, Input, EventEmitter, Output } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+// The global _flutter namespace
+declare var _flutter: any;
+declare var window: {
+  _debug: any
+};
+
+@Component({
+  selector: 'ng-flutter',
+  standalone: true,
+  template: `
+  <div #flutterTarget>
+    <div class="spinner">
+      <mat-spinner></mat-spinner>
+    </div>
+  </div>
+  `,
+  styles: [`
+    :host div {
+      width: 100%;
+      height: 100%;
+    }
+    .spinner {
+      display: flex;
+      justify-content: center;
+      align-items: center;    
+    }`,
+  ],
+  imports: [
+    MatProgressSpinnerModule,
+  ],
+})
+export class NgFlutterComponent implements AfterViewInit {
+  // The target that will host the Flutter app.
+  @ViewChild('flutterTarget') flutterTarget!: ElementRef;
+
+  @Input() src: String = 'main.dart.js';
+  @Input() assetBase: String = '';
+  @Output() appLoaded: EventEmitter<Object> = new EventEmitter<Object>();
+
+  ngAfterViewInit(): void {
+    const target: HTMLElement = this.flutterTarget.nativeElement;
+
+    _flutter.loader.loadEntrypoint({
+      entrypointUrl: this.src,
+      onEntrypointLoaded: async (engineInitializer: any) => {
+        let appRunner = await engineInitializer.initializeEngine({
+          hostElement: target,
+          assetBase: this.assetBase,
+        });
+        await appRunner.runApp();
+      }
+    });
+
+    target.addEventListener("flutter-initialized", (event: Event) => {
+      let state = (event as CustomEvent).detail;
+      window._debug = state;
+      this.appLoaded.emit(state);
+    }, {
+      once: true,
+    });
+  }
+}

web_embedding/ng-flutter/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>NgFlutter</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+    <app-root></app-root>
+</body>
+</html>

web_embedding/ng-flutter/src/main.ts

@@ -0,0 +1,14 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter, Routes } from '@angular/router';
+import { AppComponent } from './app/app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { importProvidersFrom } from '@angular/core';
+
+const appRoutes: Routes = [];
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideRouter(appRoutes),
+    importProvidersFrom(BrowserAnimationsModule)
+  ]
+})

web_embedding/ng-flutter/src/styles.css

@@ -0,0 +1,54 @@
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+/* FX */
+.fx-resize {
+  width: 480px !important;
+  height: 320px !important;
+}
+.fx-spin { animation: spin 6400ms ease-in-out infinite; }
+.fx-shadow { position: relative; overflow: visible !important; }
+.fx-shadow::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  top: calc(100% - 1px);
+  left: 0;
+  height: 1px;
+  background-color: black;
+  border-radius: 50%;
+  z-index: -1;
+  transform: rotateX(80deg);
+  box-shadow: 0px 0px 60px 38px rgb(0 0 0 / 25%);
+}
+.fx-mirror {
+  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
+}
+
+@keyframes spin {
+  0% {
+    transform: perspective(1000px) rotateY(0deg);
+    animation-timing-function: ease-in-out;
+  }
+  10% {
+    transform: perspective(1000px) rotateY(0deg);
+    animation-timing-function: ease-in-out;
+  }
+  40% {
+    transform: perspective(1000px) rotateY(180deg);
+    animation-timing-function: ease-in-out;
+  }
+  60% {
+    transform: perspective(1000px) rotateY(180deg);
+    animation-timing-function: ease-in-out;
+  }
+  90% {
+    transform: perspective(1000px) rotateY(359deg);
+    animation-timing-function: ease-in-out;
+  }
+  100% {
+    transform: perspective(1000px) rotateY(360deg);
+    animation-timing-function: ease-in-out;
+  }
+}

web_embedding/ng-flutter/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

web_embedding/ng-flutter/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

web_embedding/ng-flutter/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}