MenuItemScreen.dart class MenuItemScreen extends StatelessWidget { const MenuItemScreen({super.key}); ThemeController themeController = Get.find(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Theme.of(context).colorScheme.background, appBar: showAppBar ? AppBar( title: const Text("MenuItem Button Theme"), ) : null, body: Center( child: Container( constraints: const BoxConstraints( maxWidth: 1000, ), alignment: Alignment.topCenter, padding: const EdgeInsets.all(16), child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _dropDownMenuShowcase(), title: Text('Menu item'), subtitleDense: true, subtitle: Text('Menu item style is used by SubmenuButton and ' 'MenuItemButton, that are used in DropdownMenu, MenuAnchor and ' 'MenuBar. You can see the menu item theme styles applied ' 'when you open the test menus above.\n'), ), Obx( () => CustomContainer( title: 'Item background color', description: 'Background color', child: ThemePopupMenu3( schemeIndex: themeController.menusItemsBackgroundColorIndex.value, onChanged: themeController.setMenusItemsBackgroundColorIndex), ), ), const SizedBox(height: 20,), Obx( () => CustomContainer( title: 'Item foreground color', description: 'Foreground color', child: ThemePopupMenu3( schemeIndex: themeController.menusItemsForegroundColorIndex.value, onChanged: themeController.setMenusItemsForegroundColorIndex), ), ), const SizedBox(height: 20,), Obx( () => CustomContainer( title: 'Highlighted item background color', description: 'Highlighted background color', child: ThemePopupMenu3( schemeIndex: themeController.menusHighlightedItemsBackgroundColorIndex.value, onChanged: themeController.setMenusHighlightedItemsBackgroundColorIndex), ), ), const SizedBox(height: 20,), Obx( () => CustomContainer( title: 'Highlighted item foreground color', description: 'Highlighted foreground color', child: ThemePopupMenu3( schemeIndex: themeController.menusHighlightedItemsForegroundColorIndex.value, onChanged: themeController.setMenusHighlightedItemsForegroundColorIndex), ), ), const SizedBox(height: 20,), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Obx( () => Flexible( child: _buildCommonContainer( child: SliderTheme( data: SliderTheme.of(context).copyWith( overlayShape: SliderComponentShape.noOverlay, ), child: SizedBox( width: 1000, child: Slider( value: themeController .menusHighlightedItemsRadius.value, min: 0, max: 30, divisions: 16, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenusHighlightedItemsRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Highlight items Radius', description: 'Adjust the highlight items radius to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('Radius'), Obx( () { final borderRadius = themeController .menusHighlightedItemsRadius.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menusHighlightedItemsRadius.value <=0? 'default Radius' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), ), ], ), ), ), ); } Widget _dropDownMenuShowcase(){ Rx selectedItem = Icons.alarm.obs; return RepaintBoundary( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Obx( ()=> DropdownMenu( initialSelection: selectedItem.value, leadingIcon: Icon(selectedItem.value), onSelected: (IconData? value) { selectedItem.value = value ?? Icons.alarm; }, dropdownMenuEntries: const >[ DropdownMenuEntry( style: ButtonStyle( padding: MaterialStatePropertyAll( EdgeInsets.symmetric(horizontal: 12)), ), label: 'Alarm settings', leadingIcon: Icon(Icons.alarm), value: Icons.alarm, ), DropdownMenuEntry( style: ButtonStyle( padding: MaterialStatePropertyAll( EdgeInsets.symmetric(horizontal: 12)), ), label: 'Disabled settings', leadingIcon: Icon(Icons.settings), enabled: false, value: Icons.settings, ), DropdownMenuEntry( style: ButtonStyle( padding: MaterialStatePropertyAll( EdgeInsets.symmetric(horizontal: 12)), ), label: 'Cabin overview', leadingIcon: Icon(Icons.cabin), value: Icons.cabin, ), DropdownMenuEntry( style: ButtonStyle( padding: MaterialStatePropertyAll( EdgeInsets.symmetric(horizontal: 12)), ), label: 'Surveillance view', leadingIcon: Icon(Icons.camera_outdoor_rounded), // value: 'four', value: Icons.camera_outdoor_rounded), DropdownMenuEntry( style: ButtonStyle( padding: MaterialStatePropertyAll( EdgeInsets.symmetric(horizontal: 12)), ), label: 'Water alert', leadingIcon: Icon(Icons.water_damage), // value: 'five', value: Icons.water_damage, ), ], ), ), ], ), ); } }

MenuItem Documentation