Widget _toggleButtonsShowcase(bool? compareButtons) {
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 8,
runSpacing: 8,
children: <Widget>[
Obx(() => ToggleButtons(
isSelected: segmentedButtonController.toggleButtonSelected
.map((rxBool) => rxBool.value)
.toList(),
onPressed: (int toggledIndex) {
segmentedButtonController.toggleButton(toggledIndex);
},
borderWidth: themeController.toggleButtonBorderWidth.value <= 0
? 2
: themeController.toggleButtonBorderWidth.value,
children: const <Widget>[
Icon(
Icons.adb,
),
Icon(
Icons.phone,
),
Icon(
Icons.account_circle,
),
],
)),
if (compareButtons ?? false)
OutlinedButton(
onPressed: () {},
child: const Text('Outlined'),
)
else
const SizedBox(),
if (compareButtons ?? false)
FilledButton(
onPressed: () {},
child: const Text('Filled'),
)
else
const SizedBox(),
Obx(() => ToggleButtons(
isSelected: segmentedButtonController.toggleButtonSelected
.map((rxBool) => rxBool.value)
.toList(),
onPressed: null,
borderWidth: themeController.toggleButtonBorderWidth.value <= 0
? 2
: themeController.toggleButtonBorderWidth.value,
children: const <Widget>[
Icon(
Icons.adb,
),
Icon(
Icons.phone,
),
Icon(
Icons.account_circle,
),
],
)),
if (compareButtons ?? false)
const OutlinedButton(
onPressed: null,
child: Text('Outlined'),
)
else
const SizedBox(),
],
),
);
}
ToggleButtonScreen.dart
class ToggleButtonScreen extends StatelessWidget {
const ToggleButtonScreen({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("Toggle 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: [
_toggleButtonsShowcase(true),
const SizedBox(
height: 15,
),
Obx(
() => CustomContainer(
title: 'Button Fill color',
description: 'Fill color',
child: ThemePopupMenu3(
schemeIndex:
themeController.toggleButtonSchemeIndex.value,
onChanged: themeController.setToggleButtonSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Icon color',
description: 'Icon color',
child: ThemePopupMenu3(
schemeIndex: themeController
.toggleButtonSecondarySchemeIndex.value,
onChanged: themeController
.setToggleButtonSecondarySchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Selected Icon color',
description: 'Selected Icon color',
child: ThemePopupMenu3(
schemeIndex: themeController
.toggleButtonSelectedIconSchemeIndex.value,
onChanged: themeController
.setToggleButtonSelectedIconSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Border color',
description: 'Border color',
child: ThemePopupMenu3(
schemeIndex:
themeController.toggleButtonBorderSchemeIndex.value,
onChanged:
themeController.setToggleButtonBorderSchemeColor),
),
),
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
.toggleButtonBorderRadius.value,
min: -1,
max: 40,
divisions: 20,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController
.setToggleButtonBorderRadius(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Toggle Button Border Radius',
description:
'Adjust the toggle border 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
.toggleButtonBorderRadius.value;
final integerPart =
double.parse(borderRadius.toStringAsFixed(0))
.toInt();
return SizedBox(
width: 55,
child: Text(
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
themeController
.toggleButtonBorderRadius.value ==
-1
? 'default stadium'
: integerPart.toString(),
style: TextStyles.titleSmall
.copyWith(fontSize: 12),
),
);
},
)
],
),
)
],
),
const SizedBox(height: 20),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
child: Obx(
() => _buildCommonContainer(
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
overlayShape: SliderComponentShape.noOverlay,
),
child: SizedBox(
width: 1000,
child: Slider(
value: themeController
.toggleButtonBorderWidth.value,
min: -1,
max: 5,
divisions: 11,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController
.setToggleButtonBorderWidth(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Toggle Button Border Width',
description:
'Adjust the toggle border width to your preference.',
),
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0, top: 28),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('Width'),
Obx(
() {
final borderRadius =
themeController.toggleButtonBorderWidth.value;
final integerPart = borderRadius
.toStringAsFixed(1); // Get the integer part
final textToShow = borderRadius <= 0
? 'default stadium'
: integerPart.toString();
return SizedBox(
width: 55,
child: Text(
textToShow,
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
style: TextStyles.titleSmall
.copyWith(fontSize: 12),
),
);
},
),
],
),
)
],
),
],
),
),
),
);
}
Widget _toggleButtonsShowcase(bool? compareButtons) {
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 8,
runSpacing: 8,
children: <Widget>[
Obx(() => ToggleButtons(
isSelected: segmentedButtonController.toggleButtonSelected
.map((rxBool) => rxBool.value)
.toList(),
onPressed: (int toggledIndex) {
segmentedButtonController.toggleButton(toggledIndex);
},
borderWidth: themeController.toggleButtonBorderWidth.value <= 0
? 2
: themeController.toggleButtonBorderWidth.value,
children: const <Widget>[
Icon(
Icons.adb,
),
Icon(
Icons.phone,
),
Icon(
Icons.account_circle,
),
],
)),
if (compareButtons ?? false)
OutlinedButton(
onPressed: () {},
child: const Text('Outlined'),
)
else
const SizedBox(),
if (compareButtons ?? false)
FilledButton(
onPressed: () {},
child: const Text('Filled'),
)
else
const SizedBox(),
Obx(() => ToggleButtons(
isSelected: segmentedButtonController.toggleButtonSelected
.map((rxBool) => rxBool.value)
.toList(),
onPressed: null,
borderWidth: themeController.toggleButtonBorderWidth.value <= 0
? 2
: themeController.toggleButtonBorderWidth.value,
children: const <Widget>[
Icon(
Icons.adb,
),
Icon(
Icons.phone,
),
Icon(
Icons.account_circle,
),
],
)),
if (compareButtons ?? false)
const OutlinedButton(
onPressed: null,
child: Text('Outlined'),
)
else
const SizedBox(),
],
),
);
}
}
