fluttergithubbot
diff --git a/‎packages/flutter/lib/src/cupertino/sliding_segmented_control.dart
Lines changed: 132 additions & 26 deletions b/‎packages/flutter/lib/src/cupertino/sliding_segmented_control.dart
Lines changed: 132 additions & 26 deletions
@@ -18,13 +18,17 @@ import 'package:flutter/widgets.dart';
 import 'colors.dart';
 
 // Extracted from https://developer.apple.com/design/resources/.
+// Default values have been updated to match iOS 17 figma file: https://www.figma.com/community/file/1248375255495415511.
 
 // Minimum padding from edges of the segmented control to edges of
 // encompassing widget.
 const EdgeInsetsGeometry _kHorizontalItemPadding = EdgeInsets.symmetric(vertical: 2, horizontal: 3);
 
+// The corner radius of the segmented control.
+const Radius _kCornerRadius = Radius.circular(9);
+
 // The corner radius of the thumb.
-const Radius _kThumbRadius = Radius.circular(6.93);
+const Radius _kThumbRadius = Radius.circular(7);
 // The amount of space by which to expand the thumb from the size of the currently
 // selected child.
 const EdgeInsets _kThumbInsets = EdgeInsets.symmetric(horizontal: 1);
@@ -40,17 +44,17 @@ const CupertinoDynamicColor _kThumbColor = CupertinoDynamicColor.withBrightness(
 );
 
 // The amount of space by which to inset each separator.
-const EdgeInsets _kSeparatorInset = EdgeInsets.symmetric(vertical: 6);
+const EdgeInsets _kSeparatorInset = EdgeInsets.symmetric(vertical: 5);
 const double _kSeparatorWidth = 1;
-const Radius _kSeparatorRadius = Radius.circular(_kSeparatorWidth/2);
+const Radius _kSeparatorRadius = Radius.circular(_kSeparatorWidth / 2);
 
 // The minimum scale factor of the thumb, when being pressed on for a sufficient
 // amount of time.
 const double _kMinThumbScale = 0.95;
 
 // The minimum horizontal distance between the edges of the separator and the
 // closest child.
-const double _kSegmentMinPadding = 9.25;
+const double _kSegmentMinPadding = 10;
 
 // The threshold value used in hasDraggedTooFar, for checking against the square
 // L2 distance from the location of the current drag pointer, to the closest
@@ -59,17 +63,24 @@ const double _kSegmentMinPadding = 9.25;
 // Both the mechanism and the value are speculated.
 const double _kTouchYDistanceThreshold = 50.0 * 50.0;
 
-// The corner radius of the segmented control.
-//
-// Inspected from iOS 13.2 simulator.
-const double _kCornerRadius = 8;
-
 // The minimum opacity of an unselected segment, when the user presses on the
 // segment and it starts to fadeout.
 //
-// Inspected from iOS 13.2 simulator.
+// Inspected from iOS 17.5 simulator.
 const double _kContentPressedMinOpacity = 0.2;
 
+// Inspected from iOS 17.5 simulator.
+const double _kFontSize = 13.0;
+
+// Inspected from iOS 17.5 simulator.
+const FontWeight _kFontWeight = FontWeight.w500;
+
+// Inspected from iOS 17.5 simulator.
+const FontWeight _kHighlightedFontWeight = FontWeight.w600;
+
+// Inspected from iOS 17.5 simulator
+const Color _kDisabledContentColor = Color.fromARGB(115, 122, 122, 122);
+
 // The spring animation used when the thumb changes its rect.
 final SpringSimulation _kThumbSpringAnimationSimulation = SpringSimulation(
   const SpringDescription(mass: 1, stiffness: 503.551, damping: 44.8799),
@@ -91,19 +102,23 @@ class _Segment<T> extends StatefulWidget {
     required this.pressed,
     required this.highlighted,
     required this.isDragging,
+    required this.enabled,
+    required this.segmentLocation,
   }) : super(key: key);
 
   final Widget child;
 
   final bool pressed;
   final bool highlighted;
+  final bool enabled;
+  final _SegmentLocation segmentLocation;
 
   // Whether the thumb of the parent widget (CupertinoSlidingSegmentedControl)
   // is currently being dragged.
   final bool isDragging;
 
-  bool get shouldFadeoutContent => pressed && !highlighted;
-  bool get shouldScaleContent => pressed && highlighted && isDragging;
+  bool get shouldFadeoutContent => pressed && !highlighted && enabled;
+  bool get shouldScaleContent => pressed && highlighted && isDragging && enabled;
 
   @override
   _SegmentState<T> createState() => _SegmentState<T>();
@@ -151,6 +166,12 @@ class _SegmentState<T> extends State<_Segment<T>> with TickerProviderStateMixin<
 
   @override
   Widget build(BuildContext context) {
+    final Alignment scaleAlignment = switch (widget.segmentLocation) {
+      _SegmentLocation.leftmost => Alignment.centerLeft,
+      _SegmentLocation.rightmost => Alignment.centerRight,
+      _SegmentLocation.inbetween => Alignment.center,
+    };
+
     return MetaData(
       // Expand the hitTest area of this widget.
       behavior: HitTestBehavior.opaque,
@@ -164,10 +185,15 @@ class _SegmentState<T> extends State<_Segment<T>> with TickerProviderStateMixin<
             child: AnimatedDefaultTextStyle(
               style: DefaultTextStyle.of(context)
                 .style
-                .merge(TextStyle(fontWeight: widget.highlighted ? FontWeight.w500 : FontWeight.normal)),
+                .merge(TextStyle(
+                  fontWeight: widget.highlighted ? _kHighlightedFontWeight : _kFontWeight,
+                  fontSize: _kFontSize,
+                  color: widget.enabled ? null : _kDisabledContentColor,
+                )),
               duration: _kHighlightAnimationDuration,
               curve: Curves.ease,
               child: ScaleTransition(
+                alignment: scaleAlignment,
                 scale: highlightPressScaleAnimation,
                 child: widget.child,
               ),
@@ -178,11 +204,12 @@ class _SegmentState<T> extends State<_Segment<T>> with TickerProviderStateMixin<
           // the same and will always be greater than equal to that of the
           // visible child (at index 0), to keep the size of the entire
           // SegmentedControl widget consistent throughout the animation.
-          Offstage(
-            child: DefaultTextStyle.merge(
-              style: const TextStyle(fontWeight: FontWeight.w500),
-              child: widget.child,
+          DefaultTextStyle.merge(
+            style: const TextStyle(
+              fontWeight: _kHighlightedFontWeight,
+              fontSize: _kFontSize,
             ),
+            child: widget.child
           ),
         ],
       ),
@@ -321,6 +348,7 @@ class CupertinoSlidingSegmentedControl<T extends Object> extends StatefulWidget
     super.key,
     required this.children,
     required this.onValueChanged,
+    this.disabledChildren = const <Never>{},
     this.groupValue,
     this.thumbColor = _kThumbColor,
     this.padding = _kHorizontalItemPadding,
@@ -341,6 +369,20 @@ class CupertinoSlidingSegmentedControl<T extends Object> extends StatefulWidget
   /// The map must have more than one entry.
   final Map<T, Widget> children;
 
+  /// The set of identifying keys that correspond to the segments that should be
+  /// disabled.
+  ///
+  /// Disabled children cannot be selected by dragging, but they can be selected
+  /// programmatically. For example, if the [groupValue] is set to a disabled
+  /// segment, the segment is still selected but the segment content looks disabled.
+  ///
+  /// If an enabled segment is selected by dragging gesture and becomes disabled
+  /// before dragging finishes, [onValueChanged] will be triggered when finger is
+  /// released and the disabled segment is selected.
+  ///
+  /// By default, all segments are selectable.
+  final Set<T> disabledChildren;
+
   /// The identifier of the widget that is currently selected.
   ///
   /// This must be one of the keys in the [Map] of [children].
@@ -499,11 +541,15 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
   // Otherwise the thumb can be dragged around in an ongoing drag gesture.
   bool? _startedOnSelectedSegment;
 
+  // Whether the current drag gesture started on a disabled segment. When this
+  // flag is true, drag gestures will be ignored.
+  bool _startedOnDisabledSegment = false;
+
   // Whether an ongoing horizontal drag gesture that started on the thumb is
   // present. When true, defer/ignore changes to the `highlighted` variable
   // from other sources (except for semantics) until the gesture ends, preventing
   // them from interfering with the active drag gesture.
-  bool get isThumbDragging => _startedOnSelectedSegment ?? false;
+  bool get isThumbDragging => (_startedOnSelectedSegment ?? false) && !_startedOnDisabledSegment;
 
   // Converts local coordinate to segments.
   T segmentForXPosition(double dx) {
@@ -554,6 +600,7 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
     if (highlighted == newValue) {
       return;
     }
+
     setState(() { highlighted = newValue; });
     // Additionally, start the thumb animation if the highlighted segment
     // changes. If the thumbController is already running, the render object's
@@ -578,14 +625,18 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
     }
     final T segment = segmentForXPosition(details.localPosition.dx);
     onPressedChangedByGesture(null);
-    if (segment != widget.groupValue) {
+    if (segment != widget.groupValue && !widget.disabledChildren.contains(segment)) {
       widget.onValueChanged(segment);
     }
   }
 
   void onDown(DragDownDetails details) {
     final T touchDownSegment = segmentForXPosition(details.localPosition.dx);
     _startedOnSelectedSegment = touchDownSegment == highlighted;
+    _startedOnDisabledSegment = widget.disabledChildren.contains(touchDownSegment);
+    if (widget.disabledChildren.contains(touchDownSegment)) {
+      return;
+    }
     onPressedChangedByGesture(touchDownSegment);
 
     if (isThumbDragging) {
@@ -594,10 +645,20 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
   }
 
   void onUpdate(DragUpdateDetails details) {
+    // If drag gesture starts on disabled segment, no update needed.
+    if (_startedOnDisabledSegment) {
+      return;
+    }
+
+    // If drag gesture starts on enabled segment and dragging on disabled segment,
+    // no update needed.
+    final T touchDownSegment = segmentForXPosition(details.localPosition.dx);
+    if (widget.disabledChildren.contains(touchDownSegment)) {
+      return;
+    }
     if (isThumbDragging) {
-      final T segment = segmentForXPosition(details.localPosition.dx);
-      onPressedChangedByGesture(segment);
-      onHighlightChangedByGesture(segment);
+      onPressedChangedByGesture(touchDownSegment);
+      onHighlightChangedByGesture(touchDownSegment);
     } else {
       final T? segment = _hasDraggedTooFar(details)
         ? null
@@ -629,7 +690,6 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
     if (isThumbDragging) {
       _playThumbScaleAnimation(isExpanding: true);
     }
-
     onPressedChangedByGesture(null);
     _startedOnSelectedSegment = null;
   }
@@ -670,10 +730,23 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
         );
       }
 
+      final TextDirection textDirection = Directionality.of(context);
+      final _SegmentLocation segmentLocation = switch (textDirection) {
+        TextDirection.ltr when index == 0 => _SegmentLocation.leftmost,
+        TextDirection.ltr when index == widget.children.length - 1 => _SegmentLocation.rightmost,
+        TextDirection.rtl when index == widget.children.length - 1 => _SegmentLocation.leftmost,
+        TextDirection.rtl when index == 0 => _SegmentLocation.rightmost,
+        TextDirection.ltr || TextDirection.rtl => _SegmentLocation.inbetween,
+      };
       children.add(
         Semantics(
           button: true,
-          onTap: () { widget.onValueChanged(entry.key); },
+          onTap: () {
+            if (widget.disabledChildren.contains(entry.key)) {
+              return;
+            }
+            widget.onValueChanged(entry.key);
+           },
           inMutuallyExclusiveGroup: true,
           selected: widget.groupValue == entry.key,
           child: MouseRegion(
@@ -683,6 +756,8 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
               highlighted: isHighlighted,
               pressed: pressed == entry.key,
               isDragging: isThumbDragging,
+              enabled: !widget.disabledChildren.contains(entry.key),
+              segmentLocation: segmentLocation,
               child: entry.value,
             ),
           ),
@@ -708,9 +783,12 @@ class _SegmentedControlState<T extends Object> extends State<CupertinoSlidingSeg
     return UnconstrainedBox(
       constrainedAxis: Axis.horizontal,
       child: Container(
+        // Clip the thumb shadow if it is outside of the segmented control. This
+        // behavior is eyeballed by the iOS 17.5 simulator.
+        clipBehavior: Clip.antiAlias,
         padding: widget.padding.resolve(Directionality.of(context)),
         decoration: BoxDecoration(
-          borderRadius: const BorderRadius.all(Radius.circular(_kCornerRadius)),
+          borderRadius: const BorderRadius.all(_kCornerRadius),
           color: CupertinoDynamicColor.resolve(widget.backgroundColor, context),
         ),
         child: AnimatedBuilder(
@@ -773,6 +851,12 @@ class _SegmentedControlRenderWidget<T extends Object> extends MultiChildRenderOb
 
 class _SegmentedControlContainerBoxParentData extends ContainerBoxParentData<RenderBox> { }
 
+enum _SegmentLocation {
+  leftmost,
+  rightmost,
+  inbetween;
+}
+
 // The behavior of a UISegmentedControl as observed on iOS 13.1:
 //
 // 1. Tap up inside events will set the current selected index to the index of the
@@ -1131,6 +1215,9 @@ class _RenderSegmentedControl<T extends Object> extends RenderBox
   void paint(PaintingContext context, Offset offset) {
     final List<RenderBox> children = getChildrenAsList();
 
+    // Children contains both segment and separator and the order is segment ->
+    // separator -> segment. So to paint separators, index should start from 1 and
+    // the step should be 2.
     for (int index = 1; index < childCount; index += 2) {
       _paintSeparator(context, offset, children[index]);
     }
@@ -1164,8 +1251,24 @@ class _RenderSegmentedControl<T extends Object> extends RenderBox
 
       final Rect unscaledThumbRect = state.thumbAnimatable?.evaluate(state.thumbController) ?? newThumbRect;
       currentThumbRect = unscaledThumbRect;
+
+      final _SegmentLocation childLocation;
+      if (highlightedChildIndex == 0) {
+        childLocation = _SegmentLocation.leftmost;
+      } else if (highlightedChildIndex == children.length ~/ 2) {
+        childLocation = _SegmentLocation.rightmost;
+      } else {
+        childLocation = _SegmentLocation.inbetween;
+      }
+
+      final double delta = switch (childLocation) {
+        _SegmentLocation.leftmost => unscaledThumbRect.width - unscaledThumbRect.width * thumbScale,
+        _SegmentLocation.rightmost => unscaledThumbRect.width * thumbScale - unscaledThumbRect.width,
+        _SegmentLocation.inbetween => 0,
+      };
+
       final Rect thumbRect = Rect.fromCenter(
-        center: unscaledThumbRect.center,
+        center: unscaledThumbRect.center - Offset(delta / 2, 0),
         width: unscaledThumbRect.width * thumbScale,
         height: unscaledThumbRect.height * thumbScale,
       );
@@ -1176,6 +1279,9 @@ class _RenderSegmentedControl<T extends Object> extends RenderBox
     }
 
     for (int index = 0; index < children.length; index += 2) {
+      // Children contains both segment and separator and the order is segment ->
+      // separator -> segment. So to paint separators, indes should start from 0 and
+      // the step should be 2.
       _paintChild(context, offset, children[index]);
     }
   }