Fix checkbox flickering (#698)

* Fix checkbox flickering

Additionally updates checkbox and radio to use new motion system.

* Prepare Forui for review

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Pante <Pante@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Pante

forui/CHANGELOG.md

@@ -18,6 +18,13 @@ We've improved the styles' generated documentation. They should be much easier t
 * **Breaking** Change `FAutocompleteContentStyle.loadingIndicatorStyle` to `FAutocompleteContentStyle.progressStyle`.
 
 
+### `FCheckbox`
+* Add `FCheckboxMotion`.
+
+* **Breaking** Move animation related fields from `FCheckboxStyle` to `FCheckboxMotion`.
+* Fix `FCheckbox` flickering when rapidly hovering.
+
+
 ### `FDateField`
 * Add `FDateField.onReset`.
 
@@ -60,6 +67,12 @@ We've reworked `FProgress` to be more customizable and easier to use.
 * **Breaking** Remove `FProgressStyles`.
 
 
+### `FRadio`
+* Add `FRadioMotion`.
+
+* **Breaking** Move animation related fields from `FRadioStyle` to `FRadioMotion`.
+
+
 ### `FSelect` & `FMultiSelect`
 * Add `FSelect.onReset`.
 * Add `FMultiSelect.onReset`.

forui/bin/commands/style/style.dart

@@ -122,6 +122,7 @@ class FCheckbox extends StatelessWidget {
         states = {...states, ...formStates};
 
         final iconTheme = style.iconStyle.maybeResolve(states);
+        final decoration = style.decoration.resolve(states);
         return FLabel(
           axis: Axis.horizontal,
           states: formStates,
@@ -135,15 +136,19 @@ class FCheckbox extends StatelessWidget {
             focused: states.contains(WidgetState.focused),
             style: style.focusedOutlineStyle,
             child: AnimatedSwitcher(
-              duration: style.animationDuration,
-              switchInCurve: style.curve,
+              duration: style.motion.fadeInDuration,
+              reverseDuration: style.motion.fadeOutDuration,
+              switchInCurve: style.motion.fadeInCurve,
+              switchOutCurve: style.motion.fadeOutCurve,
               // This transition builder is necessary because of https://github.com/flutter/flutter/issues/121336#issuecomment-1482620874
               transitionBuilder: (child, opacity) => FadeTransition(opacity: opacity, child: child),
               child: SizedBox.square(
-                key: SetKey(states),
+                // We use the derived iconTheme and decoration as keys to prevent the animation from triggering between
+                // states with the same appearance.
+                key: ListKey([iconTheme, decoration]),
                 dimension: style.size,
                 child: DecoratedBox(
-                  decoration: style.decoration.resolve(states),
+                  decoration: decoration,
                   child: iconTheme == null
                       ? const SizedBox()
                       : IconTheme(data: iconTheme, child: const Icon(FIcons.check)),
@@ -234,16 +239,6 @@ class _Checkbox<T> extends StatelessWidget with FSelectGroupItem<T> {
 
 /// A checkboxes style.
 class FCheckboxStyle extends FLabelStyle with _$FCheckboxStyleFunctions {
-  /// The duration of the animation when the checkbox switches between checked and unchecked. Defaults to 100ms.
-  @override
-  final Duration animationDuration;
-
-  /// The curve of the animation when the checkbox switches between checked and unchecked.
-  ///
-  /// Defaults to [Curves.linear].
-  @override
-  final Curve curve;
-
   /// The tappable style.
   @override
   final FTappableStyle tappableStyle;
@@ -274,6 +269,10 @@ class FCheckboxStyle extends FLabelStyle with _$FCheckboxStyleFunctions {
   @override
   final FWidgetStateMap<BoxDecoration> decoration;
 
+  /// The motion-related properties.
+  @override
+  final FCheckboxMotion motion;
+
   /// Creates a [FCheckboxStyle].
   const FCheckboxStyle({
     required this.tappableStyle,
@@ -283,9 +282,8 @@ class FCheckboxStyle extends FLabelStyle with _$FCheckboxStyleFunctions {
     required super.labelTextStyle,
     required super.descriptionTextStyle,
     required super.errorTextStyle,
-    this.animationDuration = const Duration(milliseconds: 100),
-    this.curve = Curves.linear,
     this.size = 16,
+    this.motion = const FCheckboxMotion(),
     super.labelPadding,
     super.descriptionPadding,
     super.errorPadding,
@@ -344,3 +342,30 @@ class FCheckboxStyle extends FLabelStyle with _$FCheckboxStyleFunctions {
     );
   }
 }
+
+/// The motion-related properties for a [FCheckbox].
+class FCheckboxMotion with Diagnosticable, _$FCheckboxMotionFunctions {
+  /// The duration of the fade in animation. Defaults to 100ms.
+  @override
+  final Duration fadeInDuration;
+
+  /// The duration of the fade out animation. Defaults to 100ms.
+  @override
+  final Duration fadeOutDuration;
+
+  /// The curve of the fade in animation. Defaults to [Curves.linear].
+  @override
+  final Curve fadeInCurve;
+
+  /// The curve of the fade out animation. Defaults to [Curves.linear].
+  @override
+  final Curve fadeOutCurve;
+
+  /// Creates a [FCheckboxMotion].
+  const FCheckboxMotion({
+    this.fadeInDuration = const Duration(milliseconds: 100),
+    this.fadeOutDuration = const Duration(milliseconds: 100),
+    this.fadeInCurve = Curves.linear,
+    this.fadeOutCurve = Curves.linear,
+  });
+}

forui/lib/src/widgets/checkbox.dart

@@ -146,8 +146,9 @@ class FRadio extends StatelessWidget {
                 DecoratedBox(
                   decoration: BoxDecoration(color: style.indicatorColor.resolve(states), shape: BoxShape.circle),
                   child: AnimatedSize(
-                    duration: style.animationDuration,
-                    curve: style.curve,
+                    duration: style.motion.duration,
+                    reverseDuration: style.motion.reverseDuration,
+                    curve: style.motion.curve,
                     child: value ? const SizedBox.square(dimension: 9) : const SizedBox.shrink(),
                   ),
                 ),
@@ -238,16 +239,6 @@ class _Radio<T> extends StatelessWidget with FSelectGroupItem<T> {
 
 /// A [FRadio]'s style.
 class FRadioStyle extends FLabelStyle with _$FRadioStyleFunctions {
-  /// The duration of the animation when the radio switches between selected and unselected. Defaults to 100ms.
-  @override
-  final Duration animationDuration;
-
-  /// The curve of the animation when the radio switches between selected and unselected.
-  ///
-  /// Defaults to [Curves.easeOutCirc].
-  @override
-  final Curve curve;
-
   /// The tappable style.
   @override
   final FTappableStyle tappableStyle;
@@ -292,8 +283,12 @@ class FRadioStyle extends FLabelStyle with _$FRadioStyleFunctions {
   @override
   final FWidgetStateMap<Color> indicatorColor;
 
+  /// The motion-related properties.
+  @override
+  final FRadioMotion motion;
+
   /// Creates a [FRadioStyle].
-  FRadioStyle({
+  const FRadioStyle({
     required this.tappableStyle,
     required this.focusedOutlineStyle,
     required this.borderColor,
@@ -302,12 +297,11 @@ class FRadioStyle extends FLabelStyle with _$FRadioStyleFunctions {
     required super.labelTextStyle,
     required super.descriptionTextStyle,
     required super.errorTextStyle,
+    this.motion = const FRadioMotion(),
     super.labelPadding,
     super.descriptionPadding,
     super.errorPadding,
     super.childPadding,
-    this.animationDuration = const Duration(milliseconds: 100),
-    this.curve = Curves.easeOutCirc,
   });
 
   /// Creates a [FRadioStyle] that inherits its properties.
@@ -337,3 +331,25 @@ class FRadioStyle extends FLabelStyle with _$FRadioStyleFunctions {
     );
   }
 }
+
+/// The motion-related properties for a [FRadio].
+class FRadioMotion with Diagnosticable, _$FRadioMotionFunctions {
+  /// The duration of the animation when selected. Defaults to 100ms.
+  @override
+  final Duration duration;
+
+  /// The duration of the reverse animation when unselected. Defaults to 100ms.
+  @override
+  final Duration reverseDuration;
+
+  /// The curve of the animation. Defaults to [Curves.easeOutCirc].
+  @override
+  final Curve curve;
+
+  /// Creates a [FRadioMotion].
+  const FRadioMotion({
+    this.duration = const Duration(milliseconds: 100),
+    this.reverseDuration = const Duration(milliseconds: 100),
+    this.curve = Curves.easeOutCirc,
+  });
+}