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: [ SegmentedButton( showSelectedIcon: false, segments: const >[ ButtonSegment( value: Calendar.day, label: Text('Day'), ), ButtonSegment( value: Calendar.week, label: Text('Week'), ), ButtonSegment( value: Calendar.month, label: Text('Month'), ), ButtonSegment( value: Calendar.year, label: Text('Year'), ), ], selected: { segmentedButtonController.selected.value }, onSelectionChanged: (Set selected) { segmentedButtonController.setSelected(selected.first); }, ), SegmentedButton( segments: >[ ButtonSegment( value: Calendar.day, label: Text('Day', style: TextStyles.bodySmall,), icon: const Icon(Icons.calendar_view_day), ), ButtonSegment( value: Calendar.week, icon: const Icon(Icons.calendar_view_week), label: Text('Week', style: TextStyles.bodySmall,), ), const ButtonSegment( value: Calendar.month, icon: Icon(Icons.calendar_view_month), label: Text('Mont'), ), const ButtonSegment( value: Calendar.year, icon: Icon(Icons.calendar_today), label: Text('Year'), ), ], selected: { segmentedButtonController.selected.value }, onSelectionChanged: (Set selected) { segmentedButtonController.setSelected(selected.first); }, ), SegmentedButton( segments: >[ const ButtonSegment( value: Calendar.day, label: Text('Day'), icon: Icon(Icons.calendar_view_day), enabled: false, ), ButtonSegment( value: Calendar.week, icon: const Icon(Icons.calendar_view_week), label: Text('Week', style: TextStyles.bodySmall,), ), const ButtonSegment( value: Calendar.month, icon: Icon(Icons.calendar_view_month), label: Text('Mont'), enabled: false, ), const ButtonSegment( value: Calendar.year, icon: Icon(Icons.calendar_today), label: Text('Year'), ), ], selected: { segmentedButtonController.selected.value }, onSelectionChanged: (Set selected) { segmentedButtonController.setSelected(selected.first); }, ), ], ), ); } ); } }

Segmented Buttons Documentation