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.

tool/flutter_ci_script_beta.sh

@@ -16,7 +16,8 @@ declare -ar PROJECT_NAMES=(
     "add_to_app/prebuilt_module/flutter_module"
     "analysis_defaults"
     "android_splash_screen"
-    "animations"
+    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+    # "animations"
     "background_isolate_channels"
     "code_sharing/client"
     "code_sharing/server"
@@ -33,9 +34,11 @@ declare -ar PROJECT_NAMES=(
     "experimental/federated_plugin/federated_plugin_windows"
     # TODO: 'onBackground' is deprecated and shouldn't be used.
     # "experimental/linting_tool"
-    "experimental/pedometer"
+    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
-    "experimental/pedometer/example"
+    # "experimental/pedometer"
-    "experimental/varfont_shader_puzzle"
+    # "experimental/pedometer/example"
+    # 'MaterialStateProperty' is deprecated and shouldn't be used.
+    # "experimental/varfont_shader_puzzle"
     "experimental/web_dashboard"
     "flutter_maps_firestore"
     "form_app"
@@ -53,7 +56,8 @@ declare -ar PROJECT_NAMES=(
     "platform_design"
     "platform_view_swift"
     "provider_counter"
-    "provider_shopper"
+    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+    # "provider_shopper"
     "simple_shader"
     "simplistic_calculator"
     # TODO(DomesticMouse): The method 'isSelectionWithinTextBounds' isn't defined for the type 'TextEditingController'

web_embedding/ng-flutter/flutter/analysis_options.yaml

@@ -1,29 +1,23 @@
-# This file configures the analyzer, which statically analyzes Dart code to
-# check for errors, warnings, and lints.
-#
-# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
-# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
-# invoked from the command line by running `flutter analyze`.
-
-# The following line activates a set of recommended lints for Flutter apps,
-# packages, and plugins designed to encourage good coding practices.
 include: package:flutter_lints/flutter.yaml
 
+analyzer:
+  language:
+    strict-casts: true
+    strict-inference: true
+    strict-raw-types: true
+
 linter:
-  # The lint rules applied to this project can be customized in the
-  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
-  # included above or to enable additional rules. A list of all available lints
-  # and their documentation is published at
-  # https://dart-lang.github.io/linter/lints/index.html.
-  #
-  # Instead of disabling a lint rule for the entire project in the
-  # section below, it can also be suppressed for a single line of code
-  # or a specific dart file by using the `// ignore: name_of_lint` and
-  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
-  # producing the lint.
   rules:
-    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    - avoid_types_on_closure_parameters
-    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+    - avoid_void_async
-
+    - cancel_subscriptions
-# Additional information about this file can be found at
+    - close_sinks
-# https://dart.dev/guides/language/analysis-options
+    - directives_ordering
+    - package_api_docs
+    - 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

@@ -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) {
+  Widget demoScreenRouter(DemoScreen which) => switch (which) {
-    switch (which) {
+        DemoScreen.counter => CounterDemo(counter: _counter),
-      case DemoScreen.counter:
+        DemoScreen.text => TextFieldDemo(text: _text),
-        return CounterDemo(counter: _counter);
+        DemoScreen.dash => DashDemo(text: _text)
-      case DemoScreen.text:
+      };
-        return TextFieldDemo(text: _text);
-      case DemoScreen.dash:
-        return 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
+    // Initial value of the text box.
-    totalCharCount = widget.text.value.length;
+    _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(
+                    style: Theme.of(context)
-                          color: Colors.white,
+                        .textTheme
-                        ),
+                        .titleLarge!
+                        .copyWith(color: Colors.white),
                   ),
                   // Bordered dash avatar
                   Padding(
                     padding: const EdgeInsets.all(12),
                     child: ClipOval(
                       child: Container(
-                          color: Colors.white,
+                        color: Colors.white,
-                          padding: const EdgeInsets.all(2),
+                        padding: const EdgeInsets.all(2),
-                          child: ClipOval(
+                        child: ClipOval(
-                            child: Container(
+                          child: Container(
-                                color: colorPrimary,
+                            color: colorPrimary,
-                                padding: const EdgeInsets.all(2),
+                            padding: const EdgeInsets.all(2),
-                                child: const CircleAvatar(
+                            child: const CircleAvatar(
-                                  radius: 45,
+                              radius: 45,
-                                  backgroundColor: Colors.white,
+                              backgroundColor: Colors.white,
-                                  foregroundImage:
+                              foregroundImage: AssetImage('assets/dash.png'),
-                                      AssetImage('assets/dash.png'),
+                            ),
-                                )),
+                          ),
-                          )),
+                        ),
+                      ),
                     ),
                   ),
                   Text(
-                    '$totalCharCount',
+                    '$_totalCharCount',
-                    style: Theme.of(context).textTheme.displayLarge!.copyWith(
+                    style: Theme.of(context)
-                          color: Colors.white,
+                        .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);

web_embedding/ng-flutter/flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: ng_companion
 description: A flutter app with a counter that can be manipulated from JS.
-publish_to: 'none'
+publish_to: none
 version: 1.0.0
 
 environment:
@@ -10,7 +10,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  web: ^0.5.0
+  web: ^0.5.1
 
 dev_dependencies:
   flutter_test:

web_embedding/ng-flutter/package.json

@@ -11,24 +11,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.1.0",
+    "@angular/animations": "^17.3.3",
-    "@angular/cdk": "^17.1.0",
+    "@angular/cdk": "^17.3.3",
-    "@angular/common": "^17.1.0",
+    "@angular/common": "^17.3.3",
-    "@angular/compiler": "^17.1.0",
+    "@angular/compiler": "^17.3.3",
-    "@angular/core": "^17.1.0",
+    "@angular/core": "^17.3.3",
-    "@angular/forms": "^17.1.0",
+    "@angular/forms": "^17.3.3",
-    "@angular/material": "^17.1.0",
+    "@angular/material": "^17.3.3",
-    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser": "^17.3.3",
-    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.3.3",
-    "@angular/router": "^17.1.0",
+    "@angular/router": "^17.3.3",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.1.1",
+    "@angular-devkit/build-angular": "^17.3.3",
-    "@angular/cli": "~17.1.1",
+    "@angular/cli": "~17.3.3",
-    "@angular/compiler-cli": "^17.1.0",
+    "@angular/compiler-cli": "^17.3.3",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.1",
     "karma": "~6.4.2",
@@ -36,7 +36,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.3.3"
+    "typescript": "~5.4.2"
   },
   "sideEffects": false
 }