Clean up ng-flutter a bit (#2236)

No functional change, just while I was verifying it still works with the
latest Angular releases, completed some cleanup as well.

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

@@ -1,4 +1,4 @@
-// ignore_for_file: avoid_web_libraries_in_flutter
+import 'dart:js_interop' show createJSInteropWrapper;
 
 import 'package:flutter/material.dart';
 
@@ -25,16 +25,15 @@ class _MyAppState extends State<MyApp> {
   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
   final ValueNotifier<String> _text = ValueNotifier<String>('');
 
-  late final DemoAppStateManager _state;
+  late final DemoAppStateManager _state = DemoAppStateManager(
+    screen: _screen,
+    counter: _counter,
+    text: _text,
+  );
 
   @override
   void initState() {
     super.initState();
-    _state = DemoAppStateManager(
-      screen: _screen,
-      counter: _counter,
-      text: _text,
-    );
     final export = createJSInteropWrapper(_state);
 
     // Emit this through the root object of the flutter app :)
@@ -60,14 +59,9 @@ class _MyAppState extends State<MyApp> {
     );
   }
 
-  Widget demoScreenRouter(DemoScreen which) {
-    switch (which) {
-      case DemoScreen.counter:
-        return CounterDemo(counter: _counter);
-      case DemoScreen.text:
-        return TextFieldDemo(text: _text);
-      case DemoScreen.dash:
-        return DashDemo(text: _text);
-    }
-  }
+  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

@@ -1,13 +1,13 @@
 import 'package:flutter/material.dart';
 
 class CounterDemo extends StatefulWidget {
-  final ValueNotifier<int> counter;
-
   const CounterDemo({
     super.key,
     required this.counter,
   });
 
+  final ValueNotifier<int> counter;
+
   @override
   State<CounterDemo> createState() => _CounterDemoState();
 }

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

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 
 class DashDemo extends StatefulWidget {
-  final ValueNotifier<String> text;
-
   const DashDemo({super.key, required this.text});
 
+  final ValueNotifier<String> text;
+
   @override
   State<DashDemo> createState() => _DashDemoState();
 }
@@ -12,28 +12,28 @@ class DashDemo extends StatefulWidget {
 class _DashDemoState extends State<DashDemo> {
   final double textFieldHeight = 80;
   final Color colorPrimary = Colors.blue.shade700;
-  late TextEditingController textController;
+  late final TextEditingController textController;
 
-  int totalCharCount = 0;
+  int _totalCharCount = 0;
 
   @override
   void initState() {
     super.initState();
-    // Initial value of the text box
-    totalCharCount = widget.text.value.length;
+    // 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
+    // Report changes.
     textController.addListener(_onTextControllerChange);
-    // Listen to changes from the outside
+    // Listen to changes from the outside.
     widget.text.addListener(_onTextStateChanged);
   }
 
   void _onTextControllerChange() {
     widget.text.value = textController.text;
     setState(() {
-      totalCharCount = textController.text.length;
+      _totalCharCount = textController.text.length;
     });
   }
 
@@ -73,35 +73,38 @@ class _DashDemoState extends State<DashDemo> {
                 children: [
                   Text(
                     'COUNT WITH DASH!',
-                    style: Theme.of(context).textTheme.titleLarge!.copyWith(
-                          color: Colors.white,
-                        ),
+                    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'),
-                                )),
-                          )),
+                        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,
-                        ),
+                    '$_totalCharCount',
+                    style: Theme.of(context)
+                        .textTheme
+                        .displayLarge!
+                        .copyWith(color: Colors.white),
                   ),
                 ],
               ),

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

@@ -9,18 +9,18 @@ class TextFieldDemo extends StatefulWidget {
 }
 
 class _TextFieldDemoState extends State<TextFieldDemo> {
-  late TextEditingController textController;
+  late final TextEditingController textController;
 
   @override
   void initState() {
     super.initState();
-    // Initial value of the text box
+    // Initial value of the text box.
     textController = TextEditingController.fromValue(TextEditingValue(
         text: widget.text.value,
         selection: TextSelection.collapsed(offset: widget.text.value.length)));
-    // Report changes
+    // Report changes.
     textController.addListener(_onTextControllerChange);
-    // Listen to changes from the outside
+    // Listen to changes from the outside.
     widget.text.addListener(_onTextStateChanged);
   }
 

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

@@ -3,5 +3,3 @@ library;
 
 export 'js_interop/counter_state_manager.dart';
 export 'js_interop/helper.dart' show broadcastAppEvent;
-
-export 'dart:js_interop' show createJSInteropWrapper;

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

@@ -4,7 +4,8 @@ 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?;
+  final HTMLElement? root =
+      document.querySelector('[flt-renderer]') as HTMLElement?;
   assert(root != null, 'Flutter root element cannot be found!');
 
   final eventDetails = CustomEventInit(detail: data);