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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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: <Widget>[
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<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,
),
],
),
),
],
),
);
} }
