Introduce YaruSwitchButton

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,
+ }),
+});