Widget _segmentedButtonShowCase(){
return Obx(
() {
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 8,
runSpacing: 8,
children: <Widget>[
SegmentedButton<Calendar>(
showSelectedIcon: false,
segments: const <ButtonSegment<Calendar>>[
ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day'),
),
ButtonSegment<Calendar>(
value: Calendar.week,
label: Text('Week'),
),
ButtonSegment<Calendar>(
value: Calendar.month,
label: Text('Month'),
),
ButtonSegment<Calendar>(
value: Calendar.year,
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
SegmentedButton<Calendar>(
segments: <ButtonSegment<Calendar>>[
ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day', style: TextStyles.bodySmall,),
icon: const Icon(Icons.calendar_view_day),
),
ButtonSegment<Calendar>(
value: Calendar.week,
icon: const Icon(Icons.calendar_view_week),
label: Text('Week', style: TextStyles.bodySmall,),
),
const ButtonSegment<Calendar>(
value: Calendar.month,
icon: Icon(Icons.calendar_view_month),
label: Text('Mont'),
),
const ButtonSegment<Calendar>(
value: Calendar.year,
icon: Icon(Icons.calendar_today),
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
SegmentedButton<Calendar>(
segments: <ButtonSegment<Calendar>>[
const ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day'),
icon: Icon(Icons.calendar_view_day),
enabled: false,
),
ButtonSegment<Calendar>(
value: Calendar.week,
icon: const Icon(Icons.calendar_view_week),
label: Text('Week', style: TextStyles.bodySmall,),
),
const ButtonSegment<Calendar>(
value: Calendar.month,
icon: Icon(Icons.calendar_view_month),
label: Text('Mont'),
enabled: false,
),
const ButtonSegment<Calendar>(
value: Calendar.year,
icon: Icon(Icons.calendar_today),
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
],
),
);
}
);
}
SegmentedButtonScreen.dart
class SegmentedButtonScreen extends StatelessWidget {
const ElevatedButtonScreen({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("Segmented 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: [
_segmentedButtonShowCase(),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Background color',
description: 'Background color',
child: ThemePopupMenu3(
schemeIndex:
themeController.segmentedButtonBackgroundSchemeIndex.value,
onChanged:
themeController.setSegmentedButtonBackgroundSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Unselected Background color',
description: 'Unselected Background color',
child: ThemePopupMenu3(
schemeIndex:
themeController.segmentedButtonUnSelectBackgroundSchemeIndex.value,
onChanged:
themeController.setSegmentedButtonUnSelectBackgroundSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Foreground color',
description: 'Foreground color',
child: ThemePopupMenu3(
schemeIndex:
themeController.segmentedButtonSelectedForegroundSchemeIndex.value,
onChanged:
themeController.setSegmentedButtonSelectedForegroundSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Unselected Foreground color',
description: 'Unselected Foreground color',
child: ThemePopupMenu3(
schemeIndex:
themeController.segmentedButtonUnSelectForegroundSchemeIndex.value,
onChanged:
themeController.setSegmentedButtonUnSelectForegroundSchemeColor),
),
),
const SizedBox(
height: 20,
),
Obx(
() => CustomContainer(
title: 'Button Border color',
description: 'Border color',
child: ThemePopupMenu3(
schemeIndex:
themeController.segmentedButtonBorderSchemeIndex.value,
onChanged:
themeController.setSegmentedButtonBorderSchemeColor),
),
),
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
.segmentedButtonBorderRadius.value,
min: -1,
max: 40,
divisions: 20,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController
.setSegmentedButtonBorderRadius(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Segment Button Border Radius',
description:
'Adjust the segment 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
.segmentedButtonBorderRadius.value;
final integerPart =
double.parse(borderRadius.toStringAsFixed(0))
.toInt();
return SizedBox(
width: 55,
child: Text(
textAlign: TextAlign.center,
maxLines: 2,
softWrap: true,
themeController
.segmentedButtonBorderRadius.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
.segmentedButtonBorderWidth.value,
min: -1,
max: 5,
divisions: 11,
inactiveColor: Colors.transparent,
onChanged: (double value) {
themeController
.setSegmentedButtonBorderWidth(value);
if (kDebugMode) {
print(value);
}
},
),
),
),
title: 'Segment Button Border Width',
description:
'Adjust the segment 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.segmentedButtonBorderWidth.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 _segmentedButtonShowCase(){
return Obx(
() {
return RepaintBoundary(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.start,
spacing: 8,
runSpacing: 8,
children: <Widget>[
SegmentedButton<Calendar>(
showSelectedIcon: false,
segments: const <ButtonSegment<Calendar>>[
ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day'),
),
ButtonSegment<Calendar>(
value: Calendar.week,
label: Text('Week'),
),
ButtonSegment<Calendar>(
value: Calendar.month,
label: Text('Month'),
),
ButtonSegment<Calendar>(
value: Calendar.year,
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
SegmentedButton<Calendar>(
segments: <ButtonSegment<Calendar>>[
ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day', style: TextStyles.bodySmall,),
icon: const Icon(Icons.calendar_view_day),
),
ButtonSegment<Calendar>(
value: Calendar.week,
icon: const Icon(Icons.calendar_view_week),
label: Text('Week', style: TextStyles.bodySmall,),
),
const ButtonSegment<Calendar>(
value: Calendar.month,
icon: Icon(Icons.calendar_view_month),
label: Text('Mont'),
),
const ButtonSegment<Calendar>(
value: Calendar.year,
icon: Icon(Icons.calendar_today),
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
SegmentedButton<Calendar>(
segments: <ButtonSegment<Calendar>>[
const ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day'),
icon: Icon(Icons.calendar_view_day),
enabled: false,
),
ButtonSegment<Calendar>(
value: Calendar.week,
icon: const Icon(Icons.calendar_view_week),
label: Text('Week', style: TextStyles.bodySmall,),
),
const ButtonSegment<Calendar>(
value: Calendar.month,
icon: Icon(Icons.calendar_view_month),
label: Text('Mont'),
enabled: false,
),
const ButtonSegment<Calendar>(
value: Calendar.year,
icon: Icon(Icons.calendar_today),
label: Text('Year'),
),
],
selected: <Calendar>{
segmentedButtonController.selected.value
},
onSelectionChanged: (Set<Calendar> selected) {
segmentedButtonController.setSelected(selected.first);
},
),
],
),
);
}
);
}
}
