MenuContainerScreen.dart class MenuContainerScreen extends StatelessWidget { const MenuContainerScreen({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("MenuContainer 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(), Obx( () => CustomContainer( title: 'Background color of containers', description: 'Background color', child: ThemePopupMenu3( schemeIndex: themeController.menusContainerBackgroundColorIndex.value, onChanged: themeController.setMenusContainerBackgroundColorIndex), ), ), 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 .menuContainerColorOpacity.value, min: -1, max: 100, divisions: 25, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenuContainerColorOpacity(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Menus Container Color Opacity', description: 'Adjust the menus container color opacity to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('Opacity'), Obx( () { final borderRadius = themeController .menuContainerColorOpacity.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menuContainerColorOpacity.value == -1 ? 'default opacity' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ), ], ), ) ], ), 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 .menusContainerRadius.value, min: 0, max: 30, divisions: 16, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenusContainerRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Container Radius', description: 'Adjust the menu container 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 .menusContainerRadius.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menusContainerRadius.value <=0? 'default Radius' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), 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 .menusContainerElevation.value, min: 0, max: 30, divisions: 16, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenusContainerElevation(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Elevation of Container', description: 'Adjust the elevation of container to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('ELEV'), Obx( () { final borderRadius = themeController .menusContainerElevation.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menusContainerElevation.value <=0? 'default elev' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const ListTile( title: Text('Padding of container content'), ), Obx( ()=> Row( children: [ Expanded( child: ListTile( contentPadding: const EdgeInsetsDirectional.only(start: 16), title: Slider( min: -1, max: 32, divisions: 33, label:(themeController.menuPaddingStart.value) < 0 ? 'default 0' : (themeController.menuPaddingStart.value.toStringAsFixed(0) ), value: themeController.menuPaddingStart.value , onChanged: (double value) { themeController.setMenuPaddingStart( value.roundToDouble()); }, ), trailing: SizedBox( width: 58, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'START', style:TextStyles.bodySmall, ), Text( (themeController.menuPaddingStart.value ) < 0 ? 'default 0' : (themeController.menuPaddingStart.value .toStringAsFixed(0) ) , style: TextStyles.bodySmall .copyWith(fontWeight: FontWeight.bold), ), ], ), ), ), ), Expanded( child: ListTile( contentPadding: const EdgeInsetsDirectional.only(end: 16), title: Slider( min: -1, max: 32, divisions: 33, label: (themeController.menuPaddingEnd.value) < 0 ? 'default 0' : (themeController.menuPaddingEnd.value.toStringAsFixed(0)), value: themeController.menuPaddingEnd.value , onChanged: (double value) { themeController.setMenuPaddingEnd(value.roundToDouble()); }, ), trailing: Padding( padding: const EdgeInsetsDirectional.only(end: 5), child: SizedBox( width: 58, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'END', style: TextStyles.bodySmall, ), Text( (themeController.menuPaddingEnd.value ) < 0 ? 'default 0' : (themeController.menuPaddingEnd.value .toStringAsFixed(0) ), style: TextStyles.bodySmall .copyWith(fontWeight: FontWeight.bold), ), ], ), ), ), ), ), ], ), ), Obx( ()=> Row( children: [ Expanded( child: ListTile( contentPadding: const EdgeInsetsDirectional.only(start: 16), title: Slider( min: -1, max: 32, divisions: 33, label: (themeController.menuPaddingTop.value) < 0 ? 'default 0' : (themeController.menuPaddingTop.value.toStringAsFixed(0)), value: themeController.menuPaddingTop.value , onChanged: (double value) { themeController.setMenuPaddingTop(value.roundToDouble()); }, ), trailing: SizedBox( width: 58, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'TOP', style:TextStyles.bodySmall, ), Text( (themeController.menuPaddingTop.value) < 0 ? 'default 0' : (themeController.menuPaddingTop.value .toStringAsFixed(0)), style: TextStyles.bodySmall .copyWith(fontWeight: FontWeight.bold), ), ], ), ), ), ), Expanded( child: ListTile( contentPadding: const EdgeInsetsDirectional.only(end: 16), title: Slider( min: -1, max: 32, divisions: 33, label: (themeController.menuPaddingBottom.value) < 0 ? 'default 0' : (themeController.menuPaddingBottom.value.toStringAsFixed(0) ), value: themeController.menuPaddingBottom.value , onChanged: (double value) { themeController.setMenuPaddingBottom(value.roundToDouble()); }, ), trailing: Padding( padding: const EdgeInsetsDirectional.only(end: 5), child: SizedBox( width: 58, child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'BOTTOM', style:TextStyles.bodySmall, ), Text( (themeController.menuPaddingBottom.value ) < 0 ? 'default 0' : (themeController.menuPaddingBottom.value .toStringAsFixed(0)), style: TextStyles.bodySmall .copyWith(fontWeight: FontWeight.bold), ), ], ), ), ), ), ), ], ), ), ), ], ), ), ), ); } 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, ), ], ), ), ], ), ); } }

MenuContainer Documentation