chore: upgrade flutter to 3.22 and compile app to wasm

.github/workflows/deploy_app_dev.yaml

@@ -14,9 +14,8 @@ jobs:
       - uses: subosito/flutter-action@v2
         with:
           channel: "stable"
-          flutter-version: 3.19.6
       - run: flutter packages get
-      - run: flutter build web --web-renderer canvaskit -t lib/main_development.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY }}
+      - run: flutter build web -t lib/main_development.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY }} --wasm
 
 
       - uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/deploy_app_prod.yaml

@@ -12,7 +12,7 @@ jobs:
         with:
           channel: "stable"
       - run: flutter packages get
-      - run: flutter build web --web-renderer canvaskit -t lib/main_production.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY_PROD }}
+      - run: flutter build web -t lib/main_production.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY_PROD }} --wasm
 
 
       - uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/deploy_app_staging.yaml

@@ -11,9 +11,8 @@ jobs:
       - uses: subosito/flutter-action@v2
         with:
           channel: "stable"
-          flutter-version: 3.19.6
       - run: flutter packages get
-      - run: flutter build web --web-renderer canvaskit -t lib/main_staging.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY }}
+      - run: flutter build web -t lib/main_staging.dart --dart-define RECAPTCHA_KEY=${{ secrets.RECAPTCHA_KEY }} --wasm
 
 
       - uses: FirebaseExtended/action-hosting-deploy@v0

.github/workflows/io_crossword_ui.yaml

@@ -16,6 +16,6 @@ jobs:
   build:
     uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/flutter_package.yml@v1
     with:
-      flutter_version: 3.19.6
+      flutter_channel: stable
       working_directory: packages/io_crossword_ui
       coverage_excludes: "**/*.g.dart"

.github/workflows/main.yaml

@@ -19,7 +19,7 @@ jobs:
   build:
     uses: VeryGoodOpenSource/very_good_workflows/.github/workflows/flutter_package.yml@v1
     with:
-      flutter_version: 3.19.6
+      flutter_channel: stable
       coverage_excludes: "*.gen.dart"
 
   spell-check:

api/backend_admin/pubspec.yaml

@@ -4,7 +4,8 @@ version: 1.0.0+1
 publish_to: none
 
 environment:
-  sdk: "^3.3.0"
+  sdk: ">=3.4.0 <4.0.0"
+  flutter: ">=3.22.0"
 
 dependencies:
   bloc: ^8.1.3
@@ -21,7 +22,7 @@ dependencies:
   game_domain:
     path: ../packages/game_domain
   http: ^1.2.1
-  intl: ^0.18.1
+  intl: ^0.19.0
 
 dev_dependencies:
   bloc_test: ^9.1.6

lib/main_development.dart

@@ -1,7 +1,6 @@
-// ignore_for_file: avoid_web_libraries_in_flutter
-
 import 'dart:async';
-import 'dart:js' as js;
+import 'dart:js_interop' as js;
+import 'dart:js_interop_unsafe';
 
 import 'package:api_client/api_client.dart';
 import 'package:authentication_repository/authentication_repository.dart';
@@ -18,8 +17,10 @@ import 'package:leaderboard_repository/leaderboard_repository.dart';
 
 void main() async {
   if (kDebugMode) {
-    js.context['FIREBASE_APPCHECK_DEBUG_TOKEN'] =
-        const String.fromEnvironment('APPCHECK_DEBUG_TOKEN');
+    js.globalContext.setProperty(
+      'FIREBASE_APPCHECK_DEBUG_TOKEN'.toJS,
+      const String.fromEnvironment('APPCHECK_DEBUG_TOKEN').toJS,
+    );
   }
 
   WidgetsFlutterBinding.ensureInitialized();

packages/io_crossword_ui/lib/src/theme/io_crossword_theme.dart

@@ -27,6 +27,8 @@ class IoCrosswordTheme {
     return ThemeData(
       useMaterial3: true,
       colorScheme: colorScheme,
+      scaffoldBackgroundColor: colorScheme.surface,
+      dialogBackgroundColor: colorScheme.surface,
       textTheme: _textTheme.textTheme,
       tabBarTheme: _tabBarTheme,
       cardColor: _cardTheme.plain.color,
@@ -194,7 +196,7 @@ class IoCrosswordTheme {
           color: IoCrosswordColors.mediumGray,
         ),
       ).copyWith(
-        iconColor: MaterialStatePropertyAll(
+        iconColor: WidgetStatePropertyAll(
           colorScheme.primary,
         ),
       ),
@@ -269,9 +271,9 @@ class IoCrosswordTheme {
         padding: const EdgeInsets.symmetric(horizontal: 24),
         textStyle: _textTheme.body2,
       ).copyWith(
-        shape: MaterialStateProperty.resolveWith(
+        shape: WidgetStateProperty.resolveWith(
           (states) {
-            if (states.contains(MaterialState.disabled)) {
+            if (states.contains(WidgetState.disabled)) {
               return const StadiumBorder(side: BorderSide(width: 2));
             }
             return GradientStadiumBorder(
@@ -293,9 +295,9 @@ class IoCrosswordTheme {
           horizontal: 18,
         ),
       ).copyWith(
-        shape: MaterialStateProperty.resolveWith(
+        shape: WidgetStateProperty.resolveWith(
           (states) {
-            if (states.contains(MaterialState.disabled)) {
+            if (states.contains(WidgetState.disabled)) {
               return const StadiumBorder(
                 side: BorderSide(
                   width: 2,
@@ -322,9 +324,9 @@ class IoCrosswordTheme {
           horizontal: 18,
         ),
       ).copyWith(
-        shape: MaterialStateProperty.resolveWith(
+        shape: WidgetStateProperty.resolveWith(
           (states) {
-            if (states.contains(MaterialState.disabled)) {
+            if (states.contains(WidgetState.disabled)) {
               return const StadiumBorder(side: BorderSide(width: 2));
             }
 
@@ -378,41 +380,41 @@ class IoCrosswordTheme {
   IoIconButtonTheme get _iconButtonTheme {
     return IoIconButtonTheme(
       flat: ButtonStyle(
-        iconSize: const MaterialStatePropertyAll<double>(20),
-        side: const MaterialStatePropertyAll<BorderSide>(BorderSide.none),
-        iconColor: MaterialStateColor.resolveWith((states) {
-          if (states.contains(MaterialState.disabled)) {
+        iconSize: const WidgetStatePropertyAll<double>(20),
+        side: const WidgetStatePropertyAll<BorderSide>(BorderSide.none),
+        iconColor: WidgetStateColor.resolveWith((states) {
+          if (states.contains(WidgetState.disabled)) {
             return IoCrosswordColors.mediumGray;
           }
           return IoCrosswordColors.seedWhite;
         }),
         backgroundColor:
-            const MaterialStatePropertyAll<Color>(Colors.transparent),
+            const WidgetStatePropertyAll<Color>(Colors.transparent),
       ),
       outlined: ButtonStyle(
-        iconSize: const MaterialStatePropertyAll<double>(20),
-        shape: const MaterialStatePropertyAll<OutlinedBorder>(
+        iconSize: const WidgetStatePropertyAll<double>(20),
+        shape: const WidgetStatePropertyAll<OutlinedBorder>(
           CircleBorder(side: BorderSide(color: IoCrosswordColors.mediumGray)),
         ),
-        iconColor: MaterialStateColor.resolveWith((states) {
-          if (states.contains(MaterialState.disabled)) {
+        iconColor: WidgetStateColor.resolveWith((states) {
+          if (states.contains(WidgetState.disabled)) {
             return IoCrosswordColors.mediumGray;
           }
           return IoCrosswordColors.seedWhite;
         }),
         backgroundColor:
-            const MaterialStatePropertyAll<Color>(Colors.transparent),
+            const WidgetStatePropertyAll<Color>(Colors.transparent),
       ),
       filled: ButtonStyle(
-        iconSize: const MaterialStatePropertyAll<double>(20),
-        iconColor: MaterialStateColor.resolveWith((states) {
-          if (states.contains(MaterialState.disabled)) {
+        iconSize: const WidgetStatePropertyAll<double>(20),
+        iconColor: WidgetStateColor.resolveWith((states) {
+          if (states.contains(WidgetState.disabled)) {
             return IoCrosswordColors.mediumGray;
           }
           return IoCrosswordColors.seedWhite;
         }),
         backgroundColor:
-            const MaterialStatePropertyAll<Color>(IoCrosswordColors.mediumGray),
+            const WidgetStatePropertyAll<Color>(IoCrosswordColors.mediumGray),
       ),
     );
   }
@@ -421,9 +423,9 @@ class IoCrosswordTheme {
     final textTheme = _textTheme;
     final colorScheme = this.colorScheme;
 
-    final border = Border.all(color: colorScheme.background);
+    final border = Border.all(color: colorScheme.surface);
     final textStyle = textTheme.h2.copyWith(
-      color: colorScheme.background,
+      color: colorScheme.surface,
       height: 1.1,
     );
 
@@ -481,9 +483,9 @@ class IoCrosswordTheme {
   static TabBarTheme get _tabBarTheme {
     return TabBarTheme(
       indicatorSize: TabBarIndicatorSize.tab,
-      labelColor: MaterialStateColor.resolveWith(
+      labelColor: WidgetStateColor.resolveWith(
         (states) {
-          if (states.contains(MaterialState.selected)) {
+          if (states.contains(WidgetState.selected)) {
             return const Color(0xFF2E3233);
           }
 
@@ -499,7 +501,6 @@ class IoCrosswordTheme {
     return ColorScheme.fromSeed(
       brightness: Brightness.dark,
       seedColor: IoCrosswordColors.seedBlue,
-      background: IoCrosswordColors.darkGray,
       surface: IoCrosswordColors.darkGray,
       onSurface: IoCrosswordColors.seedWhite,
       surfaceTint: IoCrosswordColors.seedWhite,

packages/io_crossword_ui/test/src/border/gradient_stadium_border_test.dart

@@ -166,7 +166,7 @@ class _GoldenSubject extends StatelessWidget {
       data: themeData,
       child: Material(
         child: ColoredBox(
-          color: themeData.colorScheme.background,
+          color: themeData.colorScheme.surface,
           child: Center(child: child),
         ),
       ),

packages/io_crossword_ui/test/src/theme/extension/io_icon_button_theme_test.dart

@@ -7,24 +7,24 @@ void main() {
     test('lerps', () {
       final from = IoIconButtonTheme(
         flat: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff00ff00)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
         outlined: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff00ff00)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
         filled: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff00ff00)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
       );
       final to = IoIconButtonTheme(
         flat: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff00ff00)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
         outlined: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff0000ff)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff0000ff)),
         ),
         filled: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff0000ff)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff0000ff)),
         ),
       );
 

packages/io_crossword_ui/test/src/theme/extension/io_outline_button_theme_test.dart

@@ -7,12 +7,12 @@ void main() {
     test('lerps', () {
       final from = IoOutlineButtonTheme(
         simpleBorder: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff00ff00)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
       );
       final to = IoOutlineButtonTheme(
         simpleBorder: ButtonStyle(
-          backgroundColor: MaterialStateProperty.all(const Color(0xff0000ff)),
+          backgroundColor: WidgetStateProperty.all(const Color(0xff0000ff)),
         ),
       );
 

packages/io_crossword_ui/test/src/theme/io_crossword_theme_test.dart

@@ -19,9 +19,9 @@ void main() {
         final outlinedBorder =
             IoCrosswordTheme().themeData.outlinedButtonTheme.style!.shape!;
 
-        test('displays StadiumBorder with ${MaterialState.disabled}', () {
+        test('displays StadiumBorder with ${WidgetState.disabled}', () {
           expect(
-            outlinedBorder.resolve({MaterialState.disabled}),
+            outlinedBorder.resolve({WidgetState.disabled}),
             equals(isA<StadiumBorder>()),
           );
         });
@@ -39,8 +39,8 @@ void main() {
           );
         });
 
-        for (final state in MaterialState.values.toList()
-          ..remove(MaterialState.disabled)) {
+        for (final state in WidgetState.values.toList()
+          ..remove(WidgetState.disabled)) {
           test('displays GradientOutlinedBorder with $state', () {
             expect(
               outlinedBorder.resolve({state}),
@@ -64,9 +64,9 @@ void main() {
             .simpleBorder
             .shape!;
 
-        test('displays StadiumBorder with ${MaterialState.disabled}', () {
+        test('displays StadiumBorder with ${WidgetState.disabled}', () {
           expect(
-            outlinedBorder.resolve({MaterialState.disabled}),
+            outlinedBorder.resolve({WidgetState.disabled}),
             equals(isA<StadiumBorder>()),
           );
         });
@@ -84,8 +84,8 @@ void main() {
           );
         });
 
-        for (final state in MaterialState.values.toList()
-          ..remove(MaterialState.disabled)) {
+        for (final state in WidgetState.values.toList()
+          ..remove(WidgetState.disabled)) {
           test('displays mediumGray color with $state', () {
             expect(
               outlinedBorder.resolve({state}),
@@ -105,9 +105,9 @@ void main() {
         final outlinedBorder =
             IoCrosswordTheme.geminiOutlinedButtonThemeData.style!.shape!;
 
-        test('displays StadiumBorder with ${MaterialState.disabled}', () {
+        test('displays StadiumBorder with ${WidgetState.disabled}', () {
           expect(
-            outlinedBorder.resolve({MaterialState.disabled}),
+            outlinedBorder.resolve({WidgetState.disabled}),
             equals(isA<StadiumBorder>()),
           );
         });
@@ -125,8 +125,8 @@ void main() {
           );
         });
 
-        for (final state in MaterialState.values.toList()
-          ..remove(MaterialState.disabled)) {
+        for (final state in WidgetState.values.toList()
+          ..remove(WidgetState.disabled)) {
           test('displays GradientOutlinedBorder with $state', () {
             expect(
               outlinedBorder.resolve({state}),
@@ -157,9 +157,9 @@ void main() {
         });
       });
 
-      test('background color is IoCrosswordColors.seedBlack', () {
+      test('surface color is IoCrosswordColors.darkGray', () {
         expect(
-          IoCrosswordTheme().themeData.colorScheme.background,
+          IoCrosswordTheme().themeData.colorScheme.surface,
           IoCrosswordColors.darkGray,
         );
       });
@@ -351,18 +351,18 @@ void main() {
 
     group('iconButton', () {
       group('iconColor', () {
-        test('is mediumGray when ${MaterialState.disabled}', () {
+        test('is mediumGray when ${WidgetState.disabled}', () {
           final iconButtonTheme = IoCrosswordTheme().themeData.iconButtonTheme;
           final property = iconButtonTheme.style!.iconColor!;
 
           expect(
-            property.resolve({MaterialState.disabled}),
+            property.resolve({WidgetState.disabled}),
             IoCrosswordColors.mediumGray,
           );
         });
 
-        for (final state in MaterialState.values.toSet()
-          ..remove(MaterialState.disabled)) {
+        for (final state in WidgetState.values.toSet()
+          ..remove(WidgetState.disabled)) {
           test('is seedWhite when $state', () {
             final iconButtonTheme =
                 IoCrosswordTheme().themeData.iconButtonTheme;