Add control tiles

example/lib/example_page_items.dart

@@ -4,6 +4,7 @@ import 'pages/banner_page.dart';
 import 'pages/carousel_page.dart';
 import 'pages/check_button_page.dart';
 import 'pages/color_disk_page.dart';
+import 'pages/control_tiles_page.dart';
 import 'pages/controls_page.dart';
 import 'pages/dialog_page.dart';
 import 'pages/draggable_page.dart';
@@ -81,6 +82,15 @@ final examplePageItems = <PageItem>[
  pageBuilder: (context) => const ColorDiskPage(),
  iconBuilder: (context, selected) => const Icon(YaruIcons.color_select),
  ),
+ PageItem(
+ titleBuilder: (context) => const Text('YaruControlListTiles'),
+ tooltipMessage: 'YaruControlListTiles',
+ snippetUrl:
+ 'https://raw.githubusercontent.com/ubuntu/yaru_widgets.dart/main/example/lib/pages/control_tiles_page.dart',
+ pageBuilder: (context) => const ControlListTilesPage(),
+ iconBuilder: (context, selected) =>
+ const Icon(YaruIcons.format_ordered_list),
+ ),
  PageItem(
  titleBuilder: (context) => const Text('YaruDraggable'),
  tooltipMessage: 'YaruDraggable',

example/lib/pages/control_tiles_page.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class ControlListTilesPage extends StatefulWidget {
+ const ControlListTilesPage({super.key});
+
+ @override
+ _ControlListTilesPageState createState() => _ControlListTilesPageState();
+}
+
+class _ControlListTilesPageState extends State<ControlListTilesPage> {
+ final List<bool?> _checkboxValues = [false, null, true];
+ int? _radioValue = 1;
+ final List<bool> _switchValues = 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 < _checkboxValues.length; ++i)
+ YaruCheckboxListTile(
+ value: _checkboxValues[i],
+ onChanged: (v) => setState(() => _checkboxValues[i] = v),
+ tristate: true,
+ title: const Text('YaruCheckboxListTile'),
+ ),
+ const Divider(),
+ for (var i = 0; i < 3; ++i)
+ YaruRadioListTile<int>(
+ value: i,
+ groupValue: _radioValue,
+ onChanged: (v) => setState(() => _radioValue = v),
+ toggleable: true,
+ title: const Text('YaruRadioListTile'),
+ ),
+ const Divider(),
+ for (var i = 0; i < _switchValues.length; ++i)
+ YaruSwitchListTile(
+ value: _switchValues[i],
+ onChanged: (v) => setState(() => _switchValues[i] = v),
+ title: const Text('YaruSwitchListTile'),
+ ),
+ const SizedBox(height: 10),
+ ],
+ );
+ }
+}

lib/src/controls/yaru_checkbox_list_tile.dart

@@ -0,0 +1,160 @@
+import 'package:flutter/material.dart';
+
+import 'yaru_check_button.dart';
+import 'yaru_checkbox.dart';
+import 'yaru_radio_list_tile.dart';
+import 'yaru_switch_list_tile.dart';
+
+/// A [ListTile] with a [YaruCheckbox]. In other words, a checkbox with a label.
+///
+/// See [CheckboxListTile] for more details.
+///
+/// See also:
+///
+/// * [ListTileTheme], which can be used to affect the style of list tiles,
+/// including checkbox list tiles.
+/// * [YaruCheckButton], a similar widget with a desktop style.
+/// * [YaruRadioListTile], a similar widget for radio buttons.
+/// * [YaruSwitchListTile], a similar widget for switches.
+/// * [ListTile] and [YaruCheckbox], the widgets from which this widget is made.
+class YaruCheckboxListTile extends StatelessWidget {
+ /// Creates a combination of a [ListTile] and a [YaruCheckbox].
+ ///
+ /// See [CheckboxListTile].
+ const YaruCheckboxListTile({
+ super.key,
+ required this.value,
+ required this.onChanged,
+ this.tileColor,
+ this.title,
+ this.subtitle,
+ this.isThreeLine = false,
+ this.dense,
+ this.secondary,
+ this.selected = false,
+ this.controlAffinity = ListTileControlAffinity.platform,
+ this.autofocus = false,
+ this.contentPadding,
+ this.tristate = false,
+ this.shape,
+ this.selectedTileColor,
+ this.visualDensity,
+ this.focusNode,
+ this.enableFeedback,
+ }) : assert(tristate || value != null),
+ assert(!isThreeLine || subtitle != null);
+
+ /// See [CheckboxListTile.value].
+ final bool? value;
+
+ /// See [CheckboxListTile.onChanged].
+ final ValueChanged<bool?>? onChanged;
+
+ /// See [CheckboxListTile.tileColor].
+ final Color? tileColor;
+
+ /// See [CheckboxListTile.title].
+ final Widget? title;
+
+ /// See [CheckboxListTile.subtitle].
+ final Widget? subtitle;
+
+ /// See [CheckboxListTile.secondary].
+ final Widget? secondary;
+
+ /// See [CheckboxListTile.isThreeLine].
+ final bool isThreeLine;
+
+ /// See [CheckboxListTile.dense].
+ final bool? dense;
+
+ /// See [CheckboxListTile.selected].
+ final bool selected;
+
+ /// See [CheckboxListTile.controlAffinity].
+ final ListTileControlAffinity controlAffinity;
+
+ /// See [CheckboxListTile.autofocus].
+ final bool autofocus;
+
+ /// See [CheckboxListTile.contentPadding].
+ final EdgeInsetsGeometry? contentPadding;
+
+ /// See [CheckboxListTile.tristate].
+ final bool tristate;
+
+ /// See [CheckboxListTile.shape].
+ final ShapeBorder? shape;
+
+ /// See [CheckboxListTile.selectedTileColor].
+ final Color? selectedTileColor;
+
+ /// See [CheckboxListTile.visualDensity].
+ final VisualDensity? visualDensity;
+
+ /// See [CheckboxListTile.focusNode].
+ final FocusNode? focusNode;
+
+ /// See [CheckboxListTile.enableFeedback].
+ final bool? enableFeedback;
+
+ void _handleValueChange() {
+ assert(onChanged != null);
+ switch (value) {
+ case false:
+ onChanged!(true);
+ break;
+ case true:
+ onChanged!(tristate ? null : false);
+ break;
+ case null:
+ onChanged!(false);
+ break;
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ Widget? leading, trailing;
+ final Widget control = YaruCheckbox(
+ value: value,
+ onChanged: onChanged,
+ autofocus: autofocus,
+ tristate: tristate,
+ );
+
+ switch (controlAffinity) {
+ case ListTileControlAffinity.leading:
+ leading = control;
+ trailing = secondary;
+ break;
+ case ListTileControlAffinity.trailing:
+ case ListTileControlAffinity.platform:
+ leading = secondary;
+ trailing = control;
+ break;
+ }
+
+ return MergeSemantics(
+ child: ListTile(
+ leading: leading,
+ title: title,
+ subtitle: subtitle,
+ trailing: trailing,
+ isThreeLine: isThreeLine,
+ dense: dense,
+ enabled: onChanged != null,
+ onTap: onChanged != null ? _handleValueChange : null,
+ selected: selected,
+ autofocus: autofocus,
+ contentPadding: contentPadding,
+ shape: shape,
+ selectedTileColor: selectedTileColor,
+ tileColor: tileColor,
+ visualDensity: visualDensity,
+ focusNode: focusNode,
+ enableFeedback: enableFeedback,
+ ),
+ );
+ }
+}

lib/src/controls/yaru_radio_list_tile.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+
+import 'yaru_checkbox_list_tile.dart';
+import 'yaru_radio.dart';
+import 'yaru_radio_button.dart';
+import 'yaru_switch_list_tile.dart';
+
+/// A [ListTile] with a [YaruRadio]. In other words, a radio with a label.
+///
+/// See [RadioListTile] for more details.
+///
+/// See also:
+///
+/// * [ListTileTheme], which can be used to affect the style of list tiles,
+/// including radio list tiles.
+/// * [YaruRadioButton], a similar widget with a desktop style.
+/// * [YaruCheckboxListTile], a similar widget for checkboxes.
+/// * [YaruSwitchListTile], a similar widget for switches.
+/// * [ListTile] and [YaruRadio], the widgets from which this widget is made.
+class YaruRadioListTile<T> extends StatelessWidget {
+ /// Creates a combination of a [ListTile] and a [YaruRadio].
+ ///
+ /// See [RadioListTile].
+ const YaruRadioListTile({
+ super.key,
+ required this.value,
+ required this.groupValue,
+ required this.onChanged,
+ this.toggleable = false,
+ this.title,
+ this.subtitle,
+ this.isThreeLine = false,
+ this.dense,
+ this.secondary,
+ this.selected = false,
+ this.controlAffinity = ListTileControlAffinity.platform,
+ this.autofocus = false,
+ this.contentPadding,
+ this.shape,
+ this.tileColor,
+ this.selectedTileColor,
+ this.visualDensity,
+ this.focusNode,
+ this.enableFeedback,
+ }) : assert(!isThreeLine || subtitle != null);
+
+ /// See [RadioListTile.value].
+ final T value;
+
+ /// See [RadioListTile.groupValue].
+ final T? groupValue;
+
+ /// See [RadioListTile.onChanged].
+ final ValueChanged<T?>? onChanged;
+
+ /// See [RadioListTile.toggleable].
+ final bool toggleable;
+
+ /// See [RadioListTile.title].
+ final Widget? title;
+
+ /// See [RadioListTile.subtitle].
+ final Widget? subtitle;
+
+ /// See [RadioListTile.secondary].
+ final Widget? secondary;
+
+ /// See [RadioListTile.isThreeLine].
+ final bool isThreeLine;
+
+ /// See [RadioListTile.dense].
+ final bool? dense;
+
+ /// See [RadioListTile.selected].
+ final bool selected;
+
+ /// See [RadioListTile.controlAffinity].
+ final ListTileControlAffinity controlAffinity;
+
+ /// See [RadioListTile.autofocus].
+ final bool autofocus;
+
+ /// See [RadioListTile.contentPadding].
+ final EdgeInsetsGeometry? contentPadding;
+
+ /// See [RadioListTile.shape].
+ final ShapeBorder? shape;
+
+ /// See [RadioListTile.tileColor].
+ final Color? tileColor;
+
+ /// See [RadioListTile.selectedTileColor].
+ final Color? selectedTileColor;
+
+ /// See [RadioListTile.visualDensity].
+ final VisualDensity? visualDensity;
+
+ /// See [RadioListTile.focusNode].
+ final FocusNode? focusNode;
+
+ /// See [RadioListTile.enableFeedback].
+ final bool? enableFeedback;
+
+ void _handleValueChange() {
+ assert(onChanged != null);
+ if (groupValue != value || !toggleable) {
+ onChanged!(value);
+ } else if (toggleable) {
+ onChanged!(null);
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ Widget? leading, trailing;
+ final Widget control = YaruRadio<T>(
+ value: value,
+ groupValue: groupValue,
+ onChanged: onChanged,
+ toggleable: toggleable,
+ autofocus: autofocus,
+ );
+
+ switch (controlAffinity) {
+ case ListTileControlAffinity.leading:
+ case ListTileControlAffinity.platform:
+ leading = control;
+ trailing = secondary;
+ break;
+ case ListTileControlAffinity.trailing:
+ leading = secondary;
+ trailing = control;
+ break;
+ }
+
+ return MergeSemantics(
+ child: ListTile(
+ leading: leading,
+ title: title,
+ subtitle: subtitle,
+ trailing: trailing,
+ isThreeLine: isThreeLine,
+ dense: dense,
+ enabled: onChanged != null,
+ shape: shape,
+ tileColor: tileColor,
+ selectedTileColor: selectedTileColor,
+ onTap: onChanged != null ? _handleValueChange : null,
+ selected: selected,
+ autofocus: autofocus,
+ contentPadding: contentPadding,
+ visualDensity: visualDensity,
+ focusNode: focusNode,
+ enableFeedback: enableFeedback,
+ ),
+ );
+ }
+}