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

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"
+        }
+    ]
+}