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

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));
+}