feat: Add ToggleMenuFlyoutItem (#1108)

CHANGELOG.md

@@ -6,6 +6,7 @@
 - feat: Add `BreadcrumbBar.chevronIconBuilder` and `BreadcrumbBar.chevronIconSize` ([#1111](https://github.com/bdlukaa/fluent_ui/issues/1111))
 * fix: Consider object translation on Menu Flyouts ([#1104](https://github.com/bdlukaa/fluent_ui/issues/1104))
 * fix: Correctly disable `DropDownButton` items if `onPressed` is not provided ([#1116](https://github.com/bdlukaa/fluent_ui/issues/1116#issuecomment-2347153074))
+* feat: Add `ToggleMenuFlyoutItem` ([#1108](https://github.com/bdlukaa/fluent_ui/issues/1108))
 
 ## 4.9.1
 

example/lib/screens/popups/flyout.dart

@@ -20,6 +20,9 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
   final menuController = FlyoutController();
   final menuAttachKey = GlobalKey();
 
+  final itemsController = FlyoutController();
+  final itemsAttachKey = GlobalKey();
+
   final contextController = FlyoutController();
   final contextAttachKey = GlobalKey();
 
@@ -352,6 +355,70 @@ FlyoutTarget(
             Text(menuController.isOpen ? 'Displaying' : ''),
           ]),
         ),
+        subtitle(content: const Text('Other Flyout Item Types')),
+        description(
+          content: const Text(
+            'The flyout can contain other flyout items like separators, '
+            'toggle and radio items.',
+          ),
+        ),
+        CardHighlight(
+          codeSnippet: '''''',
+          child: Row(children: [
+            FlyoutTarget(
+              key: itemsAttachKey,
+              controller: itemsController,
+              child: Button(
+                child: const Text('Options'),
+                onPressed: () {
+                  itemsController.showFlyout(
+                    autoModeConfiguration: FlyoutAutoConfiguration(
+                      preferredMode: placementMode,
+                    ),
+                    barrierDismissible: barrierDismissible,
+                    dismissOnPointerMoveAway: dismissOnPointerMoveAway,
+                    dismissWithEsc: dismissWithEsc,
+                    navigatorKey: rootNavigatorKey.currentState,
+                    builder: (context) {
+                      var repeat = true;
+                      var shuffle = false;
+                      return StatefulBuilder(builder: (context, setState) {
+                        return MenuFlyout(items: [
+                          MenuFlyoutItem(
+                            text: const Text('Reset'),
+                            onPressed: () {
+                              setState(() {
+                                repeat = false;
+                                shuffle = false;
+                              });
+                            },
+                          ),
+                          const MenuFlyoutSeparator(),
+                          ToggleMenuFlyoutItem(
+                            text: const Text('Repeat'),
+                            value: repeat,
+                            onChanged: (v) {
+                              setState(() => repeat = v);
+                            },
+                          ),
+                          ToggleMenuFlyoutItem(
+                            text: const Text('Shuffle'),
+                            value: shuffle,
+                            onChanged: (v) {
+                              setState(() => shuffle = v);
+                            },
+                          ),
+                        ]);
+                      });
+                    },
+                  );
+                },
+              ),
+            ),
+            const SizedBox(width: 8.0),
+            Text(menuController.isOpen ? 'Displaying' : ''),
+          ]),
+        ),
         subtitle(content: const Text('Context Menus')),
         description(
           content: const Text(

lib/src/controls/flyouts/menu.dart

@@ -330,6 +330,38 @@ class MenuFlyoutSeparator extends MenuFlyoutItemBase {
   }
 }
 
+/// Represents a menu item that can be toggled on and off in a [MenuFlyout].
+///
+/// See also:
+///
+///  * [MenuFlyout], which displays a list of commands or options
+///  * [MenuFlyoutItem], a single item in the list of items
+///  * [MenuFlyoutSeparator], which represents a horizontal line that
+///    separates items in a [MenuFlyout].
+///  * [MenuFlyoutSubItem], which represents a menu item that displays a
+///    sub-menu in a [MenuFlyout]
+class ToggleMenuFlyoutItem extends MenuFlyoutItem {
+  /// The value of the toggle item.
+  final bool value;
+
+  /// Called when the value of the toggle item changes.
+  final ValueChanged<bool>? onChanged;
+
+  /// Creates a menu flyout item that can be toggled on and off.
+  ToggleMenuFlyoutItem({
+    required super.text,
+    super.trailing,
+    required this.value,
+    required this.onChanged,
+  }) : super(
+          leading: Icon(
+            value ? FluentIcons.check_mark : null,
+            size: 12.0,
+          ),
+          onPressed: onChanged == null ? null : () => onChanged(!value),
+        );
+}
+
 enum SubItemShowBehavior {
   /// Whether the sub-menu will be shown on item press
   press,