segmented_control.dart 23.3 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:collection';
import 'dart:math' as math;

8
import 'package:flutter/foundation.dart';
9 10 11
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

xster's avatar
xster committed
12
import 'theme.dart';
13

14
// Minimum padding from edges of the segmented control to edges of
15
// encompassing widget.
16
const EdgeInsetsGeometry _kHorizontalItemPadding = EdgeInsets.symmetric(horizontal: 16.0);
17 18 19 20

// Minimum height of the segmented control.
const double _kMinSegmentedControlHeight = 28.0;

21 22
// The duration of the fade animation used to transition when a new widget
// is selected.
23
const Duration _kFadeDuration = Duration(milliseconds: 165);
24

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
/// An iOS-style segmented control.
///
/// Displays the widgets provided in the [Map] of [children] in a
/// horizontal list. Used to select between a number of mutually exclusive
/// options. When one option in the segmented control is selected, the other
/// options in the segmented control cease to be selected.
///
/// A segmented control can feature any [Widget] as one of the values in its
/// [Map] of [children]. The type T is the type of the keys used
/// to identify each widget and determine which widget is selected. As
/// required by the [Map] class, keys must be of consistent types
/// and must be comparable. The ordering of the keys will determine the order
/// of the widgets in the segmented control.
///
/// When the state of the segmented control changes, the widget calls the
/// [onValueChanged] callback. The map key associated with the newly selected
/// widget is returned in the [onValueChanged] callback. Typically, widgets
/// that use a segmented control will listen for the [onValueChanged] callback
/// and rebuild the segmented control with a new [groupValue] to update which
/// option is currently selected.
///
/// The [children] will be displayed in the order of the keys in the [Map].
/// The height of the segmented control is determined by the height of the
/// tallest widget provided as a value in the [Map] of [children].
49 50 51 52 53
/// The width of each child in the segmented control will be equal to the width
/// of widest child, unless the combined width of the children is wider than
/// the available horizontal space. In this case, the available horizontal space
/// is divided by the number of provided [children] to determine the width of
/// each widget. The selection area for each of the widgets in the [Map] of
54 55 56
/// [children] will then be expanded to fill the calculated space, so each
/// widget will appear to have the same dimensions.
///
57 58
/// A segmented control may optionally be created with custom colors. The
/// [unselectedColor], [selectedColor], [borderColor], and [pressedColor]
xster's avatar
xster committed
59 60
/// arguments can be used to override the segmented control's colors from
/// [CupertinoTheme] defaults.
61
///
62 63 64 65 66 67 68 69 70
/// {@tool dartpad}
/// This example shows a [CupertinoSegmentedControl] with an enum type.
///
/// The callback provided to [onValueChanged] should update the state of
/// the parent [StatefulWidget] using the [State.setState] method, so that
/// the parent gets rebuilt; for example:
///
/// ** See code in examples/api/lib/cupertino/segmented_control/cupertino_segmented_control.0.dart **
/// {@end-tool}
71 72
/// See also:
///
Dan Field's avatar
Dan Field committed
73 74
///  * [CupertinoSegmentedControl], a segmented control widget in the style used
///    up until iOS 13.
75
///  * <https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/>
76
class CupertinoSegmentedControl<T extends Object> extends StatefulWidget {
77 78
  /// Creates an iOS-style segmented control bar.
  ///
79 80 81
  /// The [children] argument must be an ordered [Map] such as a
  /// [LinkedHashMap]. Further, the length of the [children] list must be
  /// greater than one.
82 83 84 85 86 87 88 89
  ///
  /// Each widget value in the map of [children] must have an associated key
  /// that uniquely identifies this widget. This key is what will be returned
  /// in the [onValueChanged] callback when a new value from the [children] map
  /// is selected.
  ///
  /// The [groupValue] is the currently selected value for the segmented control.
  /// If no [groupValue] is provided, or the [groupValue] is null, no widget will
90 91
  /// appear as selected. The [groupValue] must be either null or one of the keys
  /// in the [children] map.
92
  CupertinoSegmentedControl({
93
    super.key,
94 95
    required this.children,
    required this.onValueChanged,
96
    this.groupValue,
xster's avatar
xster committed
97 98 99 100
    this.unselectedColor,
    this.selectedColor,
    this.borderColor,
    this.pressedColor,
101
    this.padding,
102
  }) : assert(children.length >= 2),
103 104 105
       assert(
         groupValue == null || children.keys.any((T child) => child == groupValue),
         'The groupValue must be either null or one of the keys in the children map.',
106
       );
107 108 109 110 111 112 113 114 115 116 117 118

  /// The identifying keys and corresponding widget values in the
  /// segmented control.
  ///
  /// The map must have more than one entry.
  /// This attribute must be an ordered [Map] such as a [LinkedHashMap].
  final Map<T, Widget> children;

  /// The identifier of the widget that is currently selected.
  ///
  /// This must be one of the keys in the [Map] of [children].
  /// If this attribute is null, no widget will be initially selected.
119
  final T? groupValue;
120 121 122 123 124 125 126 127

  /// The callback that is called when a new option is tapped.
  ///
  /// The segmented control passes the newly selected widget's associated key
  /// to the callback but does not actually change state until the parent
  /// widget rebuilds the segmented control with the new [groupValue].
  final ValueChanged<T> onValueChanged;

128 129 130
  /// The color used to fill the backgrounds of unselected widgets and as the
  /// text color of the selected widget.
  ///
xster's avatar
xster committed
131
  /// Defaults to [CupertinoTheme]'s `primaryContrastingColor` if null.
132
  final Color? unselectedColor;
133 134 135 136

  /// The color used to fill the background of the selected widget and as the text
  /// color of unselected widgets.
  ///
xster's avatar
xster committed
137
  /// Defaults to [CupertinoTheme]'s `primaryColor` if null.
138
  final Color? selectedColor;
139 140 141

  /// The color used as the border around each widget.
  ///
xster's avatar
xster committed
142
  /// Defaults to [CupertinoTheme]'s `primaryColor` if null.
143
  final Color? borderColor;
144 145 146 147

  /// The color used to fill the background of the widget the user is
  /// temporarily interacting with through a long press or drag.
  ///
xster's avatar
xster committed
148
  /// Defaults to the selectedColor at 20% opacity if null.
149
  final Color? pressedColor;
150

151
  /// The CupertinoSegmentedControl will be placed inside this padding.
152 153
  ///
  /// Defaults to EdgeInsets.symmetric(horizontal: 16.0)
154
  final EdgeInsetsGeometry? padding;
155

156
  @override
157
  State<CupertinoSegmentedControl<T>> createState() => _SegmentedControlState<T>();
158 159
}

160
class _SegmentedControlState<T extends Object> extends State<CupertinoSegmentedControl<T>>
161
    with TickerProviderStateMixin<CupertinoSegmentedControl<T>> {
162
  T? _pressedKey;
163

164 165 166
  final List<AnimationController> _selectionControllers = <AnimationController>[];
  final List<ColorTween> _childTweens = <ColorTween>[];

167 168 169
  late ColorTween _forwardBackgroundColorTween;
  late ColorTween _reverseBackgroundColorTween;
  late ColorTween _textColorTween;
170

171 172 173 174
  Color? _selectedColor;
  Color? _unselectedColor;
  Color? _borderColor;
  Color? _pressedColor;
xster's avatar
xster committed
175 176 177 178 179 180

  AnimationController createAnimationController() {
    return AnimationController(
      duration: _kFadeDuration,
      vsync: this,
    )..addListener(() {
181 182
      setState(() {
        // State of background/text colors has changed
xster's avatar
xster committed
183
      });
184
    });
xster's avatar
xster committed
185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
  }

  bool _updateColors() {
    assert(mounted, 'This should only be called after didUpdateDependencies');
    bool changed = false;
    final Color selectedColor = widget.selectedColor ?? CupertinoTheme.of(context).primaryColor;
    if (_selectedColor != selectedColor) {
      changed = true;
      _selectedColor = selectedColor;
    }
    final Color unselectedColor = widget.unselectedColor ?? CupertinoTheme.of(context).primaryContrastingColor;
    if (_unselectedColor != unselectedColor) {
      changed = true;
      _unselectedColor = unselectedColor;
    }
    final Color borderColor = widget.borderColor ?? CupertinoTheme.of(context).primaryColor;
    if (_borderColor != borderColor) {
      changed = true;
      _borderColor = borderColor;
    }
    final Color pressedColor = widget.pressedColor ?? CupertinoTheme.of(context).primaryColor.withOpacity(0.2);
    if (_pressedColor != pressedColor) {
      changed = true;
      _pressedColor = pressedColor;
    }

211
    _forwardBackgroundColorTween = ColorTween(
xster's avatar
xster committed
212 213
      begin: _pressedColor,
      end: _selectedColor,
214
    );
215
    _reverseBackgroundColorTween = ColorTween(
xster's avatar
xster committed
216 217
      begin: _unselectedColor,
      end: _selectedColor,
218
    );
219
    _textColorTween = ColorTween(
xster's avatar
xster committed
220 221
      begin: _selectedColor,
      end: _unselectedColor,
222
    );
xster's avatar
xster committed
223 224 225 226 227
    return changed;
  }

  void _updateAnimationControllers() {
    assert(mounted, 'This should only be called after didUpdateDependencies');
228
    for (final AnimationController controller in _selectionControllers) {
xster's avatar
xster committed
229 230 231 232
      controller.dispose();
    }
    _selectionControllers.clear();
    _childTweens.clear();
233

234
    for (final T key in widget.children.keys) {
235 236
      final AnimationController animationController = createAnimationController();
      if (widget.groupValue == key) {
237
        _childTweens.add(_reverseBackgroundColorTween);
238 239
        animationController.value = 1.0;
      } else {
240
        _childTweens.add(_forwardBackgroundColorTween);
241 242 243
      }
      _selectionControllers.add(animationController);
    }
244 245
  }

xster's avatar
xster committed
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    if (_updateColors()) {
      _updateAnimationControllers();
    }
  }

  @override
  void didUpdateWidget(CupertinoSegmentedControl<T> oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (_updateColors() || oldWidget.children.length != widget.children.length) {
      _updateAnimationControllers();
    }

    if (oldWidget.groupValue != widget.groupValue) {
      int index = 0;
265
      for (final T key in widget.children.keys) {
xster's avatar
xster committed
266 267 268 269 270 271 272 273 274 275
        if (widget.groupValue == key) {
          _childTweens[index] = _forwardBackgroundColorTween;
          _selectionControllers[index].forward();
        } else {
          _childTweens[index] = _reverseBackgroundColorTween;
          _selectionControllers[index].reverse();
        }
        index += 1;
      }
    }
276 277 278 279
  }

  @override
  void dispose() {
280
    for (final AnimationController animationController in _selectionControllers) {
281 282 283 284 285
      animationController.dispose();
    }
    super.dispose();
  }

xster's avatar
xster committed
286

287 288 289 290 291 292
  void _onTapDown(T currentKey) {
    if (_pressedKey == null && currentKey != widget.groupValue) {
      setState(() {
        _pressedKey = currentKey;
      });
    }
293 294 295 296 297 298 299 300 301
  }

  void _onTapCancel() {
    setState(() {
      _pressedKey = null;
    });
  }

  void _onTap(T currentKey) {
302
    if (currentKey != _pressedKey) {
303
      return;
304
    }
305
    if (currentKey != widget.groupValue) {
306
      widget.onValueChanged(currentKey);
307
    }
308
    _pressedKey = null;
309 310
  }

311
  Color? getTextColor(int index, T currentKey) {
312
    if (_selectionControllers[index].isAnimating) {
313
      return _textColorTween.evaluate(_selectionControllers[index]);
314 315
    }
    if (widget.groupValue == currentKey) {
xster's avatar
xster committed
316
      return _unselectedColor;
317
    }
xster's avatar
xster committed
318
    return _selectedColor;
319 320
  }

321
  Color? getBackgroundColor(int index, T currentKey) {
322
    if (_selectionControllers[index].isAnimating) {
323
      return _childTweens[index].evaluate(_selectionControllers[index]);
324 325
    }
    if (widget.groupValue == currentKey) {
xster's avatar
xster committed
326
      return _selectedColor;
327 328
    }
    if (_pressedKey == currentKey) {
xster's avatar
xster committed
329
      return _pressedColor;
330
    }
xster's avatar
xster committed
331
    return _unselectedColor;
332 333 334 335
  }

  @override
  Widget build(BuildContext context) {
336 337
    final List<Widget> gestureChildren = <Widget>[];
    final List<Color> backgroundColors = <Color>[];
338
    int index = 0;
339 340
    int? selectedIndex;
    int? pressedIndex;
341
    for (final T currentKey in widget.children.keys) {
342 343 344
      selectedIndex = (widget.groupValue == currentKey) ? index : selectedIndex;
      pressedIndex = (_pressedKey == currentKey) ? index : pressedIndex;

345
      final TextStyle textStyle = DefaultTextStyle.of(context).style.copyWith(
346
        color: getTextColor(index, currentKey),
347
      );
348
      final IconThemeData iconTheme = IconThemeData(
349
        color: getTextColor(index, currentKey),
350 351
      );

352
      Widget child = Center(
353 354 355
        child: widget.children[currentKey],
      );

356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376
      child = MouseRegion(
        cursor: kIsWeb ? SystemMouseCursors.click : MouseCursor.defer,
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTapDown: (TapDownDetails event) {
            _onTapDown(currentKey);
          },
          onTapCancel: _onTapCancel,
          onTap: () {
            _onTap(currentKey);
          },
          child: IconTheme(
            data: iconTheme,
            child: DefaultTextStyle(
              style: textStyle,
              child: Semantics(
                button: true,
                inMutuallyExclusiveGroup: true,
                selected: widget.groupValue == currentKey,
                child: child,
              ),
377 378 379 380
            ),
          ),
        ),
      );
381

382 383
      backgroundColors.add(getBackgroundColor(index, currentKey)!);
      gestureChildren.add(child);
384 385 386
      index += 1;
    }

387
    final Widget box = _SegmentedControlRenderWidget<T>(
388 389
      selectedIndex: selectedIndex,
      pressedIndex: pressedIndex,
390
      backgroundColors: backgroundColors,
391
      borderColor: _borderColor!,
392
      children: gestureChildren,
393 394
    );

395
    return Padding(
396
      padding: widget.padding ?? _kHorizontalItemPadding,
397
      child: UnconstrainedBox(
398 399 400 401 402 403 404 405
        constrainedAxis: Axis.horizontal,
        child: box,
      ),
    );
  }
}

class _SegmentedControlRenderWidget<T> extends MultiChildRenderObjectWidget {
406
  const _SegmentedControlRenderWidget({
407 408
    super.key,
    super.children,
409 410 411 412
    required this.selectedIndex,
    required this.pressedIndex,
    required this.backgroundColors,
    required this.borderColor,
413
  });
414

415 416
  final int? selectedIndex;
  final int? pressedIndex;
417
  final List<Color> backgroundColors;
418
  final Color borderColor;
419 420 421

  @override
  RenderObject createRenderObject(BuildContext context) {
422
    return _RenderSegmentedControl<T>(
423
      textDirection: Directionality.of(context),
424 425
      selectedIndex: selectedIndex,
      pressedIndex: pressedIndex,
426
      backgroundColors: backgroundColors,
427
      borderColor: borderColor,
428 429 430 431 432 433
    );
  }

  @override
  void updateRenderObject(BuildContext context, _RenderSegmentedControl<T> renderObject) {
    renderObject
434
      ..textDirection = Directionality.of(context)
435
      ..selectedIndex = selectedIndex
436
      ..pressedIndex = pressedIndex
437 438
      ..backgroundColors = backgroundColors
      ..borderColor = borderColor;
439 440 441 442
  }
}

class _SegmentedControlContainerBoxParentData extends ContainerBoxParentData<RenderBox> {
443
  RRect? surroundingRect;
444 445
}

446
typedef _NextChild = RenderBox? Function(RenderBox child);
447 448 449 450 451

class _RenderSegmentedControl<T> extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, ContainerBoxParentData<RenderBox>>,
        RenderBoxContainerDefaultsMixin<RenderBox, ContainerBoxParentData<RenderBox>> {
  _RenderSegmentedControl({
452 453 454 455 456
    required int? selectedIndex,
    required int? pressedIndex,
    required TextDirection textDirection,
    required List<Color> backgroundColors,
    required Color borderColor,
457
  }) : _textDirection = textDirection,
458 459 460
       _selectedIndex = selectedIndex,
       _pressedIndex = pressedIndex,
       _backgroundColors = backgroundColors,
461
       _borderColor = borderColor;
462

463 464 465
  int? get selectedIndex => _selectedIndex;
  int? _selectedIndex;
  set selectedIndex(int? value) {
466 467 468 469 470 471 472
    if (_selectedIndex == value) {
      return;
    }
    _selectedIndex = value;
    markNeedsPaint();
  }

473 474 475
  int? get pressedIndex => _pressedIndex;
  int? _pressedIndex;
  set pressedIndex(int? value) {
476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492
    if (_pressedIndex == value) {
      return;
    }
    _pressedIndex = value;
    markNeedsPaint();
  }

  TextDirection get textDirection => _textDirection;
  TextDirection _textDirection;
  set textDirection(TextDirection value) {
    if (_textDirection == value) {
      return;
    }
    _textDirection = value;
    markNeedsLayout();
  }

493 494 495 496 497 498 499 500 501 502
  List<Color> get backgroundColors => _backgroundColors;
  List<Color> _backgroundColors;
  set backgroundColors(List<Color> value) {
    if (_backgroundColors == value) {
      return;
    }
    _backgroundColors = value;
    markNeedsPaint();
  }

503 504 505 506 507 508 509 510 511
  Color get borderColor => _borderColor;
  Color _borderColor;
  set borderColor(Color value) {
    if (_borderColor == value) {
      return;
    }
    _borderColor = value;
    markNeedsPaint();
  }
512 513 514

  @override
  double computeMinIntrinsicWidth(double height) {
515
    RenderBox? child = firstChild;
516 517
    double minWidth = 0.0;
    while (child != null) {
518
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
Ian Hickson's avatar
Ian Hickson committed
519
      final double childWidth = child.getMinIntrinsicWidth(height);
520 521 522 523 524 525 526 527
      minWidth = math.max(minWidth, childWidth);
      child = childParentData.nextSibling;
    }
    return minWidth * childCount;
  }

  @override
  double computeMaxIntrinsicWidth(double height) {
528
    RenderBox? child = firstChild;
529 530
    double maxWidth = 0.0;
    while (child != null) {
531
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
Ian Hickson's avatar
Ian Hickson committed
532
      final double childWidth = child.getMaxIntrinsicWidth(height);
533 534 535 536 537 538 539 540
      maxWidth = math.max(maxWidth, childWidth);
      child = childParentData.nextSibling;
    }
    return maxWidth * childCount;
  }

  @override
  double computeMinIntrinsicHeight(double width) {
541
    RenderBox? child = firstChild;
542 543
    double minHeight = 0.0;
    while (child != null) {
544
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
Ian Hickson's avatar
Ian Hickson committed
545
      final double childHeight = child.getMinIntrinsicHeight(width);
546 547 548 549 550 551 552 553
      minHeight = math.max(minHeight, childHeight);
      child = childParentData.nextSibling;
    }
    return minHeight;
  }

  @override
  double computeMaxIntrinsicHeight(double width) {
554
    RenderBox? child = firstChild;
555 556
    double maxHeight = 0.0;
    while (child != null) {
557
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
Ian Hickson's avatar
Ian Hickson committed
558
      final double childHeight = child.getMaxIntrinsicHeight(width);
559 560 561 562 563 564 565
      maxHeight = math.max(maxHeight, childHeight);
      child = childParentData.nextSibling;
    }
    return maxHeight;
  }

  @override
566
  double? computeDistanceToActualBaseline(TextBaseline baseline) {
567 568 569 570 571 572
    return defaultComputeDistanceToHighestActualBaseline(baseline);
  }

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! _SegmentedControlContainerBoxParentData) {
573
      child.parentData = _SegmentedControlContainerBoxParentData();
574 575 576
    }
  }

577 578
  void _layoutRects(_NextChild nextChild, RenderBox? leftChild, RenderBox? rightChild) {
    RenderBox? child = leftChild;
579 580
    double start = 0.0;
    while (child != null) {
581
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
582
      final Offset childOffset = Offset(start, 0.0);
583
      childParentData.offset = childOffset;
584
      final Rect childRect = Rect.fromLTWH(start, 0.0, child.size.width, child.size.height);
585
      final RRect rChildRect;
586
      if (child == leftChild) {
587 588 589 590 591
        rChildRect = RRect.fromRectAndCorners(
          childRect,
          topLeft: const Radius.circular(3.0),
          bottomLeft: const Radius.circular(3.0),
        );
592
      } else if (child == rightChild) {
593 594 595 596 597
        rChildRect = RRect.fromRectAndCorners(
          childRect,
          topRight: const Radius.circular(3.0),
          bottomRight: const Radius.circular(3.0),
        );
598
      } else {
599
        rChildRect = RRect.fromRectAndCorners(childRect);
600 601 602 603 604 605 606
      }
      childParentData.surroundingRect = rChildRect;
      start += child.size.width;
      child = nextChild(child);
    }
  }

607
  Size _calculateChildSize(BoxConstraints constraints) {
608
    double maxHeight = _kMinSegmentedControlHeight;
609
    double childWidth = constraints.minWidth / childCount;
610 611
    RenderBox? child = firstChild;
    while (child != null) {
612
      childWidth = math.max(childWidth, child.getMaxIntrinsicWidth(double.infinity));
613
      child = childAfter(child);
614
    }
615
    childWidth = math.min(childWidth, constraints.maxWidth / childCount);
616
    child = firstChild;
617 618 619 620 621
    while (child != null) {
      final double boxHeight = child.getMaxIntrinsicHeight(childWidth);
      maxHeight = math.max(maxHeight, boxHeight);
      child = childAfter(child);
    }
622 623
    return Size(childWidth, maxHeight);
  }
624

625 626 627 628 629 630 631 632 633 634 635 636 637 638
  Size _computeOverallSizeFromChildSize(Size childSize) {
    return constraints.constrain(Size(childSize.width * childCount, childSize.height));
  }

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    final Size childSize = _calculateChildSize(constraints);
    return _computeOverallSizeFromChildSize(childSize);
  }

  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;
    final Size childSize = _calculateChildSize(constraints);
639

640
    final BoxConstraints childConstraints = BoxConstraints.tightFor(
641 642
      width: childSize.width,
      height: childSize.height,
643 644
    );

645
    RenderBox? child = firstChild;
646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665
    while (child != null) {
      child.layout(childConstraints, parentUsesSize: true);
      child = childAfter(child);
    }

    switch (textDirection) {
      case TextDirection.rtl:
        _layoutRects(
          childBefore,
          lastChild,
          firstChild,
        );
      case TextDirection.ltr:
        _layoutRects(
          childAfter,
          firstChild,
          lastChild,
        );
    }

666
    size = _computeOverallSizeFromChildSize(childSize);
667 668 669 670
  }

  @override
  void paint(PaintingContext context, Offset offset) {
671
    RenderBox? child = firstChild;
672 673 674 675 676 677 678 679 680 681
    int index = 0;
    while (child != null) {
      _paintChild(context, offset, child, index);
      child = childAfter(child);
      index += 1;
    }
  }

  void _paintChild(PaintingContext context, Offset offset, RenderBox child, int childIndex) {

682
    final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
683 684

    context.canvas.drawRRect(
685
      childParentData.surroundingRect!.shift(offset),
686
      Paint()
687
        ..color = backgroundColors[childIndex]
688 689 690
        ..style = PaintingStyle.fill,
    );
    context.canvas.drawRRect(
691
      childParentData.surroundingRect!.shift(offset),
692
      Paint()
693 694 695
        ..color = borderColor
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke,
696 697 698 699 700 701
    );

    context.paintChild(child, childParentData.offset + offset);
  }

  @override
702 703
  bool hitTestChildren(BoxHitTestResult result, { required Offset position }) {
    RenderBox? child = lastChild;
704
    while (child != null) {
705
      final _SegmentedControlContainerBoxParentData childParentData = child.parentData! as _SegmentedControlContainerBoxParentData;
706
      if (childParentData.surroundingRect!.contains(position)) {
707 708 709 710 711
        return result.addWithPaintOffset(
          offset: childParentData.offset,
          position: position,
          hitTest: (BoxHitTestResult result, Offset localOffset) {
            assert(localOffset == position - childParentData.offset);
712
            return child!.hitTest(result, position: localOffset);
713 714
          },
        );
715 716 717 718
      }
      child = childParentData.previousSibling;
    }
    return false;
719 720
  }
}