YaruCheck/Radio/SwitchButton: add hover & press effects (#663)

Add hover & press effect for the indicator when hovering the label to highlight the interactive nature of the label. This becomes more important if the web-orientend pointing finger mouse cursor is changed to a more desktop'ish "basic" mouse cursor. Close: #659
ubuntu · Mar 6, 2023 · 1dd727a · 1dd727a
1 parent d9ac8a4
commit 1dd727a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 12 deletions.
diff --git a/lib/src/widgets/yaru_check_button.dart b/lib/src/widgets/yaru_check_button.dart
@@ -52,11 +52,29 @@ class YaruCheckButton extends StatefulWidget {
 }
 
 class _YaruCheckButtonState extends State<YaruCheckButton> {
+  final _statesController = MaterialStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void didUpdateWidget(YaruCheckButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void dispose() {
+    _statesController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final states = {
-      if (widget.onChanged == null) MaterialState.disabled,
-    };
+    final states = _statesController.value;
     final mouseCursor =
         MaterialStateProperty.resolveAs(widget.mouseCursor, states) ??
             YaruToggleButtonTheme.of(context)?.mouseCursor?.resolve(states);
@@ -72,9 +90,11 @@ class _YaruCheckButtonState extends State<YaruCheckButton> {
         focusNode: widget.focusNode,
         autofocus: widget.autofocus,
         mouseCursor: mouseCursor,
+        statesController: _statesController,
       ),
       mouseCursor:
           mouseCursor ?? MaterialStateMouseCursor.clickable.resolve(states),
+      statesController: _statesController,
       onToggled: widget.onChanged == null ? null : _onToggled,
     );
   }

diff --git a/lib/src/widgets/yaru_radio_button.dart b/lib/src/widgets/yaru_radio_button.dart
@@ -56,11 +56,29 @@ class YaruRadioButton<T> extends StatefulWidget {
 }
 
 class _YaruRadioButtonState<T> extends State<YaruRadioButton<T>> {
+  final _statesController = MaterialStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void didUpdateWidget(YaruRadioButton<T> oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void dispose() {
+    _statesController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final states = {
-      if (widget.onChanged == null) MaterialState.disabled,
-    };
+    final states = _statesController.value;
     final mouseCursor =
         MaterialStateProperty.resolveAs(widget.mouseCursor, states) ??
             YaruToggleButtonTheme.of(context)?.mouseCursor?.resolve(states);
@@ -77,9 +95,11 @@ class _YaruRadioButtonState<T> extends State<YaruRadioButton<T>> {
         focusNode: widget.focusNode,
         autofocus: widget.autofocus,
         mouseCursor: mouseCursor,
+        statesController: _statesController,
       ),
       mouseCursor:
           mouseCursor ?? MaterialStateMouseCursor.clickable.resolve(states),
+      statesController: _statesController,
       onToggled: widget.onChanged == null ? null : _onToggled,
     );
   }

diff --git a/lib/src/widgets/yaru_switch_button.dart b/lib/src/widgets/yaru_switch_button.dart
@@ -48,11 +48,29 @@ class YaruSwitchButton extends StatefulWidget {
 }
 
 class _YaruSwitchButtonState extends State<YaruSwitchButton> {
+  final _statesController = MaterialStatesController();
+
+  @override
+  void initState() {
+    super.initState();
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void didUpdateWidget(YaruSwitchButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _statesController.update(MaterialState.disabled, widget.onChanged == null);
+  }
+
+  @override
+  void dispose() {
+    _statesController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final states = {
-      if (widget.onChanged == null) MaterialState.disabled,
-    };
+    final states = _statesController.value;
     final mouseCursor =
         MaterialStateProperty.resolveAs(widget.mouseCursor, states) ??
             YaruToggleButtonTheme.of(context)?.mouseCursor?.resolve(states);
@@ -67,9 +85,11 @@ class _YaruSwitchButtonState extends State<YaruSwitchButton> {
         focusNode: widget.focusNode,
         autofocus: widget.autofocus,
         mouseCursor: mouseCursor,
+        statesController: _statesController,
       ),
       mouseCursor:
           mouseCursor ?? MaterialStateMouseCursor.clickable.resolve(states),
+      statesController: _statesController,
       onToggled: widget.onChanged != null
           ? () => widget.onChanged!(!widget.value)
           : null,

diff --git a/lib/src/widgets/yaru_toggle_button.dart b/lib/src/widgets/yaru_toggle_button.dart
@@ -20,6 +20,7 @@ class YaruToggleButton extends StatelessWidget {
     this.contentPadding,
     this.onToggled,
     this.mouseCursor,
+    this.statesController,
   });
 
   /// The toggle indicator.
@@ -40,13 +41,15 @@ class YaruToggleButton extends StatelessWidget {
   /// The cursor for a mouse pointer when it enters or is hovering over the widget.
   final MouseCursor? mouseCursor;
 
+  final MaterialStatesController? statesController;
+
   @override
   Widget build(BuildContext context) {
     final theme = YaruToggleButtonTheme.of(context);
     final textTheme = Theme.of(context).textTheme;
-    final states = {
-      if (onToggled == null) MaterialState.disabled,
-    };
+    final states = statesController?.value ??
+        {if (onToggled == null) MaterialState.disabled};
+    final enabled = !states.contains(MaterialState.disabled);
     final mouseCursor =
         MaterialStateProperty.resolveAs(this.mouseCursor, states) ??
             MaterialStateMouseCursor.clickable.resolve(states);
@@ -55,8 +58,20 @@ class YaruToggleButton extends StatelessWidget {
       child: Semantics(
         child: GestureDetector(
           onTap: onToggled,
+          onTapDown: (_) =>
+              statesController?.update(MaterialState.pressed, enabled),
+          onTapUp: (_) =>
+              statesController?.update(MaterialState.pressed, false),
+          onTapCancel: () =>
+              statesController?.update(MaterialState.pressed, false),
           child: MouseRegion(
             cursor: mouseCursor,
+            onEnter: (_) =>
+                statesController?.update(MaterialState.hovered, true),
+            onHover: (_) =>
+                statesController?.update(MaterialState.hovered, true),
+            onExit: (_) =>
+                statesController?.update(MaterialState.hovered, false),
             child: Padding(
               padding: contentPadding ?? EdgeInsets.zero,
               child: _YaruToggleButtonLayout(