Add YaruRoundToggleButton

example/lib/example_page_items.dart

@@ -6,6 +6,7 @@ import 'package:yaru_widgets_example/pages/check_box_row_page.dart';
 import 'package:yaru_widgets_example/pages/color_disk_page.dart';
 import 'package:yaru_widgets_example/pages/color_picker_page.dart';
 import 'package:yaru_widgets_example/pages/extra_option_row_page.dart';
+import 'package:yaru_widgets_example/pages/round_toggle_button_page.dart';
 import 'package:yaru_widgets_example/pages/section_page.dart';
 import 'package:yaru_widgets_example/pages/selectable_container_page.dart';
 import 'package:yaru_widgets_example/pages/slider_page.dart';
@@ -173,4 +174,8 @@ final examplePageItems = <YaruPageItem>[
       ],
     ),
   ),
+  YaruPageItem(
+      titleBuilder: (context) => Text('YaruRoundToggleButton'),
+      builder: (context) => RoundToggleButtonPage(),
+      iconData: YaruIcons.app_grid)
 ];

example/lib/main.dart

@@ -27,7 +27,7 @@ class Home extends StatefulWidget {
 class _HomeState extends State<Home> {
   final _filteredItems = <YaruPageItem>[];
   final _searchController = TextEditingController();
-  bool compact = true;
+  bool _compactMode = false;
 
   void _onEscape() => setState(() {
         _filteredItems.clear();
@@ -50,8 +50,8 @@ class _HomeState extends State<Home> {
       builder: (_) => YaruPage(children: [
         YaruSwitchRow(
           trailingWidget: Text('Compact mode'),
-          value: compact,
-          onChanged: (v) => setState(() => compact = v),
+          value: _compactMode,
+          onChanged: (v) => setState(() => _compactMode = v),
         )
       ]),
       iconData: YaruIcons.settings,
@@ -62,7 +62,7 @@ class _HomeState extends State<Home> {
       debugShowCheckedModeBanner: false,
       theme: context.watch<LightTheme>().value,
       darkTheme: context.watch<DarkTheme>().value,
-      home: compact
+      home: _compactMode
           ? YaruCompactLayout(
               pageItems: [configItem] + examplePageItems,
               showSelectedLabels: false,

example/lib/pages/round_toggle_button_page.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class RoundToggleButtonPage extends StatefulWidget {
+  const RoundToggleButtonPage({Key? key}) : super(key: key);
+
+  @override
+  State<RoundToggleButtonPage> createState() => _RoundToggleButtonPageState();
+}
+
+class _RoundToggleButtonPageState extends State<RoundToggleButtonPage> {
+  bool _selected = false;
+  @override
+  Widget build(BuildContext context) {
+    return YaruPage(children: [
+      YaruRoundToggleButton(
+        onPressed: (() => setState(
+              () => _selected = !_selected,
+            )),
+        selected: _selected,
+        iconData: YaruIcons.view,
+        tooltip: 'View',
+      )
+    ]);
+  }
+}

lib/src/yaru_round_toggle_button.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+/// A selectable [IconButton], wrapped in a [CircleAvatar]
+class YaruRoundToggleButton extends StatelessWidget {
+  /// The [IconData] for the [Icon]
+  final IconData iconData;
+
+  /// Defines if the button is selected
+  final bool selected;
+
+  /// Optional onPressed callback to select the button
+  final Function()? onPressed;
+
+  /// Optional tooltip
+  final String? tooltip;
+
+  const YaruRoundToggleButton({
+    Key? key,
+    required this.selected,
+    required this.iconData,
+    this.onPressed,
+    this.tooltip,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return CircleAvatar(
+      backgroundColor: selected
+          ? Theme.of(context).colorScheme.onSurface.withOpacity(0.05)
+          : Colors.transparent,
+      child: IconButton(
+        tooltip: tooltip,
+        color: selected ? Colors.grey : null,
+        splashRadius: 20,
+        onPressed: onPressed,
+        icon: Icon(
+          iconData,
+          color: selected
+              ? Theme.of(context).primaryColor
+              : Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
+        ),
+      ),
+    );
+  }
+}

lib/yaru_widgets.dart

@@ -17,6 +17,7 @@ export 'src/yaru_narrow_layout.dart';
 export 'src/yaru_option_button.dart';
 export 'src/yaru_page.dart';
 export 'src/yaru_page_item.dart';
+export 'src/yaru_round_toggle_button.dart';
 export 'src/yaru_row.dart';
 export 'src/yaru_search_app_bar.dart';
 export 'src/yaru_section.dart';