Updates for 3.22 (#2266)

Updates for 3.22

---------

Co-authored-by: Brett Morgan <brettmorgan@google.com>
Co-authored-by: Qun Cheng <chengqunq@gmail.com>
Co-authored-by: Brett Morgan <brett.morgan@gmail.com>

animations/test/basics/animated_builder_test.dart

@@ -17,8 +17,7 @@ void main() {
 
       // Get the initial color of the button.
       ElevatedButton button = tester.widget(find.byType(ElevatedButton));
-      MaterialStateProperty<Color?>? initialColor =
+      WidgetStateProperty<Color?>? initialColor = button.style!.backgroundColor;
-          button.style!.backgroundColor;
 
       // Tap the button.
       await tester.tap(find.byType(ElevatedButton));
@@ -26,8 +25,7 @@ void main() {
 
       // Get the updated color of the button.
       button = tester.widget(find.byType(ElevatedButton));
-      MaterialStateProperty<Color?>? updatedColor =
+      WidgetStateProperty<Color?>? updatedColor = button.style!.backgroundColor;
-          button.style!.backgroundColor;
 
       // Check if the color has changed.
       expect(initialColor, isNot(updatedColor));
@@ -38,8 +36,7 @@ void main() {
 
       // Get the initial color of the button.
       ElevatedButton button = tester.widget(find.byType(ElevatedButton));
-      MaterialStateProperty<Color?>? initialColor =
+      WidgetStateProperty<Color?>? initialColor = button.style!.backgroundColor;
-          button.style!.backgroundColor;
 
       // Tap the button to trigger the animation but don't wait for it to finish.
       await tester.tap(find.byType(ElevatedButton));
@@ -48,8 +45,7 @@ void main() {
 
       // Check that the color has changed but not to the final color.
       button = tester.widget(find.byType(ElevatedButton));
-      MaterialStateProperty<Color?>? changedColor =
+      WidgetStateProperty<Color?>? changedColor = button.style!.backgroundColor;
-          button.style!.backgroundColor;
       expect(initialColor, isNot(changedColor));
 
       // Wait for the animation to finish.
@@ -57,7 +53,7 @@ void main() {
 
       // Check that the color has changed to the final color.
       button = tester.widget(find.byType(ElevatedButton));
-      MaterialStateProperty<Color?>? finalColor = button.style!.backgroundColor;
+      WidgetStateProperty<Color?>? finalColor = button.style!.backgroundColor;
       expect(changedColor, isNot(finalColor));
     });
   });

dynamic_theme/lib/widgets/message_widget.dart

@@ -39,7 +39,7 @@ class MessageWidget extends StatelessWidget {
             decoration: BoxDecoration(
               color: isFromUser
                   ? Theme.of(context).colorScheme.primaryContainer
-                  : Theme.of(context).colorScheme.surfaceVariant,
+                  : Theme.of(context).colorScheme.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(18),
             ),
             padding: const EdgeInsets.symmetric(

experimental/linting_tool/lib/theme/app_theme.dart

@@ -86,10 +86,8 @@ abstract class AppTheme {
         error: AppColors.red200,
         onPrimary: AppColors.black900,
         onSecondary: AppColors.black900,
-        onBackground: AppColors.white50,
         onSurface: AppColors.white50,
         onError: AppColors.black900,
-        background: AppColors.black900Alpha087,
       ),
       textTheme: _buildReplyDarkTextTheme(base.textTheme),
       scaffoldBackgroundColor: AppColors.black900,

experimental/varfont_shader_puzzle/lib/styles.dart

@@ -31,16 +31,16 @@ class TextStyles {
 class ButtonStyles {
   static ButtonStyle style() {
     return ButtonStyle(
-      fixedSize: MaterialStateProperty.resolveWith<Size>((states) {
+      fixedSize: WidgetStateProperty.resolveWith<Size>((states) {
         return const Size(100, 36);
       }),
-      shape: MaterialStateProperty.resolveWith<OutlinedBorder>((states) {
+      shape: WidgetStateProperty.resolveWith<OutlinedBorder>((states) {
         return const RoundedRectangleBorder(
             borderRadius: BorderRadius.all(Radius.circular(18)));
       }),
       overlayColor: null,
-      backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
+      backgroundColor: WidgetStateProperty.resolveWith<Color?>((states) {
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return Colors.black; // Hovered bg (for desktop with mouse)
         }
         return Colors.grey[600]; // Default bg

game_template/lib/main.dart

@@ -266,7 +266,7 @@ class MyApp extends StatelessWidget {
             theme: ThemeData.from(
               colorScheme: ColorScheme.fromSeed(
                 seedColor: palette.darkPen,
-                background: palette.backgroundMain,
+                surface: palette.backgroundMain,
               ),
               textTheme: TextTheme(
                 bodyMedium: TextStyle(

gemini_tasks/lib/widgets/message_widget.dart

@@ -39,7 +39,7 @@ class MessageWidget extends StatelessWidget {
             decoration: BoxDecoration(
               color: isFromUser
                   ? Theme.of(context).colorScheme.primaryContainer
-                  : Theme.of(context).colorScheme.surfaceVariant,
+                  : Theme.of(context).colorScheme.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(18),
             ),
             padding: const EdgeInsets.symmetric(

material_3_demo/lib/color_palettes_screen.dart

@@ -250,14 +250,14 @@ class ColorSchemeView extends StatelessWidget {
               onColor: colorScheme.surface,
             ),
             ColorChip(
-              label: 'surfaceVariant',
+              label: 'surfaceContainerHighest',
-              color: colorScheme.surfaceVariant,
+              color: colorScheme.surfaceContainerHighest,
-              onColor: colorScheme.onSurfaceVariant,
+              onColor: colorScheme.surfaceContainerHighest,
             ),
             ColorChip(
-              label: 'onSurfaceVariant',
+              label: 'surfaceContainerHighest',
-              color: colorScheme.onSurfaceVariant,
+              color: colorScheme.surfaceContainerHighest,
-              onColor: colorScheme.surfaceVariant,
+              onColor: colorScheme.surfaceContainerHighest,
             ),
             ColorChip(
               label: 'surfaceTint',
@@ -303,13 +303,13 @@ class ColorSchemeView extends StatelessWidget {
           children: [
             ColorChip(
               label: 'background',
-              color: colorScheme.background,
+              color: colorScheme.surface,
-              onColor: colorScheme.onBackground,
+              onColor: colorScheme.onSurface,
             ),
             ColorChip(
-              label: 'onBackground',
+              label: 'onSurface',
-              color: colorScheme.onBackground,
+              color: colorScheme.onSurface,
-              onColor: colorScheme.background,
+              onColor: colorScheme.surface,
             ),
             ColorChip(
               label: 'scrim',

material_3_demo/lib/component_screen.dart

@@ -501,7 +501,7 @@ class Cards extends StatelessWidget {
           SizedBox(
             width: cardWidth,
             child: Card(
-              color: Theme.of(context).colorScheme.surfaceVariant,
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
               elevation: 0,
               child: Container(
                 padding: const EdgeInsets.fromLTRB(10, 5, 5, 10),
@@ -849,9 +849,9 @@ class _SwitchRowState extends State<SwitchRow> {
   bool value0 = false;
   bool value1 = true;
 
-  final MaterialStateProperty<Icon?> thumbIcon =
+  final WidgetStateProperty<Icon?> thumbIcon =
-      MaterialStateProperty.resolveWith<Icon?>((states) {
+      WidgetStateProperty.resolveWith<Icon?>((states) {
-    if (states.contains(MaterialState.selected)) {
+    if (states.contains(WidgetState.selected)) {
       return const Icon(Icons.check);
     }
     return const Icon(Icons.close);
@@ -2508,7 +2508,10 @@ class ComponentGroupDecoration extends StatelessWidget {
       child: Card(
         margin: EdgeInsets.zero,
         elevation: 0,
-        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
+        color: Theme.of(context)
+            .colorScheme
+            .surfaceContainerHighest
+            .withOpacity(0.3),
         child: Padding(
           padding: const EdgeInsets.symmetric(vertical: 20.0),
           child: Center(

material_3_demo/lib/home.dart

@@ -313,7 +313,7 @@ class _ColorSeedButton extends StatelessWidget {
     return PopupMenuButton(
       icon: Icon(
         Icons.palette_outlined,
-        color: Theme.of(context).colorScheme.onSurfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
       ),
       tooltip: 'Select a seed color',
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
@@ -367,7 +367,7 @@ class _ColorImageButton extends StatelessWidget {
     return PopupMenuButton(
       icon: Icon(
         Icons.image_outlined,
-        color: Theme.of(context).colorScheme.onSurfaceVariant,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
       ),
       tooltip: 'Select a color extraction image',
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),

material_3_demo/test/component_screen_test.dart

@@ -320,7 +320,7 @@ void main() {
 
   testWidgets('Color theme changes when a color is selected from menu',
       (tester) async {
-    Color m3BaseColor = const Color(0xff6750a4);
+    Color m3BaseColor = const Color(0xff65558f);
     await tester.pumpWidget(Container());
     await tester.pumpWidget(const App());
     await tester.pump();

provider_shopper/lib/screens/catalog.dart

@@ -58,8 +58,8 @@ class _AddButton extends StatelessWidget {
               cart.add(item);
             },
       style: ButtonStyle(
-        overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
+        overlayColor: WidgetStateProperty.resolveWith<Color?>((states) {
-          if (states.contains(MaterialState.pressed)) {
+          if (states.contains(WidgetState.pressed)) {
             return Theme.of(context).primaryColor;
           }
           return null; // Defer to the widget's default.

tool/flutter_ci_script_beta.sh

@@ -16,8 +16,7 @@ declare -ar PROJECT_NAMES=(
     "add_to_app/prebuilt_module/flutter_module"
     "analysis_defaults"
     "android_splash_screen"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+    "animations"
-    # "animations"
     "background_isolate_channels"
     "code_sharing/client"
     "code_sharing/server"
@@ -26,42 +25,36 @@ declare -ar PROJECT_NAMES=(
     "deeplink_store_example"
     "desktop_photo_search/fluent_ui"
     "desktop_photo_search/material"
-    # TODO: 'surfaceVariant' is deprecated and shouldn't be used.
+    "dynamic_theme"
-    # "dynamic_theme"
     "experimental/federated_plugin/federated_plugin"
     "experimental/federated_plugin/federated_plugin/example"
     "experimental/federated_plugin/federated_plugin_macos"
     "experimental/federated_plugin/federated_plugin_platform_interface"
     "experimental/federated_plugin/federated_plugin_web"
     "experimental/federated_plugin/federated_plugin_windows"
-    # TODO: 'onBackground' is deprecated and shouldn't be used.
+    # TODO: ewindmill to talk to team about removing.
+    # Depends on package context_menus, which breaks with Material3 by default.
     # "experimental/linting_tool"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+    "experimental/pedometer"
-    # "experimental/pedometer"
+    "experimental/pedometer/example"
-    # "experimental/pedometer/example"
+    "experimental/varfont_shader_puzzle"
-    # 'MaterialStateProperty' is deprecated and shouldn't be used.
-    # "experimental/varfont_shader_puzzle"
     "experimental/web_dashboard"
     "flutter_maps_firestore"
     "form_app"
-    # TODO: 'onBackground' is deprecated and shouldn't be used.
+    "game_template"
-    # "game_template"
+    "gemini_tasks"
-    # TODO: 'surfaceVariant' is deprecated and shouldn't be used.
-    # "gemini_tasks"
     "google_maps"
     "infinite_list"
     "ios_app_clip"
     "isolate_example"
-     # TODO(ewindmill): Add back when deps allow
+    "material_3_demo"
-     # "material_3_demo"
     "navigation_and_routing"
     "place_tracker"
     "platform_channels"
     "platform_design"
     "platform_view_swift"
     "provider_counter"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+    "provider_shopper"
-    # "provider_shopper"
     "simple_shader"
     "simplistic_calculator"
     "simplistic_editor"

tool/flutter_ci_script_master.sh

@@ -16,8 +16,7 @@ declare -ar PROJECT_NAMES=(
   "add_to_app/prebuilt_module/flutter_module"
   "analysis_defaults"
   "android_splash_screen"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+  "animations"
-    # "animations"
   "background_isolate_channels"
   "code_sharing/client"
   "code_sharing/server"
@@ -26,42 +25,35 @@ declare -ar PROJECT_NAMES=(
   "deeplink_store_example"
   "desktop_photo_search/fluent_ui"
   "desktop_photo_search/material"
-    # TODO: 'surfaceVariant' is deprecated and shouldn't be used.
-    # "dynamic_theme"
   "experimental/federated_plugin/federated_plugin"
   "experimental/federated_plugin/federated_plugin/example"
   "experimental/federated_plugin/federated_plugin_macos"
   "experimental/federated_plugin/federated_plugin_platform_interface"
   "experimental/federated_plugin/federated_plugin_web"
   "experimental/federated_plugin/federated_plugin_windows"
-    # TODO: 'onBackground' is deprecated and shouldn't be used.
+  # TODO: ewindmill to talk to team about removing.
+  # Depends on package context_menus, which breaks with Material3 by default.
   #    "experimental/linting_tool"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+  "experimental/pedometer"
-    # "experimental/pedometer"
+  "experimental/pedometer/example"
-    # "experimental/pedometer/example"
+  "experimental/varfont_shader_puzzle"
-    # 'MaterialStateProperty' is deprecated and shouldn't be used.
-    # "experimental/varfont_shader_puzzle"
   "experimental/web_dashboard"
   "flutter_maps_firestore"
   "form_app"
-    # TODO: 'onBackground' is deprecated and shouldn't be used.
+  "game_template"
-    # "game_template"
-    # TODO: 'surfaceVariant' is deprecated and shouldn't be used.
-    # "gemini_tasks"
   "google_maps"
   "infinite_list"
   "ios_app_clip"
-    "isolate_example"
+  #  Don't use 'BuildContext's across async gaps.
-     # TODO(ewindmill): Add back when deps allow
+  #  "isolate_example"
-     # "material_3_demo"
+  "material_3_demo"
   "navigation_and_routing"
   "place_tracker"
   "platform_channels"
   "platform_design"
   "platform_view_swift"
   "provider_counter"
-    # TODO: 'MaterialStateProperty' is deprecated and shouldn't be used.
+  "provider_shopper"
-    # "provider_shopper"
   "simple_shader"
   "simplistic_calculator"
   "simplistic_editor"

tool/flutter_ci_script_stable.sh

@@ -32,7 +32,9 @@ declare -ar PROJECT_NAMES=(
     "experimental/federated_plugin/federated_plugin_platform_interface"
     "experimental/federated_plugin/federated_plugin_web"
     "experimental/federated_plugin/federated_plugin_windows"
-    "experimental/linting_tool"
+    # TODO: ewindmill to talk to team about removing.
+    # Depends on package context_menus, which breaks with Material3 by default.
+    # "experimental/linting_tool"
     "experimental/pedometer"
     "experimental/pedometer/example"
     "experimental/varfont_shader_puzzle"