Refactor: Migrate Date picker from MaterialState and MaterialStateProperty (#164972)

Refactor: Migrate Date picker from MaterialState and
MaterialStateProperty to WidgetState and WidgetStateProperty
Part 1 of: #161052 

Part 2 will contain addition of `selectedBackgroundColor` and
`selectedForegroundColor` which fully adds the requested feature.

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [ ] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

dev/tools/gen_defaults/lib/date_picker_template.dart

@@ -49,7 +49,7 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
         shape: ${shape("md.comp.date-picker.modal.container")},
         // TODO(tahatesser): Update this to use token when gen_defaults
         // supports `CircleBorder` for fully rounded corners.
-        dayShape: const MaterialStatePropertyAll<OutlinedBorder>(CircleBorder()),
+        dayShape: const WidgetStatePropertyAll<OutlinedBorder>(CircleBorder()),
         rangePickerElevation: ${elevation("md.comp.date-picker.modal.range-selection.container")},
         rangePickerShape: ${shape("md.comp.date-picker.modal.range-selection.container")},
       );
@@ -99,46 +99,46 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
   TextStyle? get dayStyle => ${textStyle("md.comp.date-picker.modal.date.label-text")};
 
   @override
-  MaterialStateProperty<Color?>? get dayForegroundColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?>? get dayForegroundColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return ${componentColor('md.comp.date-picker.modal.date.selected.label-text')};
-      } else if (states.contains(MaterialState.disabled)) {
+      } else if (states.contains(WidgetState.disabled)) {
         return ${componentColor('md.comp.date-picker.modal.date.unselected.label-text')}.withOpacity(0.38);
       }
       return ${componentColor('md.comp.date-picker.modal.date.unselected.label-text')};
     });
 
   @override
-  MaterialStateProperty<Color?>? get dayBackgroundColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?>? get dayBackgroundColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return ${componentColor('md.comp.date-picker.modal.date.selected.container')};
       }
       return ${componentColor('md.comp.date-picker.modal.date.unselected.container')};
     });
 
   @override
-  MaterialStateProperty<Color?>? get dayOverlayColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
-        if (states.contains(MaterialState.pressed)) {
+  WidgetStateProperty<Color?>? get dayOverlayColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
+        if (states.contains(WidgetState.pressed)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'pressed')};
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'hover')};
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'focus')};
         }
       } else {
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'pressed')};
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'hover')};
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'focus')};
         }
       }
@@ -146,18 +146,18 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
     });
 
   @override
-  MaterialStateProperty<Color?>? get todayForegroundColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?>? get todayForegroundColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return ${componentColor('md.comp.date-picker.modal.date.selected.label-text')};
-      } else if (states.contains(MaterialState.disabled)) {
+      } else if (states.contains(WidgetState.disabled)) {
         return ${componentColor('md.comp.date-picker.modal.date.today.label-text')}.withOpacity(0.38);
       }
       return ${componentColor('md.comp.date-picker.modal.date.today.label-text')};
     });
 
   @override
-  MaterialStateProperty<Color?>? get todayBackgroundColor => dayBackgroundColor;
+  WidgetStateProperty<Color?>? get todayBackgroundColor => dayBackgroundColor;
 
   @override
   BorderSide? get todayBorder => ${border('md.comp.date-picker.modal.date.today.container.outline')};
@@ -166,46 +166,46 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
   TextStyle? get yearStyle => ${textStyle("md.comp.date-picker.modal.year-selection.year.label-text")};
 
   @override
-  MaterialStateProperty<Color?>? get yearForegroundColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?>? get yearForegroundColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return ${componentColor('md.comp.date-picker.modal.year-selection.year.selected.label-text')};
-      } else if (states.contains(MaterialState.disabled)) {
+      } else if (states.contains(WidgetState.disabled)) {
         return ${componentColor('md.comp.date-picker.modal.year-selection.year.unselected.label-text')}.withOpacity(0.38);
       }
       return ${componentColor('md.comp.date-picker.modal.year-selection.year.unselected.label-text')};
     });
 
   @override
-  MaterialStateProperty<Color?>? get yearBackgroundColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
+  WidgetStateProperty<Color?>? get yearBackgroundColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
         return ${componentColor('md.comp.date-picker.modal.year-selection.year.selected.container')};
       }
       return ${componentColor('md.comp.date-picker.modal.year-selection.year.unselected.container')};
     });
 
   @override
-  MaterialStateProperty<Color?>? get yearOverlayColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
-        if (states.contains(MaterialState.pressed)) {
+  WidgetStateProperty<Color?>? get yearOverlayColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.selected)) {
+        if (states.contains(WidgetState.pressed)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'pressed')};
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'hover')};
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'focus')};
         }
       } else {
-        if (states.contains(MaterialState.pressed)) {
+        if (states.contains(WidgetState.pressed)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'pressed')};
         }
-        if (states.contains(MaterialState.hovered)) {
+        if (states.contains(WidgetState.hovered)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'hover')};
         }
-        if (states.contains(MaterialState.focused)) {
+        if (states.contains(WidgetState.focused)) {
           return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'focus')};
         }
       }
@@ -222,15 +222,15 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
     Color? get rangeSelectionBackgroundColor => ${colorOrTransparent("md.comp.date-picker.modal.range-selection.active-indicator.container.color")};
 
   @override
-  MaterialStateProperty<Color?>? get rangeSelectionOverlayColor =>
-    MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.pressed)) {
+  WidgetStateProperty<Color?>? get rangeSelectionOverlayColor =>
+    WidgetStateProperty.resolveWith((Set<WidgetState> states) {
+      if (states.contains(WidgetState.pressed)) {
         return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'pressed')};
       }
-      if (states.contains(MaterialState.hovered)) {
+      if (states.contains(WidgetState.hovered)) {
         return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'hover')};
       }
-      if (states.contains(MaterialState.focused)) {
+      if (states.contains(WidgetState.focused)) {
         return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'focus')};
       }
       return null;