Widget _dropDownMenuShowcase(){
Rx<IconData> selectedItem = Icons.alarm.obs;
return RepaintBoundary(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Obx(
()=> DropdownMenu<IconData>(
initialSelection: selectedItem.value,
leadingIcon: Icon(selectedItem.value),
onSelected: (IconData? value) {
selectedItem.value = value ?? Icons.alarm;
},
dropdownMenuEntries: const <DropdownMenuEntry<IconData>>[
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Alarm settings',
leadingIcon: Icon(Icons.alarm),
value: Icons.alarm,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Disabled settings',
leadingIcon: Icon(Icons.settings),
enabled: false,
value: Icons.settings,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Cabin overview',
leadingIcon: Icon(Icons.cabin),
value: Icons.cabin,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Surveillance view',
leadingIcon: Icon(Icons.camera_outdoor_rounded),
// value: 'four',
value: Icons.camera_outdoor_rounded),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Water alert',
leadingIcon: Icon(Icons.water_damage),
// value: 'five',
value: Icons.water_damage,
),
],
),
),
],
),
);
}
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<IconData> selectedItem = Icons.alarm.obs;
return RepaintBoundary(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Obx(
()=> DropdownMenu<IconData>(
initialSelection: selectedItem.value,
leadingIcon: Icon(selectedItem.value),
onSelected: (IconData? value) {
selectedItem.value = value ?? Icons.alarm;
},
dropdownMenuEntries: const <DropdownMenuEntry<IconData>>[
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Alarm settings',
leadingIcon: Icon(Icons.alarm),
value: Icons.alarm,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Disabled settings',
leadingIcon: Icon(Icons.settings),
enabled: false,
value: Icons.settings,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Cabin overview',
leadingIcon: Icon(Icons.cabin),
value: Icons.cabin,
),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Surveillance view',
leadingIcon: Icon(Icons.camera_outdoor_rounded),
// value: 'four',
value: Icons.camera_outdoor_rounded),
DropdownMenuEntry<IconData>(
style: ButtonStyle(
padding: MaterialStatePropertyAll<EdgeInsetsGeometry>(
EdgeInsets.symmetric(horizontal: 12)),
),
label: 'Water alert',
leadingIcon: Icon(Icons.water_damage),
// value: 'five',
value: Icons.water_damage,
),
],
),
),
],
),
);
}
}
