PopupScreen.dart class PopupScreen extends StatefulWidget { final bool showAppBar; const PopupScreen({super.key, this.showAppBar = false}); @override State createState() => _PopupScreenState(); } class _PopupScreenState extends State { ThemeController themeController = Get.find(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Theme.of(context).colorScheme.background, appBar: widget.showAppBar ? AppBar( title: const Text( "Popup & Dropdown 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: [ _buildCommonContainer( child: ThemeColorSelector(controller: themeController,), title: "Theme Color", description: "Select the theme mode you prefer.", ), const ListTileReveal( leading: Icon(Icons.arrow_drop_down_circle_outlined), title: Text('Popup Menu Button'), subtitleDense: true, subtitle: Text( 'The PopupMenuButton can be used on any widget, it is typically ' 'used on an Icon, as below. Its implementation differs from newer ' 'Material-3 menu components. ' 'PopupMenuButton is originally a Material-2 design, that has also ' 'been updated to M3 style. It still works well and can be themed ' 'to a certain degree. ' 'If applicable, consider using newer more versatile M3 menu ' 'components, like MenuAnchor and DropdownMenu.\n', ), ), _popupMenuButtonsShowcase(), const SizedBox(height: 20,), Obx( () => CustomContainer( title: 'Popupmenu Icon color', description: 'Icon color', child: ThemePopupMenu3( schemeIndex: themeController.popupMenuIconColorIndex.value, onChanged: themeController.setPopupMenuIconColor), ), ), const SizedBox( height: 20, ), const SizedBox( height: 10, ), Obx( () => CustomContainer( title: 'Popupmenu Container color', description: 'Background color', child: ThemePopupMenu3( schemeIndex: themeController.popupMenuContainerColorIndex.value, onChanged: themeController.setPopupMenuContainerColor), ), ), 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 .popupMenuContainerColorOpacity.value, min: -1, max: 100, divisions: 25, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setPopupMenuContainerColorOpacity(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Popupmenu Container Color Opacity', description: 'Adjust the popupmenu 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 .popupMenuContainerColorOpacity.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .popupMenuContainerColorOpacity.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 .popupMenuContainerRadius.value, min: 0, max: 12, divisions: 10, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setPopupMenuContainerRadius(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Popupmenu Container Radius', description: 'Adjust the popupmenu 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 .popupMenuContainerRadius.value; final integerPart = double.parse(borderRadius.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .popupMenuContainerRadius.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 .popupMenuElevation.value, min: 0, max: 20, divisions: 11, inactiveColor: Colors.transparent, onChanged: (double value) { themeController .setPopupMenuElevation(value); if (kDebugMode) { print(value); } }, ), ), ), title: 'Popupmenu Elevation', description: 'Adjust the popupmenu elevation opacity to your preference.', ), ), ), Padding( padding: const EdgeInsets.only(left: 10.0, top: 28), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ const Text('ELEV'), Obx( () { final elevation = themeController .popupMenuElevation.value; final integerPart = double.parse(elevation.toStringAsFixed(0)) .toInt(); return SizedBox( width: 55, child: Text( textAlign: TextAlign.center, maxLines: 2, softWrap: true, themeController .popupMenuElevation.value <=0 ? 'default elev' : integerPart.toString(), style: TextStyles.titleSmall .copyWith(fontSize: 12), ), ); }, ) ], ), ) ], ), const SizedBox(height: 20,), ], ), ), ), ), ); } Widget _buildCommonContainer( {required Widget child, required String title, required String description}) { return Column( children: [ Container( padding: const EdgeInsets.only(left: 16), alignment: Alignment.centerLeft, child: Text( title, style: TextStyles.titleSmall, ), ), const SizedBox(height: 5), Container( width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: Theme.of(context).scaffoldBackgroundColor, borderRadius: BorderRadius.circular(10), boxShadow: [containerShadow(context)], ), child: child, ), const SizedBox(height: 5), Container( padding: const EdgeInsets.only(left: 16), alignment: Alignment.centerLeft, child: Text( description, style: TextStyles.bodyMedium, ), ), ], ); } Widget _popupMenuButtonsShowcase() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ _popupMenuButtonShowcase(), const SizedBox(width: 16), _checkedPopupMenuButtonShowcase(), const SizedBox(width: 16), _popupMenuButtonTilesShowcase(), ], ), ]); } Widget _popupMenuButtonShowcase () { return RepaintBoundary( child: PopupMenuButton( onSelected: (_) {}, position: PopupMenuPosition.under, itemBuilder: (BuildContext context) => const >[ PopupMenuItem(value: 1, child: Text('Option 1')), PopupMenuItem(value: 2, child: Text('Option 2')), PopupMenuItem(value: 3, child: Text('Option 3')), PopupMenuItem(value: 4, child: Text('Option 4')), PopupMenuItem(value: 5, child: Text('Option 5')), ], icon: const Icon(Icons.more_vert), ), ); } Widget _checkedPopupMenuButtonShowcase(){ return RepaintBoundary( child: PopupMenuButton( onSelected: (_) {}, position: PopupMenuPosition.under, itemBuilder: (BuildContext context) => const >[ CheckedPopupMenuItem(value: 1, child: Text('Option 1')), CheckedPopupMenuItem(value: 2, child: Text('Option 2')), CheckedPopupMenuItem(value: 3, child: Text('Option 3')), CheckedPopupMenuItem(value: 4, child: Text('Option 4')), CheckedPopupMenuItem(value: 5, child: Text('Option 5')), ], icon: const Icon(Icons.playlist_add_check), ), ); } Widget _popupMenuButtonTilesShowcase(){ return RepaintBoundary( child: PopupMenuButton( tooltip: 'Show menu using\nListTile items', onSelected: (_) {}, position: PopupMenuPosition.under, itemBuilder: (BuildContext context) => const >[ PopupMenuItem( value: 1, child: ListTile(leading: Icon(Icons.alarm), title: Text('Alarm'))), PopupMenuItem( value: 2, child: ListTile( leading: Icon(Icons.cabin), title: Text('Wood cabin'))), PopupMenuItem( value: 3, child: ListTile( leading: Icon(Icons.camera_outdoor_rounded), title: Text('Surveillance'))), PopupMenuItem( value: 4, child: ListTile( leading: Icon(Icons.water_damage), title: Text('Water damage'))), ], icon: const Icon(Icons.more_horiz), ), ); } }

Popup Documentation