chore!: update to flutter 3.22.0

README.md

@@ -76,12 +76,12 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
           themeMode: themeMode,
           theme: ThemeData(
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: light.background,
+            scaffoldBackgroundColor: light.surfaceTertiary,
             colorScheme: light,
           ),
           darkTheme: ThemeData(
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: dark.background,
+            scaffoldBackgroundColor: dark.surfaceTertiary,
             colorScheme: dark,
           ),
         );

example/lib/main.dart

@@ -51,14 +51,14 @@ class ZetaExample extends StatelessWidget {
           theme: ThemeData(
             useMaterial3: true,
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: light.background,
+            scaffoldBackgroundColor: light.surfaceTertiary,
             colorScheme: light,
             textTheme: zetaTextTheme,
           ),
           darkTheme: ThemeData(
             useMaterial3: true,
             fontFamily: themeData.fontFamily,
-            scaffoldBackgroundColor: dark.background,
+            scaffoldBackgroundColor: dark.surfaceTertiary,
             colorScheme: dark,
             textTheme: zetaTextTheme,
           ),

example/lib/pages/components/progress_example.dart

@@ -12,7 +12,7 @@ class ProgressExample extends StatefulWidget {
 }
 
 class ProgressExampleState extends State<ProgressExample> {
-  MaterialStatesController controller = MaterialStatesController();
+  WidgetStatesController controller = WidgetStatesController();
 
   @override
   void initState() {

example/widgetbook/main.dart

@@ -190,14 +190,14 @@ class HotReload extends StatelessWidget {
                       themeMode: themeMode,
                       theme: ThemeData(
                         useMaterial3: true,
-                        scaffoldBackgroundColor: light.background,
+                        scaffoldBackgroundColor: light.surfaceTertiary,
                         colorScheme: light,
                         textTheme: zetaTextTheme,
                         brightness: Brightness.light,
                       ),
                       darkTheme: ThemeData(
                         useMaterial3: true,
-                        scaffoldBackgroundColor: dark.background,
+                        scaffoldBackgroundColor: dark.surfaceTertiary,
                         colorScheme: dark,
                         textTheme: zetaTextTheme,
                         brightness: Brightness.dark,

lib/src/components/accordion/accordion.dart

@@ -110,25 +110,25 @@ class _ZetaAccordionState extends State<ZetaAccordion> with TickerProviderStateM
           children: [
             TextButton(
               style: ButtonStyle(
-                shape: MaterialStatePropertyAll(
+                shape: WidgetStatePropertyAll(
                   RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none),
                 ),
-                overlayColor: MaterialStateProperty.resolveWith((states) {
-                  if (states.contains(MaterialState.hovered)) {
+                overlayColor: WidgetStateProperty.resolveWith((states) {
+                  if (states.contains(WidgetState.hovered)) {
                     return zetaColors.cool.shade20;
                   }
-                  if (states.contains(MaterialState.pressed)) {
+                  if (states.contains(WidgetState.pressed)) {
                     return zetaColors.cool.shade30;
                   }
 
-                  if (states.contains(MaterialState.focused)) {
+                  if (states.contains(WidgetState.focused)) {
                     return Colors.transparent;
                   }
 
                   return null;
                 }),
-                side: MaterialStateProperty.resolveWith((states) {
-                  if (states.contains(MaterialState.focused)) {
+                side: WidgetStateProperty.resolveWith((states) {
+                  if (states.contains(WidgetState.focused)) {
                     return BorderSide(color: zetaColors.blue.shade50, width: 2);
                   }
                   return null;

lib/src/components/breadcrumbs/breadcrumbs.dart

@@ -169,7 +169,7 @@ class ZetaBreadCrumb extends StatefulWidget {
 }
 
 class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
-  final controller = MaterialStatesController();
+  final controller = WidgetStatesController();
 
   @override
   void initState() {
@@ -189,7 +189,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
       onTap: widget.onPressed,
       enableFeedback: false,
       splashColor: Colors.transparent,
-      overlayColor: MaterialStateProperty.resolveWith((states) {
+      overlayColor: WidgetStateProperty.resolveWith((states) {
         return Colors.transparent;
       }),
       child: Row(
@@ -212,8 +212,8 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   }
 
   /// Get color of breadcrumb based on state.
-  Color getColor(Set<MaterialState> states, ZetaColors colors) {
-    if (states.contains(MaterialState.hovered)) {
+  Color getColor(Set<WidgetState> states, ZetaColors colors) {
+    if (states.contains(WidgetState.hovered)) {
       return colors.blue;
     }
     if (widget.isSelected) return colors.black;
@@ -224,7 +224,7 @@ class _ZetaBreadCrumbState extends State<ZetaBreadCrumb> {
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
+      DiagnosticsProperty<WidgetStatesController>(
         'controller',
         controller,
       ),
@@ -272,31 +272,31 @@ class _BreadCrumbsTruncatedState extends State<BreadCrumbsTruncated> {
               });
             },
             style: ButtonStyle(
-              backgroundColor: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.hovered)) {
+              backgroundColor: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.hovered)) {
                   return colors.surfaceHovered;
                 }
-                if (states.contains(MaterialState.pressed)) {
+                if (states.contains(WidgetState.pressed)) {
                   return colors.primary.shade10;
                 }
-                if (states.contains(MaterialState.disabled)) {
+                if (states.contains(WidgetState.disabled)) {
                   return colors.surfaceDisabled;
                 }
                 return colors.warm.shade10;
               }),
-              foregroundColor: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.disabled)) {
+              foregroundColor: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.disabled)) {
                   return colors.textDisabled;
                 }
                 return colors.textDefault;
               }),
-              shape: MaterialStatePropertyAll(
+              shape: WidgetStatePropertyAll(
                 RoundedRectangleBorder(
                   borderRadius: (widget.rounded ? ZetaRadius.minimal : ZetaRadius.none),
                 ),
               ),
-              side: MaterialStateProperty.resolveWith((states) {
-                if (states.contains(MaterialState.focused)) {
+              side: WidgetStateProperty.resolveWith((states) {
+                if (states.contains(WidgetState.focused)) {
                   return BorderSide(
                     width: ZetaSpacing.x0_5,
                     color: colors.primary.shade100,
@@ -307,9 +307,9 @@ class _BreadCrumbsTruncatedState extends State<BreadCrumbsTruncated> {
                 }
                 return null;
               }),
-              padding: MaterialStateProperty.all(EdgeInsets.zero),
-              minimumSize: MaterialStateProperty.all(Size.zero),
-              elevation: const MaterialStatePropertyAll(0),
+              padding: WidgetStateProperty.all(EdgeInsets.zero),
+              minimumSize: WidgetStateProperty.all(Size.zero),
+              elevation: const WidgetStatePropertyAll(0),
             ),
             child: Icon(
               widget.rounded ? ZetaIcons.more_horizontal_round : ZetaIcons.more_horizontal_sharp,

lib/src/components/buttons/button_group.dart

@@ -189,14 +189,14 @@ class ZetaGroupButton extends StatefulWidget {
 }
 
 class _ZetaGroupButtonState extends State<ZetaGroupButton> {
-  late MaterialStatesController controller;
+  late WidgetStatesController controller;
 
   @override
   void initState() {
     super.initState();
-    controller = MaterialStatesController();
+    controller = WidgetStatesController();
     controller.addListener(() {
-      if (!controller.value.contains(MaterialState.disabled) && context.mounted && mounted) {
+      if (!controller.value.contains(WidgetState.disabled) && context.mounted && mounted) {
         // TODO(UX-1005): setState causing exception when going from disabled to enabled.
         setState(() {});
       }
@@ -225,7 +225,7 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
           top: borderSide,
           left: borderSide,
           bottom: borderSide,
-          right: controller.value.contains(MaterialState.focused)
+          right: controller.value.contains(WidgetState.focused)
               ? BorderSide(color: colors.blue.shade50, width: 2)
               : (widget.isFinal)
                   ? borderSide
@@ -259,15 +259,15 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
   double get _padding => widget.isLarge ? ZetaSpacing.x4 : ZetaSpacing.x3;
 
   BorderSide _getBorderSide(
-    Set<MaterialState> states,
+    Set<WidgetState> states,
     ZetaColors colors,
     bool finalButton,
   ) {
-    if (states.contains(MaterialState.focused)) {
+    if (states.contains(WidgetState.focused)) {
       return BorderSide(color: colors.blue.shade50, width: ZetaSpacing.x0_5);
     }
     if (widget.isInverse) return BorderSide(color: colors.black);
-    if (states.contains(MaterialState.disabled)) {
+    if (states.contains(WidgetState.disabled)) {
       return BorderSide(color: colors.cool.shade40);
     }
     return BorderSide(
@@ -293,45 +293,40 @@ class _ZetaGroupButtonState extends State<ZetaGroupButton> {
 
   ButtonStyle getStyle(ZetaWidgetBorder borderType, ZetaColors colors) {
     return ButtonStyle(
-      shape: MaterialStateProperty.all(
+      shape: WidgetStateProperty.all(
         RoundedRectangleBorder(
           borderRadius: _getRadius(borderType),
         ),
       ),
-      backgroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
+      backgroundColor: WidgetStateProperty.resolveWith<Color?>((states) {
         if (widget.isInverse) return colors.cool.shade100;
 
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.surfaceDisabled;
         }
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return colors.primary.shade10;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return colors.cool.shade20;
         }
         return colors.surfacePrimary;
       }),
-      foregroundColor: MaterialStateProperty.resolveWith<Color?>((states) {
-        if (states.contains(MaterialState.disabled)) {
+      foregroundColor: WidgetStateProperty.resolveWith<Color?>((states) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         if (widget.isInverse) return colors.cool.shade100.onColor;
         return colors.textDefault;
       }),
-      elevation: const MaterialStatePropertyAll(0),
-      padding: MaterialStateProperty.all(EdgeInsets.zero),
+      elevation: const WidgetStatePropertyAll(0),
+      padding: WidgetStateProperty.all(EdgeInsets.zero),
     );
   }
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(
-      DiagnosticsProperty<MaterialStatesController>(
-        'controller',
-        controller,
-      ),
-    );
+    properties.add(DiagnosticsProperty<WidgetStatesController>('controller', controller));
   }
 }

lib/src/components/buttons/button_style.dart

@@ -91,28 +91,28 @@ ButtonStyle buttonStyle(
   final bool isSolid = type.solid || backgroundColor != null;
 
   return ButtonStyle(
-    minimumSize: MaterialStateProperty.all(const Size.square(32)),
-    shape: MaterialStateProperty.all(
+    minimumSize: WidgetStateProperty.all(const Size.square(32)),
+    shape: WidgetStateProperty.all(
       RoundedRectangleBorder(borderRadius: borderType.radius),
     ),
-    backgroundColor: MaterialStateProperty.resolveWith<Color?>(
+    backgroundColor: WidgetStateProperty.resolveWith<Color?>(
       (states) {
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.surfaceDisabled;
         }
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return isSolid ? color.shade70 : colors.primary.shade10;
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return isSolid ? color.shade50 : colors.cool.shade20;
         }
         if (backgroundColor != null) return backgroundColor;
         return isSolid ? color : Colors.transparent;
       },
     ),
-    foregroundColor: MaterialStateProperty.resolveWith<Color?>(
+    foregroundColor: WidgetStateProperty.resolveWith<Color?>(
       (states) {
-        if (states.contains(MaterialState.disabled)) {
+        if (states.contains(WidgetState.disabled)) {
           return colors.textDisabled;
         }
         switch (type) {
@@ -129,15 +129,15 @@ ButtonStyle buttonStyle(
         }
       },
     ),
-    overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+    overlayColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
       return null;
     }),
-    side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (type.border && states.contains(MaterialState.disabled)) {
+    side: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (type.border && states.contains(WidgetState.disabled)) {
         return BorderSide(color: colors.borderDisabled);
       }
       // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused.
-      if (states.contains(MaterialState.focused)) {
+      if (states.contains(WidgetState.focused)) {
         return BorderSide(color: colors.blue, width: ZetaSpacing.x0_5);
       }
       if (type.border) {
@@ -148,7 +148,7 @@ ButtonStyle buttonStyle(
 
       return null;
     }),
-    elevation: const MaterialStatePropertyAll(0),
-    padding: MaterialStateProperty.all(EdgeInsets.zero),
+    elevation: const WidgetStatePropertyAll(0),
+    padding: WidgetStateProperty.all(EdgeInsets.zero),
   );
 }

lib/src/components/buttons/fab.dart

@@ -127,14 +127,14 @@ class _ZetaFABState extends State<ZetaFAB> {
         backgroundColor: backgroundColor,
         foregroundColor: backgroundColor.onColor,
       ).copyWith(
-        overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-          if (states.contains(MaterialState.hovered)) return colors.hover;
-          if (states.contains(MaterialState.pressed)) return colors.selected;
+        overlayColor: WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+          if (states.contains(WidgetState.hovered)) return colors.hover;
+          if (states.contains(WidgetState.pressed)) return colors.selected;
           return null;
         }),
-        side: MaterialStateProperty.resolveWith(
-          (Set<MaterialState> states) {
-            if (states.contains(MaterialState.focused)) {
+        side: WidgetStateProperty.resolveWith(
+          (Set<WidgetState> states) {
+            if (states.contains(WidgetState.focused)) {
               // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused.
               return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaSpacing.x0_5);
             }