Introduce YaruSwitchButton (#335)

Similar to YaruCheckButton & YaruRadioButton but with a leading Switch.

example/lib/example_page_items.dart

@@ -14,6 +14,7 @@ import 'pages/progress_indicator_page.dart';
 import 'pages/radio_button_page.dart';
 import 'pages/section_page.dart';
 import 'pages/selectable_container_page.dart';
+import 'pages/switch_button_page.dart';
 import 'pages/tabbed_page_page.dart';
 import 'pages/tile_page.dart';
 
@@ -115,6 +116,27 @@ final examplePageItems = <PageItem>[
     iconBuilder: (context, selected) => const Icon(YaruIcons.selection),
     pageBuilder: (_) => const SelectableContainerPage(),
   ),
+  PageItem(
+    titleBuilder: (context) => const Text('YaruSwitchButton'),
+    tooltipMessage: 'YaruSwitchButton',
+    pageBuilder: (context) => const SwitchButtonPage(),
+    // TODO: YaruIcons.switch/toggle?
+    iconBuilder: (context, selected) => Container(
+      width: 24,
+      height: 12,
+      decoration: BoxDecoration(
+        color: IconTheme.of(context).color,
+        borderRadius: BorderRadius.circular(6),
+      ),
+      child: Container(
+        margin: const EdgeInsets.fromLTRB(14, 2, 2, 2),
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surface,
+          borderRadius: BorderRadius.circular(4),
+        ),
+      ),
+    ),
+  ),
   PageItem(
     titleBuilder: (context) => const Text('YaruTabbedPage'),
     tooltipMessage: 'YaruTabbedPage',

example/lib/pages/switch_button_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class SwitchButtonPage extends StatefulWidget {
+  const SwitchButtonPage({super.key});
+
+  @override
+  _SwitchButtonPageState createState() => _SwitchButtonPageState();
+}
+
+class _SwitchButtonPageState extends State<SwitchButtonPage> {
+  final _values = List.generate(3, (i) => i % 2 == 0);
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+      padding: const EdgeInsets.all(kYaruPagePadding),
+      children: [
+        for (var i = 0; i < _values.length; ++i) ...[
+          YaruSwitchButton(
+            value: _values[i],
+            onChanged: (v) => setState(() => _values[i] = v),
+            title: const Text('YaruSwitchButton'),
+          ),
+          const SizedBox(height: 10),
+        ],
+      ],
+    );
+  }
+}

lib/src/controls/yaru_switch_button.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+
+import 'yaru_toggle_button.dart';
+
+/// A desktop style switch button with an interactive label.
+class YaruSwitchButton extends StatelessWidget {
+  /// Creates a new switch button.
+  const YaruSwitchButton({
+    super.key,
+    required this.value,
+    required this.onChanged,
+    required this.title,
+    this.subtitle,
+    this.contentPadding,
+    this.autofocus = false,
+    this.focusNode,
+  });
+
+  /// See [Switch.value]
+  final bool value;
+
+  /// See [Switch.onChanged]
+  final ValueChanged<bool>? onChanged;
+
+  /// See [YaruToggleButton.title]
+  final Widget title;
+
+  /// See [YaruToggleButton.subtitle]
+  final Widget? subtitle;
+
+  /// See [YaruToggleButton.contentPadding]
+  final EdgeInsetsGeometry? contentPadding;
+
+  /// See [Switch.focusNode].
+  final FocusNode? focusNode;
+
+  /// See [Switch.autofocus].
+  final bool autofocus;
+
+  @override
+  Widget build(BuildContext context) {
+    return YaruToggleButton(
+      title: title,
+      subtitle: subtitle,
+      contentPadding: contentPadding,
+      leading: SizedBox(
+        width: kMinInteractiveDimension + 8,
+        height: kMinInteractiveDimension - 8,
+        child: Center(
+          child: Switch(
+            value: value,
+            onChanged: onChanged,
+            focusNode: focusNode,
+            autofocus: autofocus,
+          ),
+        ),
+      ),
+      onToggled: onChanged != null ? () => onChanged!(!value) : null,
+    );
+  }
+}

lib/yaru_widgets.dart

@@ -12,6 +12,7 @@ export 'src/controls/yaru_option_button.dart';
 export 'src/controls/yaru_popup_menu_button.dart';
 export 'src/controls/yaru_progress_indicator.dart';
 export 'src/controls/yaru_radio_button.dart';
+export 'src/controls/yaru_switch_button.dart';
 export 'src/controls/yaru_title_bar.dart';
 export 'src/controls/yaru_toggle_button.dart';
 export 'src/controls/yaru_toggle_button_theme.dart';

test/controls/yaru_switch_button_test.dart

@@ -0,0 +1,212 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+import '../yaru_golden_tester.dart';
+
+void main() {
+  testWidgets('contains switch and labels', (tester) async {
+    Widget builder({required Widget title, required Widget? subtitle}) {
+      return MaterialApp(
+        home: Scaffold(
+          body: YaruSwitchButton(
+            title: title,
+            subtitle: subtitle,
+            value: false,
+            onChanged: (_) {},
+          ),
+        ),
+      );
+    }
+
+    await tester
+        .pumpWidget(builder(title: const Text('title'), subtitle: null));
+    expect(find.text('title'), findsOneWidget);
+    expect(find.text('subtitle'), findsNothing);
+    expect(find.byType(Switch), findsOneWidget);
+
+    await tester.pumpWidget(
+      builder(title: const Text('title'), subtitle: const Text('subtitle')),
+    );
+    expect(find.text('title'), findsOneWidget);
+    expect(find.text('subtitle'), findsOneWidget);
+    expect(find.byType(Switch), findsOneWidget);
+  });
+
+  testWidgets('the labels react to taps', (tester) async {
+    bool? changedValue;
+    Widget builder({required bool initialValue}) {
+      return MaterialApp(
+        home: Scaffold(
+          body: YaruSwitchButton(
+            title: const Text('title'),
+            subtitle: const Text('subtitle'),
+            value: initialValue,
+            onChanged: (v) => changedValue = v,
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(builder(initialValue: false));
+    await tester.tap(find.text('title'));
+    expect(changedValue, isTrue);
+
+    await tester.pumpWidget(builder(initialValue: false));
+    await tester.tap(find.text('subtitle'));
+    expect(changedValue, isTrue);
+
+    await tester.pumpWidget(builder(initialValue: true));
+    await tester.tap(find.text('title'));
+    expect(changedValue, isFalse);
+
+    await tester.pumpWidget(builder(initialValue: true));
+    await tester.tap(find.text('subtitle'));
+    expect(changedValue, isFalse);
+  });
+
+  testWidgets('mouse cursor changes depending on the state', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Column(
+            children: [
+              YaruSwitchButton(
+                title: const Text('enabled'),
+                value: false,
+                onChanged: (_) {},
+              ),
+              const YaruSwitchButton(
+                title: Text('disabled'),
+                value: false,
+                onChanged: null,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    final gesture =
+        await tester.createGesture(kind: PointerDeviceKind.mouse, pointer: 1);
+    await gesture.addPointer(location: Offset.zero);
+    addTearDown(gesture.removePointer);
+
+    await gesture
+        .moveTo(tester.getCenter(find.widgetWithText(MouseRegion, 'enabled')));
+    await tester.pump();
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.click,
+    );
+
+    await gesture
+        .moveTo(tester.getCenter(find.widgetWithText(MouseRegion, 'disabled')));
+    await tester.pump();
+    expect(
+      RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1),
+      SystemMouseCursors.basic,
+    );
+  });
+
+  testWidgets('text color changes depending on the state', (tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Column(
+            children: [
+              YaruSwitchButton(
+                title: const Text('enabled'),
+                value: false,
+                onChanged: (_) {},
+              ),
+              const YaruSwitchButton(
+                title: Text('disabled'),
+                value: false,
+                onChanged: null,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    final enabled = tester.element(find.text('enabled'));
+    expect(
+      DefaultTextStyle.of(enabled).style.color,
+      isNot(equals(Theme.of(enabled).disabledColor)),
+    );
+
+    final disabled = tester.element(find.text('disabled'));
+    expect(
+      DefaultTextStyle.of(disabled).style.color,
+      equals(Theme.of(disabled).disabledColor),
+    );
+  });
+
+  testWidgets(
+    'golden images',
+    (tester) async {
+      final variant = goldenVariant.currentValue!;
+
+      // ensure traditional focus highlight
+      FocusManager.instance.highlightStrategy =
+          FocusHighlightStrategy.alwaysTraditional;
+
+      await tester.pumpScaffold(
+        YaruSwitchButton(
+          autofocus: variant.hasState(MaterialState.focused),
+          value: variant.hasState(MaterialState.selected),
+          onChanged: variant.hasState(MaterialState.disabled) ? null : (_) {},
+          title: const Text('YaruSwitchButton'),
+          subtitle: const Text('Lorem ipsum dolor sit amet'),
+        ),
+        themeMode: variant.themeMode,
+        size: const Size(248, 56),
+      );
+      await tester.pumpAndSettle();
+
+      if (variant.hasState(MaterialState.pressed)) {
+        await tester.down(find.byType(Switch));
+        await tester.pumpAndSettle();
+      } else if (variant.hasState(MaterialState.hovered)) {
+        await tester.hover(find.byType(Switch));
+        await tester.pumpAndSettle();
+      }
+
+      await expectLater(
+        find.byType(YaruSwitchButton),
+        matchesGoldenFile('goldens/yaru_switch_button-${variant.label}.png'),
+      );
+    },
+    variant: goldenVariant,
+    tags: 'golden',
+  );
+}
+
+final goldenVariant = ValueVariant({
+  ...goldenThemeVariants('off', <MaterialState>{}),
+  ...goldenThemeVariants('off-disabled', {MaterialState.disabled}),
+  ...goldenThemeVariants('off-focused', {MaterialState.focused}),
+  ...goldenThemeVariants('off-hovered', {MaterialState.hovered}),
+  ...goldenThemeVariants('off-pressed', {MaterialState.pressed}),
+  ...goldenThemeVariants('on', {MaterialState.selected}),
+  ...goldenThemeVariants('on-disabled', {
+    MaterialState.selected,
+    MaterialState.disabled,
+  }),
+  ...goldenThemeVariants('on-focused', {
+    MaterialState.selected,
+    MaterialState.focused,
+  }),
+  ...goldenThemeVariants('on-hovered', {
+    MaterialState.selected,
+    MaterialState.hovered,
+  }),
+  ...goldenThemeVariants('on-pressed', {
+    MaterialState.selected,
+    MaterialState.pressed,
+  }),
+});