MenuBarScreen.dart class MenuBarScreen extends StatelessWidget { const MenuBarScreen({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("MenuBar 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: [ _menuBarShowcase(), const SizedBox(height: 20,), Obx( () => CustomContainer( title: 'MenuBar Background color', description: 'Background color', child: ThemePopupMenu3( schemeIndex: themeController.menusBackgroundColorIndex.value, onChanged: themeController.setMenusBackgroundColorIndex), ), ), 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 .menuBarContainerRadius.value, min: 0, max: 30, divisions: 16, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenuBarContainerRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'MenuBar Radius', description: 'Adjust the menu bar 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 .menuBarContainerRadius.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menuBarContainerRadius.value <=0? 'default Radius' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const SizedBox( height: 10, ), Obx( ()=> SwitchListTileReveal( title: const Text('Remove elevation shadow',style: TextStyle(fontSize: 15),), subtitleDense: true, subtitle: const Text( 'The M3 guide depicts MenuBars with no shadow and optional ' 'elevation with tint. Flutter defaults has shadow in M3. To be ' 'able to use elevation with only elevation tint in M3, turn ' 'this setting ON, to remove the shadow.\n', ), value: themeController.menuBarShadowColor?.value != Colors.transparent, onChanged: (bool removeShadow) { if (removeShadow) { themeController.setMenuBarShadowColor(Colors.black); } else { themeController.setMenuBarShadowColor(Colors.transparent); } }), ), const SizedBox( height: 10, ), 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 .menuBarContainerElevation.value, min: 0, max: 30, divisions: 16, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setMenuBarContainerElevation(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 .menuBarContainerElevation.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .menuBarContainerElevation.value <=0? 'default elev' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), ], ), ], ), ), ), ); } Widget _menuBarShowcase(){ return Shortcuts( shortcuts: const { SingleActivator(LogicalKeyboardKey.keyT, control: true): VoidCallbackIntent(debugDumpApp), }, child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ Row( children: [ Expanded( child: MenuBar( children: [ SubmenuButton( menuChildren: [ MenuItemButton( onPressed: () { showAboutDialog( context: context, useRootNavigator: false, applicationName: 'MenuBar Demo', applicationVersion: '1.0.0', ); }, child: const MenuAcceleratorLabel('&About'), ), SubmenuButton( menuChildren: [ MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Saved!'), ), ); }, child: const MenuAcceleratorLabel('&Save now'), ), MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Load!'), ), ); }, child: const MenuAcceleratorLabel('&Load now'), ), ], child: const Text('File'), ), MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Quit!'), ), ); }, child: const MenuAcceleratorLabel('&Quit'), ), ], child: const MenuAcceleratorLabel('&File'), ), SubmenuButton( menuChildren: [ MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Bold!'), ), ); }, child: const MenuAcceleratorLabel('&Bold'), ), MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Italic!'), ), ); }, child: const MenuAcceleratorLabel('&Italic'), ), MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Underline!'), ), ); }, child: const MenuAcceleratorLabel('&Underline'), ), ], child: const MenuAcceleratorLabel('&Style'), ), SubmenuButton( menuChildren: [ const MenuItemButton( onPressed: null, child: MenuAcceleratorLabel('&Disabled item'), ), MenuItemButton( onPressed: () { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Minify!'), ), ); }, child: const MenuAcceleratorLabel('Mi&nify'), ), ], child: const MenuAcceleratorLabel('&View'), ), ], ), ), ], ), ], ), ); } }

MenuBar Documentation