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

import 'dart:math' as math;
6
import 'dart:ui' show Path, lerpDouble;
7 8 9 10 11

import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

12
import 'colors.dart';
13
import 'material_state.dart';
14 15
import 'theme.dart';

16 17 18 19 20 21 22 23 24 25 26 27
/// Applies a slider theme to descendant [Slider] widgets.
///
/// A slider theme describes the colors and shape choices of the slider
/// components.
///
/// Descendant widgets obtain the current theme's [SliderThemeData] object using
/// [SliderTheme.of]. When a widget uses [SliderTheme.of], it is automatically
/// rebuilt if the theme later changes.
///
/// The slider is as big as the largest of
/// the [SliderComponentShape.getPreferredSize] of the thumb shape,
/// the [SliderComponentShape.getPreferredSize] of the overlay shape,
28
/// and the [SliderTickMarkShape.getPreferredSize] of the tick mark shape.
29 30 31 32 33
///
/// See also:
///
///  * [SliderThemeData], which describes the actual configuration of a slider
///    theme.
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
///  * [SliderTickMarkShape], which can be used to create custom shapes for the
///    [Slider]'s tick marks.
///  * [RangeSliderThumbShape], which can be used to create custom shapes for
///    the [RangeSlider]'s thumb.
///  * [RangeSliderValueIndicatorShape], which can be used to create custom
///    shapes for the [RangeSlider]'s value indicator.
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
///  * [RangeSliderTickMarkShape], which can be used to create custom shapes for
///    the [RangeSlider]'s tick marks.
49
class SliderTheme extends InheritedTheme {
50 51 52 53
  /// Applies the given theme [data] to [child].
  ///
  /// The [data] and [child] arguments must not be null.
  const SliderTheme({
54
    super.key,
55
    required this.data,
56
    required super.child,
57
  }) : assert(child != null),
58
       assert(data != null);
59 60 61 62 63 64 65 66 67 68

  /// Specifies the color and shape values for descendant slider widgets.
  final SliderThemeData data;

  /// Returns the data from the closest [SliderTheme] instance that encloses
  /// the given context.
  ///
  /// Defaults to the ambient [ThemeData.sliderTheme] if there is no
  /// [SliderTheme] in the given build context.
  ///
69
  /// {@tool snippet}
70 71
  ///
  /// ```dart
72
  /// class Launch extends StatefulWidget {
73
  ///   const Launch({super.key});
74
  ///
75
  ///   @override
76
  ///   State createState() => LaunchState();
77
  /// }
78
  ///
79
  /// class LaunchState extends State<Launch> {
80
  ///   double _rocketThrust = 0;
81
  ///
82 83
  ///   @override
  ///   Widget build(BuildContext context) {
84
  ///     return SliderTheme(
85
  ///       data: SliderTheme.of(context).copyWith(activeTrackColor: const Color(0xff804040)),
86
  ///       child: Slider(
87 88 89 90 91
  ///         onChanged: (double value) { setState(() { _rocketThrust = value; }); },
  ///         value: _rocketThrust,
  ///       ),
  ///     );
  ///   }
92 93
  /// }
  /// ```
94
  /// {@end-tool}
95 96 97 98 99 100
  ///
  /// See also:
  ///
  ///  * [SliderThemeData], which describes the actual configuration of a slider
  ///    theme.
  static SliderThemeData of(BuildContext context) {
101
    final SliderTheme? inheritedTheme = context.dependOnInheritedWidgetOfExactType<SliderTheme>();
102
    return inheritedTheme != null ? inheritedTheme.data : Theme.of(context).sliderTheme;
103 104
  }

105 106
  @override
  Widget wrap(BuildContext context, Widget child) {
107
    return SliderTheme(data: data, child: child);
108 109
  }

110
  @override
111
  bool updateShouldNotify(SliderTheme oldWidget) => data != oldWidget.data;
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
}

/// Describes the conditions under which the value indicator on a [Slider]
/// will be shown. Used with [SliderThemeData.showValueIndicator].
///
/// See also:
///
///  * [Slider], a Material Design slider widget.
///  * [SliderThemeData], which describes the actual configuration of a slider
///    theme.
enum ShowValueIndicator {
  /// The value indicator will only be shown for discrete sliders (sliders
  /// where [Slider.divisions] is non-null).
  onlyForDiscrete,

  /// The value indicator will only be shown for continuous sliders (sliders
  /// where [Slider.divisions] is null).
  onlyForContinuous,

  /// The value indicator will be shown for all types of sliders.
  always,

  /// The value indicator will never be shown.
  never,
}

138 139 140 141 142 143 144 145 146 147 148 149 150 151 152
/// Identifier for a thumb.
///
/// There are 2 thumbs in a [RangeSlider], [start] and [end].
///
/// For [TextDirection.ltr], the [start] thumb is the left-most thumb and the
/// [end] thumb is the right-most thumb. For [TextDirection.rtl] the [start]
/// thumb is the right-most thumb, and the [end] thumb is the left-most thumb.
enum Thumb {
  /// Left-most thumb for [TextDirection.ltr], otherwise, right-most thumb.
  start,

  /// Right-most thumb for [TextDirection.ltr], otherwise, left-most thumb.
  end,
}

153
/// Holds the color, shape, and typography values for a Material Design slider
154 155 156 157 158 159 160
/// theme.
///
/// Use this class to configure a [SliderTheme] widget, or to set the
/// [ThemeData.sliderTheme] for a [Theme] widget.
///
/// To obtain the current ambient slider theme, use [SliderTheme.of].
///
161 162 163 164 165 166 167 168
/// This theme is for both the [Slider] and the [RangeSlider]. The properties
/// that are only for the [Slider] are: [tickMarkShape], [thumbShape],
/// [trackShape], and [valueIndicatorShape]. The properties that are only for
/// the [RangeSlider] are [rangeTickMarkShape], [rangeThumbShape],
/// [rangeTrackShape], [rangeValueIndicatorShape],
/// [overlappingShapeStrokeColor], [minThumbSeparation], and [thumbSelector].
/// All other properties are used by both the [Slider] and the [RangeSlider].
///
169 170 171 172
/// The parts of a slider are:
///
///  * The "thumb", which is a shape that slides horizontally when the user
///    drags it.
173
///  * The "track", which is the line that the slider thumb slides along.
174 175 176 177 178 179 180 181
///  * The "tick marks", which are regularly spaced marks that are drawn when
///    using discrete divisions.
///  * The "value indicator", which appears when the user is dragging the thumb
///    to indicate the value being selected.
///  * The "overlay", which appears around the thumb, and is shown when the
///    thumb is pressed, focused, or hovered. It is painted underneath the
///    thumb, so it must extend beyond the bounds of the thumb itself to
///    actually be visible.
182 183 184 185 186 187 188
///  * The "active" side of the slider is the side between the thumb and the
///    minimum value.
///  * The "inactive" side of the slider is the side between the thumb and the
///    maximum value.
///  * The [Slider] is disabled when it is not accepting user input. See
///    [Slider] for details on when this happens.
///
189 190 191 192
/// The thumb, track, tick marks, value indicator, and overlay can be customized
/// by creating subclasses of [SliderTrackShape],
/// [SliderComponentShape], and/or [SliderTickMarkShape]. See
/// [RoundSliderThumbShape], [RectangularSliderTrackShape],
193
/// [RoundSliderTickMarkShape], [RectangularSliderValueIndicatorShape], and
194
/// [RoundSliderOverlayShape] for examples.
195
///
196 197 198 199 200 201 202 203 204 205
/// The track painting can be skipped by specifying 0 for [trackHeight].
/// The thumb painting can be skipped by specifying
/// [SliderComponentShape.noThumb] for [SliderThemeData.thumbShape].
/// The overlay painting can be skipped by specifying
/// [SliderComponentShape.noOverlay] for [SliderThemeData.overlayShape].
/// The tick mark painting can be skipped by specifying
/// [SliderTickMarkShape.noTickMark] for [SliderThemeData.tickMarkShape].
/// The value indicator painting can be skipped by specifying the
/// appropriate [ShowValueIndicator] for [SliderThemeData.showValueIndicator].
///
206 207 208 209 210 211 212
/// See also:
///
///  * [SliderTheme] widget, which can override the slider theme of its
///    children.
///  * [Theme] widget, which performs a similar function to [SliderTheme],
///    but for overall themes.
///  * [ThemeData], which has a default [SliderThemeData].
213 214 215 216 217 218 219 220 221 222 223 224 225 226 227
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
///  * [SliderTickMarkShape], which can be used to create custom shapes for the
///    [Slider]'s tick marks.
///  * [RangeSliderThumbShape], which can be used to create custom shapes for
///    the [RangeSlider]'s thumb.
///  * [RangeSliderValueIndicatorShape], which can be used to create custom
///    shapes for the [RangeSlider]'s value indicator.
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
///  * [RangeSliderTickMarkShape], which can be used to create custom shapes for
///    the [RangeSlider]'s tick marks.
228
@immutable
229
class SliderThemeData with Diagnosticable {
230
  /// Create a [SliderThemeData] given a set of exact values.
231 232 233 234 235 236
  ///
  /// This will rarely be used directly. It is used by [lerp] to
  /// create intermediate themes based on two themes.
  ///
  /// The simplest way to create a SliderThemeData is to use
  /// [copyWith] on the one you get from [SliderTheme.of], or create an
237 238
  /// entirely new one with [SliderThemeData.fromPrimaryColors].
  ///
239
  /// {@tool snippet}
240 241 242
  ///
  /// ```dart
  /// class Blissful extends StatefulWidget {
243
  ///   const Blissful({super.key});
244
  ///
245
  ///   @override
246
  ///   State createState() => BlissfulState();
247 248 249
  /// }
  ///
  /// class BlissfulState extends State<Blissful> {
250
  ///   double _bliss = 0;
251 252 253
  ///
  ///   @override
  ///   Widget build(BuildContext context) {
254
  ///     return SliderTheme(
255
  ///       data: SliderTheme.of(context).copyWith(activeTrackColor: const Color(0xff404080)),
256
  ///       child: Slider(
257 258 259 260 261 262 263
  ///         onChanged: (double value) { setState(() { _bliss = value; }); },
  ///         value: _bliss,
  ///       ),
  ///     );
  ///   }
  /// }
  /// ```
264
  /// {@end-tool}
265
  const SliderThemeData({
266 267 268 269 270 271 272 273 274 275
    this.trackHeight,
    this.activeTrackColor,
    this.inactiveTrackColor,
    this.disabledActiveTrackColor,
    this.disabledInactiveTrackColor,
    this.activeTickMarkColor,
    this.inactiveTickMarkColor,
    this.disabledActiveTickMarkColor,
    this.disabledInactiveTickMarkColor,
    this.thumbColor,
276
    this.overlappingShapeStrokeColor,
277 278 279
    this.disabledThumbColor,
    this.overlayColor,
    this.valueIndicatorColor,
280
    this.overlayShape,
281 282
    this.tickMarkShape,
    this.thumbShape,
283
    this.trackShape,
284
    this.valueIndicatorShape,
285 286 287 288
    this.rangeTickMarkShape,
    this.rangeThumbShape,
    this.rangeTrackShape,
    this.rangeValueIndicatorShape,
289 290
    this.showValueIndicator,
    this.valueIndicatorTextStyle,
291 292
    this.minThumbSeparation,
    this.thumbSelector,
293
    this.mouseCursor,
294
  });
295 296 297 298 299 300 301 302 303 304

  /// Generates a SliderThemeData from three main colors.
  ///
  /// Usually these are the primary, dark and light colors from
  /// a [ThemeData].
  ///
  /// The opacities of these colors will be overridden with the Material Design
  /// defaults when assigning them to the slider theme component colors.
  ///
  /// This is used to generate the default slider theme for a [ThemeData].
305
  factory SliderThemeData.fromPrimaryColors({
306 307 308 309
    required Color primaryColor,
    required Color primaryColorDark,
    required Color primaryColorLight,
    required TextStyle valueIndicatorTextStyle,
310 311 312 313
  }) {
    assert(primaryColor != null);
    assert(primaryColorDark != null);
    assert(primaryColorLight != null);
314
    assert(valueIndicatorTextStyle != null);
315 316 317

    // These are Material Design defaults, and are used to derive
    // component Colors (with opacity) from base colors.
318 319 320 321
    const int activeTrackAlpha = 0xff;
    const int inactiveTrackAlpha = 0x3d; // 24% opacity
    const int disabledActiveTrackAlpha = 0x52; // 32% opacity
    const int disabledInactiveTrackAlpha = 0x1f; // 12% opacity
322 323 324 325 326 327
    const int activeTickMarkAlpha = 0x8a; // 54% opacity
    const int inactiveTickMarkAlpha = 0x8a; // 54% opacity
    const int disabledActiveTickMarkAlpha = 0x1f; // 12% opacity
    const int disabledInactiveTickMarkAlpha = 0x1f; // 12% opacity
    const int thumbAlpha = 0xff;
    const int disabledThumbAlpha = 0x52; // 32% opacity
328
    const int overlayAlpha = 0x1f; // 12% opacity
329 330
    const int valueIndicatorAlpha = 0xff;

331
    return SliderThemeData(
332
      trackHeight: 2.0,
333 334 335 336
      activeTrackColor: primaryColor.withAlpha(activeTrackAlpha),
      inactiveTrackColor: primaryColor.withAlpha(inactiveTrackAlpha),
      disabledActiveTrackColor: primaryColorDark.withAlpha(disabledActiveTrackAlpha),
      disabledInactiveTrackColor: primaryColorDark.withAlpha(disabledInactiveTrackAlpha),
337 338 339 340 341
      activeTickMarkColor: primaryColorLight.withAlpha(activeTickMarkAlpha),
      inactiveTickMarkColor: primaryColor.withAlpha(inactiveTickMarkAlpha),
      disabledActiveTickMarkColor: primaryColorLight.withAlpha(disabledActiveTickMarkAlpha),
      disabledInactiveTickMarkColor: primaryColorDark.withAlpha(disabledInactiveTickMarkAlpha),
      thumbColor: primaryColor.withAlpha(thumbAlpha),
342
      overlappingShapeStrokeColor: Colors.white,
343
      disabledThumbColor: primaryColorDark.withAlpha(disabledThumbAlpha),
344
      overlayColor: primaryColor.withAlpha(overlayAlpha),
345
      valueIndicatorColor: primaryColor.withAlpha(valueIndicatorAlpha),
346
      overlayShape: const RoundSliderOverlayShape(),
347
      tickMarkShape: const RoundSliderTickMarkShape(),
348
      thumbShape: const RoundSliderThumbShape(),
349
      trackShape: const RoundedRectSliderTrackShape(),
350
      valueIndicatorShape: const PaddleSliderValueIndicatorShape(),
351 352 353 354
      rangeTickMarkShape: const RoundRangeSliderTickMarkShape(),
      rangeThumbShape: const RoundRangeSliderThumbShape(),
      rangeTrackShape: const RoundedRectRangeSliderTrackShape(),
      rangeValueIndicatorShape: const PaddleRangeSliderValueIndicatorShape(),
355
      valueIndicatorTextStyle: valueIndicatorTextStyle,
356 357 358 359
      showValueIndicator: ShowValueIndicator.onlyForDiscrete,
    );
  }

360
  /// The height of the [Slider] track.
361
  final double? trackHeight;
362

363
  /// The color of the [Slider] track between the [Slider.min] position and the
364
  /// current thumb position.
365
  final Color? activeTrackColor;
366

367
  /// The color of the [Slider] track between the current thumb position and the
368
  /// [Slider.max] position.
369
  final Color? inactiveTrackColor;
370

371
  /// The color of the [Slider] track between the [Slider.min] position and the
372
  /// current thumb position when the [Slider] is disabled.
373
  final Color? disabledActiveTrackColor;
374

375
  /// The color of the [Slider] track between the current thumb position and the
376
  /// [Slider.max] position when the [Slider] is disabled.
377
  final Color? disabledInactiveTrackColor;
378

379
  /// The color of the track's tick marks that are drawn between the [Slider.min]
380
  /// position and the current thumb position.
381
  final Color? activeTickMarkColor;
382

383
  /// The color of the track's tick marks that are drawn between the current
384
  /// thumb position and the [Slider.max] position.
385
  final Color? inactiveTickMarkColor;
386

387
  /// The color of the track's tick marks that are drawn between the [Slider.min]
388
  /// position and the current thumb position when the [Slider] is disabled.
389
  final Color? disabledActiveTickMarkColor;
390

391
  /// The color of the track's tick marks that are drawn between the current
392 393
  /// thumb position and the [Slider.max] position when the [Slider] is
  /// disabled.
394
  final Color? disabledInactiveTickMarkColor;
395 396

  /// The color given to the [thumbShape] to draw itself with.
397
  final Color? thumbColor;
398

399 400 401
  /// The color given to the perimeter of the top [rangeThumbShape] when the
  /// thumbs are overlapping and the top [rangeValueIndicatorShape] when the
  /// value indicators are overlapping.
402
  final Color? overlappingShapeStrokeColor;
403

404 405
  /// The color given to the [thumbShape] to draw itself with when the
  /// [Slider] is disabled.
406
  final Color? disabledThumbColor;
407

408 409
  /// The color of the overlay drawn around the slider thumb when it is
  /// pressed, focused, or hovered.
410 411
  ///
  /// This is typically a semi-transparent color.
412
  final Color? overlayColor;
413 414

  /// The color given to the [valueIndicatorShape] to draw itself with.
415
  final Color? valueIndicatorColor;
416

417

418
  /// The shape that will be used to draw the [Slider]'s overlay.
419
  ///
420 421
  /// Both the [overlayColor] and a non default [overlayShape] may be specified.
  /// The default [overlayShape] refers to the [overlayColor].
422
  ///
423
  /// The default value is [RoundSliderOverlayShape].
424
  final SliderComponentShape? overlayShape;
425 426 427 428 429 430 431 432 433

  /// The shape that will be used to draw the [Slider]'s tick marks.
  ///
  /// The [SliderTickMarkShape.getPreferredSize] is used to help determine the
  /// location of each tick mark on the track. The slider's minimum size will
  /// be at least this big.
  ///
  /// The default value is [RoundSliderTickMarkShape].
  ///
434
  /// See also:
435
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
436
  ///  * [RoundRangeSliderTickMarkShape], which is the default tick mark
437
  ///    shape for the range slider.
438
  final SliderTickMarkShape? tickMarkShape;
439 440

  /// The shape that will be used to draw the [Slider]'s thumb.
441 442 443 444 445
  ///
  /// The default value is [RoundSliderThumbShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
446
  ///  * [RoundRangeSliderThumbShape], which is the default thumb shape for
447
  ///    the [RangeSlider].
448
  final SliderComponentShape? thumbShape;
449

450 451 452 453 454 455 456 457 458 459 460
  /// The shape that will be used to draw the [Slider]'s track.
  ///
  /// The [SliderTrackShape.getPreferredRect] method is used to map
  /// slider-relative gesture coordinates to the correct thumb position on the
  /// track. It is also used to horizontally position tick marks, when the
  /// slider is discrete.
  ///
  /// The default value is [RoundedRectSliderTrackShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
461
  ///  * [RoundedRectRangeSliderTrackShape], which is the default track
462
  ///    shape for the [RangeSlider].
463
  final SliderTrackShape? trackShape;
464

465
  /// The shape that will be used to draw the [Slider]'s value
466
  /// indicator.
467 468 469 470 471
  ///
  /// The default value is [PaddleSliderValueIndicatorShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
472
  ///  * [PaddleRangeSliderValueIndicatorShape], which is the default value
473
  ///    indicator shape for the [RangeSlider].
474
  final SliderComponentShape? valueIndicatorShape;
475

476 477 478 479 480 481 482 483 484 485
  /// The shape that will be used to draw the [RangeSlider]'s tick marks.
  ///
  /// The [RangeSliderTickMarkShape.getPreferredSize] is used to help determine
  /// the location of each tick mark on the track. The slider's minimum size
  /// will be at least this big.
  ///
  /// The default value is [RoundRangeSliderTickMarkShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
486
  ///  * [RoundSliderTickMarkShape], which is the default tick mark shape
487
  ///    for the [Slider].
488
  final RangeSliderTickMarkShape? rangeTickMarkShape;
489 490 491 492 493 494 495 496 497 498 499

  /// The shape that will be used for the [RangeSlider]'s thumbs.
  ///
  /// By default the same shape is used for both thumbs, but strokes the top
  /// thumb when it overlaps the bottom thumb. The top thumb is always the last
  /// selected thumb.
  ///
  /// The default value is [RoundRangeSliderThumbShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
500
  ///  * [RoundSliderThumbShape], which is the default thumb shape for the
501
  ///    [Slider].
502
  final RangeSliderThumbShape? rangeThumbShape;
503 504 505

  /// The shape that will be used to draw the [RangeSlider]'s track.
  ///
506
  /// The [SliderTrackShape.getPreferredRect] method is used to map
507 508 509 510 511 512 513 514
  /// slider-relative gesture coordinates to the correct thumb position on the
  /// track. It is also used to horizontally position the tick marks, when the
  /// slider is discrete.
  ///
  /// The default value is [RoundedRectRangeSliderTrackShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
515
  ///  * [RoundedRectSliderTrackShape], which is the default track
516
  ///    shape for the [Slider].
517
  final RangeSliderTrackShape? rangeTrackShape;
518 519 520 521 522 523 524 525 526 527 528 529

  /// The shape that will be used for the [RangeSlider]'s value indicators.
  ///
  /// The default shape uses the same value indicator for each thumb, but
  /// strokes the top value indicator when it overlaps the bottom value
  /// indicator. The top indicator corresponds to the top thumb, which is always
  /// the most recently selected thumb.
  ///
  /// The default value is [PaddleRangeSliderValueIndicatorShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
530
  ///  * [PaddleSliderValueIndicatorShape], which is the default value
531
  ///    indicator shape for the [Slider].
532
  final RangeSliderValueIndicatorShape? rangeValueIndicatorShape;
533

534 535
  /// Whether the value indicator should be shown for different types of
  /// sliders.
536 537 538 539
  ///
  /// By default, [showValueIndicator] is set to
  /// [ShowValueIndicator.onlyForDiscrete]. The value indicator is only shown
  /// when the thumb is being touched.
540
  final ShowValueIndicator? showValueIndicator;
541

542
  /// The text style for the text on the value indicator.
543
  final TextStyle? valueIndicatorTextStyle;
544

545 546 547 548 549
  /// Limits the thumb's separation distance.
  ///
  /// Use this only if you want to control the visual appearance of the thumbs
  /// in terms of a logical pixel value. This can be done when you want a
  /// specific look for thumbs when they are close together. To limit with the
550
  /// real values, rather than logical pixels, the values can be restricted by
551
  /// the parent.
552
  final double? minThumbSeparation;
553 554 555 556 557 558 559 560 561 562

  /// Determines which thumb should be selected when the slider is interacted
  /// with.
  ///
  /// If null, the default thumb selector finds the closest thumb, excluding
  /// taps that are between the thumbs and not within any one touch target.
  /// When the selection is within the touch target bounds of both thumbs, no
  /// thumb is selected until the selection is moved.
  ///
  /// Override this for custom thumb selection.
563
  final RangeThumbSelector? thumbSelector;
564

565 566 567 568 569
  /// {@macro flutter.material.slider.mouseCursor}
  ///
  /// If specified, overrides the default value of [Slider.mouseCursor].
  final MaterialStateProperty<MouseCursor?>? mouseCursor;

570 571
  /// Creates a copy of this object but with the given fields replaced with the
  /// new values.
572
  SliderThemeData copyWith({
573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599
    double? trackHeight,
    Color? activeTrackColor,
    Color? inactiveTrackColor,
    Color? disabledActiveTrackColor,
    Color? disabledInactiveTrackColor,
    Color? activeTickMarkColor,
    Color? inactiveTickMarkColor,
    Color? disabledActiveTickMarkColor,
    Color? disabledInactiveTickMarkColor,
    Color? thumbColor,
    Color? overlappingShapeStrokeColor,
    Color? disabledThumbColor,
    Color? overlayColor,
    Color? valueIndicatorColor,
    SliderComponentShape? overlayShape,
    SliderTickMarkShape? tickMarkShape,
    SliderComponentShape? thumbShape,
    SliderTrackShape? trackShape,
    SliderComponentShape? valueIndicatorShape,
    RangeSliderTickMarkShape? rangeTickMarkShape,
    RangeSliderThumbShape? rangeThumbShape,
    RangeSliderTrackShape? rangeTrackShape,
    RangeSliderValueIndicatorShape? rangeValueIndicatorShape,
    ShowValueIndicator? showValueIndicator,
    TextStyle? valueIndicatorTextStyle,
    double? minThumbSeparation,
    RangeThumbSelector? thumbSelector,
600
    MaterialStateProperty<MouseCursor?>? mouseCursor,
601
  }) {
602
    return SliderThemeData(
603
      trackHeight: trackHeight ?? this.trackHeight,
604 605 606 607
      activeTrackColor: activeTrackColor ?? this.activeTrackColor,
      inactiveTrackColor: inactiveTrackColor ?? this.inactiveTrackColor,
      disabledActiveTrackColor: disabledActiveTrackColor ?? this.disabledActiveTrackColor,
      disabledInactiveTrackColor: disabledInactiveTrackColor ?? this.disabledInactiveTrackColor,
608 609 610
      activeTickMarkColor: activeTickMarkColor ?? this.activeTickMarkColor,
      inactiveTickMarkColor: inactiveTickMarkColor ?? this.inactiveTickMarkColor,
      disabledActiveTickMarkColor: disabledActiveTickMarkColor ?? this.disabledActiveTickMarkColor,
611
      disabledInactiveTickMarkColor: disabledInactiveTickMarkColor ?? this.disabledInactiveTickMarkColor,
612
      thumbColor: thumbColor ?? this.thumbColor,
613
      overlappingShapeStrokeColor: overlappingShapeStrokeColor ?? this.overlappingShapeStrokeColor,
614 615 616
      disabledThumbColor: disabledThumbColor ?? this.disabledThumbColor,
      overlayColor: overlayColor ?? this.overlayColor,
      valueIndicatorColor: valueIndicatorColor ?? this.valueIndicatorColor,
617
      overlayShape: overlayShape ?? this.overlayShape,
618
      tickMarkShape: tickMarkShape ?? this.tickMarkShape,
619
      thumbShape: thumbShape ?? this.thumbShape,
620
      trackShape: trackShape ?? this.trackShape,
621
      valueIndicatorShape: valueIndicatorShape ?? this.valueIndicatorShape,
622 623 624 625
      rangeTickMarkShape: rangeTickMarkShape ?? this.rangeTickMarkShape,
      rangeThumbShape: rangeThumbShape ?? this.rangeThumbShape,
      rangeTrackShape: rangeTrackShape ?? this.rangeTrackShape,
      rangeValueIndicatorShape: rangeValueIndicatorShape ?? this.rangeValueIndicatorShape,
626
      showValueIndicator: showValueIndicator ?? this.showValueIndicator,
627
      valueIndicatorTextStyle: valueIndicatorTextStyle ?? this.valueIndicatorTextStyle,
628 629
      minThumbSeparation: minThumbSeparation ?? this.minThumbSeparation,
      thumbSelector: thumbSelector ?? this.thumbSelector,
630
      mouseCursor: mouseCursor ?? this.mouseCursor,
631 632 633 634 635 636 637
    );
  }

  /// Linearly interpolate between two slider themes.
  ///
  /// The arguments must not be null.
  ///
638
  /// {@macro dart.ui.shadow.lerp}
639 640 641 642
  static SliderThemeData lerp(SliderThemeData a, SliderThemeData b, double t) {
    assert(a != null);
    assert(b != null);
    assert(t != null);
643
    return SliderThemeData(
644
      trackHeight: lerpDouble(a.trackHeight, b.trackHeight, t),
645 646 647 648
      activeTrackColor: Color.lerp(a.activeTrackColor, b.activeTrackColor, t),
      inactiveTrackColor: Color.lerp(a.inactiveTrackColor, b.inactiveTrackColor, t),
      disabledActiveTrackColor: Color.lerp(a.disabledActiveTrackColor, b.disabledActiveTrackColor, t),
      disabledInactiveTrackColor: Color.lerp(a.disabledInactiveTrackColor, b.disabledInactiveTrackColor, t),
649 650
      activeTickMarkColor: Color.lerp(a.activeTickMarkColor, b.activeTickMarkColor, t),
      inactiveTickMarkColor: Color.lerp(a.inactiveTickMarkColor, b.inactiveTickMarkColor, t),
651 652
      disabledActiveTickMarkColor: Color.lerp(a.disabledActiveTickMarkColor, b.disabledActiveTickMarkColor, t),
      disabledInactiveTickMarkColor: Color.lerp(a.disabledInactiveTickMarkColor, b.disabledInactiveTickMarkColor, t),
653
      thumbColor: Color.lerp(a.thumbColor, b.thumbColor, t),
654
      overlappingShapeStrokeColor: Color.lerp(a.overlappingShapeStrokeColor, b.overlappingShapeStrokeColor, t),
655 656 657
      disabledThumbColor: Color.lerp(a.disabledThumbColor, b.disabledThumbColor, t),
      overlayColor: Color.lerp(a.overlayColor, b.overlayColor, t),
      valueIndicatorColor: Color.lerp(a.valueIndicatorColor, b.valueIndicatorColor, t),
658
      overlayShape: t < 0.5 ? a.overlayShape : b.overlayShape,
659
      tickMarkShape: t < 0.5 ? a.tickMarkShape : b.tickMarkShape,
660
      thumbShape: t < 0.5 ? a.thumbShape : b.thumbShape,
661
      trackShape: t < 0.5 ? a.trackShape : b.trackShape,
662
      valueIndicatorShape: t < 0.5 ? a.valueIndicatorShape : b.valueIndicatorShape,
663 664 665 666
      rangeTickMarkShape: t < 0.5 ? a.rangeTickMarkShape : b.rangeTickMarkShape,
      rangeThumbShape: t < 0.5 ? a.rangeThumbShape : b.rangeThumbShape,
      rangeTrackShape: t < 0.5 ? a.rangeTrackShape : b.rangeTrackShape,
      rangeValueIndicatorShape: t < 0.5 ? a.rangeValueIndicatorShape : b.rangeValueIndicatorShape,
667
      showValueIndicator: t < 0.5 ? a.showValueIndicator : b.showValueIndicator,
668
      valueIndicatorTextStyle: TextStyle.lerp(a.valueIndicatorTextStyle, b.valueIndicatorTextStyle, t),
669 670
      minThumbSeparation: lerpDouble(a.minThumbSeparation, b.minThumbSeparation, t),
      thumbSelector: t < 0.5 ? a.thumbSelector : b.thumbSelector,
671
      mouseCursor: t < 0.5 ? a.mouseCursor : b.mouseCursor,
672 673 674 675
    );
  }

  @override
676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696
  int get hashCode => Object.hash(
    trackHeight,
    activeTrackColor,
    inactiveTrackColor,
    disabledActiveTrackColor,
    disabledInactiveTrackColor,
    activeTickMarkColor,
    inactiveTickMarkColor,
    disabledActiveTickMarkColor,
    disabledInactiveTickMarkColor,
    thumbColor,
    overlappingShapeStrokeColor,
    disabledThumbColor,
    overlayColor,
    valueIndicatorColor,
    overlayShape,
    tickMarkShape,
    thumbShape,
    trackShape,
    valueIndicatorShape,
    Object.hash(
697 698 699 700
      rangeTickMarkShape,
      rangeThumbShape,
      rangeTrackShape,
      rangeValueIndicatorShape,
701
      showValueIndicator,
702
      valueIndicatorTextStyle,
703 704
      minThumbSeparation,
      thumbSelector,
705
      mouseCursor,
706 707
    ),
  );
708 709 710

  @override
  bool operator ==(Object other) {
711 712 713
    if (identical(this, other)) {
      return true;
    }
714 715 716
    if (other.runtimeType != runtimeType) {
      return false;
    }
717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743
    return other is SliderThemeData
        && other.trackHeight == trackHeight
        && other.activeTrackColor == activeTrackColor
        && other.inactiveTrackColor == inactiveTrackColor
        && other.disabledActiveTrackColor == disabledActiveTrackColor
        && other.disabledInactiveTrackColor == disabledInactiveTrackColor
        && other.activeTickMarkColor == activeTickMarkColor
        && other.inactiveTickMarkColor == inactiveTickMarkColor
        && other.disabledActiveTickMarkColor == disabledActiveTickMarkColor
        && other.disabledInactiveTickMarkColor == disabledInactiveTickMarkColor
        && other.thumbColor == thumbColor
        && other.overlappingShapeStrokeColor == overlappingShapeStrokeColor
        && other.disabledThumbColor == disabledThumbColor
        && other.overlayColor == overlayColor
        && other.valueIndicatorColor == valueIndicatorColor
        && other.overlayShape == overlayShape
        && other.tickMarkShape == tickMarkShape
        && other.thumbShape == thumbShape
        && other.trackShape == trackShape
        && other.valueIndicatorShape == valueIndicatorShape
        && other.rangeTickMarkShape == rangeTickMarkShape
        && other.rangeThumbShape == rangeThumbShape
        && other.rangeTrackShape == rangeTrackShape
        && other.rangeValueIndicatorShape == rangeValueIndicatorShape
        && other.showValueIndicator == showValueIndicator
        && other.valueIndicatorTextStyle == valueIndicatorTextStyle
        && other.minThumbSeparation == minThumbSeparation
744 745
        && other.thumbSelector == thumbSelector
        && other.mouseCursor == mouseCursor;
746 747 748
  }

  @override
749 750
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
751
    const SliderThemeData defaultData = SliderThemeData();
752
    properties.add(DoubleProperty('trackHeight', trackHeight, defaultValue: defaultData.trackHeight));
753 754 755 756 757 758 759 760 761 762 763 764 765
    properties.add(ColorProperty('activeTrackColor', activeTrackColor, defaultValue: defaultData.activeTrackColor));
    properties.add(ColorProperty('inactiveTrackColor', inactiveTrackColor, defaultValue: defaultData.inactiveTrackColor));
    properties.add(ColorProperty('disabledActiveTrackColor', disabledActiveTrackColor, defaultValue: defaultData.disabledActiveTrackColor));
    properties.add(ColorProperty('disabledInactiveTrackColor', disabledInactiveTrackColor, defaultValue: defaultData.disabledInactiveTrackColor));
    properties.add(ColorProperty('activeTickMarkColor', activeTickMarkColor, defaultValue: defaultData.activeTickMarkColor));
    properties.add(ColorProperty('inactiveTickMarkColor', inactiveTickMarkColor, defaultValue: defaultData.inactiveTickMarkColor));
    properties.add(ColorProperty('disabledActiveTickMarkColor', disabledActiveTickMarkColor, defaultValue: defaultData.disabledActiveTickMarkColor));
    properties.add(ColorProperty('disabledInactiveTickMarkColor', disabledInactiveTickMarkColor, defaultValue: defaultData.disabledInactiveTickMarkColor));
    properties.add(ColorProperty('thumbColor', thumbColor, defaultValue: defaultData.thumbColor));
    properties.add(ColorProperty('overlappingShapeStrokeColor', overlappingShapeStrokeColor, defaultValue: defaultData.overlappingShapeStrokeColor));
    properties.add(ColorProperty('disabledThumbColor', disabledThumbColor, defaultValue: defaultData.disabledThumbColor));
    properties.add(ColorProperty('overlayColor', overlayColor, defaultValue: defaultData.overlayColor));
    properties.add(ColorProperty('valueIndicatorColor', valueIndicatorColor, defaultValue: defaultData.valueIndicatorColor));
766 767 768 769 770 771 772 773 774
    properties.add(DiagnosticsProperty<SliderComponentShape>('overlayShape', overlayShape, defaultValue: defaultData.overlayShape));
    properties.add(DiagnosticsProperty<SliderTickMarkShape>('tickMarkShape', tickMarkShape, defaultValue: defaultData.tickMarkShape));
    properties.add(DiagnosticsProperty<SliderComponentShape>('thumbShape', thumbShape, defaultValue: defaultData.thumbShape));
    properties.add(DiagnosticsProperty<SliderTrackShape>('trackShape', trackShape, defaultValue: defaultData.trackShape));
    properties.add(DiagnosticsProperty<SliderComponentShape>('valueIndicatorShape', valueIndicatorShape, defaultValue: defaultData.valueIndicatorShape));
    properties.add(DiagnosticsProperty<RangeSliderTickMarkShape>('rangeTickMarkShape', rangeTickMarkShape, defaultValue: defaultData.rangeTickMarkShape));
    properties.add(DiagnosticsProperty<RangeSliderThumbShape>('rangeThumbShape', rangeThumbShape, defaultValue: defaultData.rangeThumbShape));
    properties.add(DiagnosticsProperty<RangeSliderTrackShape>('rangeTrackShape', rangeTrackShape, defaultValue: defaultData.rangeTrackShape));
    properties.add(DiagnosticsProperty<RangeSliderValueIndicatorShape>('rangeValueIndicatorShape', rangeValueIndicatorShape, defaultValue: defaultData.rangeValueIndicatorShape));
775 776
    properties.add(EnumProperty<ShowValueIndicator>('showValueIndicator', showValueIndicator, defaultValue: defaultData.showValueIndicator));
    properties.add(DiagnosticsProperty<TextStyle>('valueIndicatorTextStyle', valueIndicatorTextStyle, defaultValue: defaultData.valueIndicatorTextStyle));
777
    properties.add(DoubleProperty('minThumbSeparation', minThumbSeparation, defaultValue: defaultData.minThumbSeparation));
778
    properties.add(DiagnosticsProperty<RangeThumbSelector>('thumbSelector', thumbSelector, defaultValue: defaultData.thumbSelector));
779
    properties.add(DiagnosticsProperty<MaterialStateProperty<MouseCursor?>>('mouseCursor', mouseCursor, defaultValue: defaultData.mouseCursor));
780 781 782
  }
}

783
/// Base class for slider thumb, thumb overlay, and value indicator shapes.
784
///
785
/// Create a subclass of this if you would like a custom shape.
786
///
787 788 789 790 791 792 793 794
/// All shapes are painted to the same canvas and ordering is important.
/// The overlay is painted first, then the value indicator, then the thumb.
///
/// The thumb painting can be skipped by specifying [noThumb] for
/// [SliderThemeData.thumbShape].
///
/// The overlay painting can be skipped by specifying [noOverlay] for
/// [SliderThemeData.overlayShape].
795 796 797
///
/// See also:
///
798 799 800
///  * [RoundSliderThumbShape], which is the default [Slider]'s thumb shape that
///    paints a solid circle.
///  * [RoundSliderOverlayShape], which is the default [Slider] and
801
///    [RangeSlider]'s overlay shape that paints a transparent circle.
802 803
///  * [PaddleSliderValueIndicatorShape], which is the default [Slider]'s value
///    indicator shape that paints a custom path with text in it.
804 805
abstract class SliderComponentShape {
  /// This abstract const constructor enables subclasses to provide
806
  /// const constructors so that they can be used in const expressions.
807
  const SliderComponentShape();
808

809 810 811 812
  /// Returns the preferred size of the shape, based on the given conditions.
  Size getPreferredSize(bool isEnabled, bool isDiscrete);

  /// Paints the shape, taking into account the state passed to it.
813
  ///
814
  /// {@template flutter.material.SliderComponentShape.paint.context}
815 816 817
  /// The `context` argument is the same as the one that includes the [Slider]'s
  /// render box.
  /// {@endtemplate}
818
  ///
819
  /// {@template flutter.material.SliderComponentShape.paint.center}
820 821 822
  /// The `center` argument is the offset for where this shape's center should be
  /// painted. This offset is relative to the origin of the [context] canvas.
  /// {@endtemplate}
823
  ///
824 825
  /// The `activationAnimation` argument is an animation triggered when the user
  /// begins to interact with the slider. It reverses when the user stops interacting
826
  /// with the slider.
827
  ///
828
  /// {@template flutter.material.SliderComponentShape.paint.enableAnimation}
829
  /// The `enableAnimation` argument is an animation triggered when the [Slider]
830 831 832
  /// is enabled, and it reverses when the slider is disabled. The [Slider] is
  /// enabled when [Slider.onChanged] is not null.Use this to paint intermediate
  /// frames for this shape when the slider changes enabled state.
833
  /// {@endtemplate}
834
  ///
835
  /// {@template flutter.material.SliderComponentShape.paint.isDiscrete}
836 837 838
  /// The `isDiscrete` argument is true if [Slider.divisions] is non-null. When
  /// true, the slider will render tick marks on top of the track.
  /// {@endtemplate}
839
  ///
840 841 842 843
  /// If the `labelPainter` argument is non-null, then [TextPainter.paint]
  /// should be called on the `labelPainter` with the location that the label
  /// should appear. If the `labelPainter` argument is null, then no label was
  /// supplied to the [Slider].
844
  ///
845
  /// {@template flutter.material.SliderComponentShape.paint.parentBox}
846 847 848
  /// The `parentBox` argument is the [RenderBox] of the [Slider]. Its attributes,
  /// such as size, can be used to assist in painting this shape.
  /// {@endtemplate}
849
  ///
850
  /// {@template flutter.material.SliderComponentShape.paint.sliderTheme}
851 852 853
  /// the `sliderTheme` argument is the theme assigned to the [Slider] that this
  /// shape belongs to.
  /// {@endtemplate}
854
  ///
855 856 857
  /// The `textDirection` argument can be used to determine how any extra text
  /// or graphics (besides the text painted by the `labelPainter`) should be
  /// positioned. The `labelPainter` already has the [textDirection] set.
858
  ///
859 860
  /// The `value` argument is the current parametric value (from 0.0 to 1.0) of
  /// the slider.
861
  ///
862
  /// {@template flutter.material.SliderComponentShape.paint.textScaleFactor}
863 864 865 866
  /// The `textScaleFactor` argument can be used to determine whether the
  /// component should paint larger or smaller, depending on whether
  /// [textScaleFactor] is greater than 1 for larger, and between 0 and 1 for
  /// smaller. It usually comes from [MediaQueryData.textScaleFactor].
867 868
  /// {@endtemplate}
  ///
869
  /// {@template flutter.material.SliderComponentShape.paint.sizeWithOverflow}
870 871 872 873 874
  /// The `sizeWithOverflow` argument can be used to determine the bounds the
  /// drawing of the components that are outside of the regular slider bounds.
  /// It's the size of the box, whose center is aligned with the slider's
  /// bounds, that the value indicators must be drawn within. Typically, it is
  /// bigger than the slider.
875
  /// {@endtemplate}
876 877
  void paint(
    PaintingContext context,
878
    Offset center, {
879 880
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
881
    required bool isDiscrete,
882 883 884 885 886
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
887 888
    required double textScaleFactor,
    required Size sizeWithOverflow,
889
  });
890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905

  /// Special instance of [SliderComponentShape] to skip the thumb drawing.
  ///
  /// See also:
  ///
  ///  * [SliderThemeData.thumbShape], which is the shape that the [Slider]
  ///    uses when painting the thumb.
  static final SliderComponentShape noThumb = _EmptySliderComponentShape();

  /// Special instance of [SliderComponentShape] to skip the overlay drawing.
  ///
  /// See also:
  ///
  ///  * [SliderThemeData.overlayShape], which is the shape that the [Slider]
  ///    uses when painting the overlay.
  static final SliderComponentShape noOverlay = _EmptySliderComponentShape();
906 907
}

908
/// Base class for [Slider] tick mark shapes.
909
///
910
/// Create a subclass of this if you would like a custom slider tick mark shape.
911
///
912 913 914
/// The tick mark painting can be skipped by specifying [noTickMark] for
/// [SliderThemeData.tickMarkShape].
///
915 916
/// See also:
///
917 918
///  * [RoundSliderTickMarkShape], which is the default [Slider]'s tick mark
///    shape that paints a solid circle.
919 920 921 922 923
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
924
abstract class SliderTickMarkShape {
925
  /// This abstract const constructor enables subclasses to provide
926 927 928 929 930 931 932
  /// const constructors so that they can be used in const expressions.
  const SliderTickMarkShape();

  /// Returns the preferred size of the shape.
  ///
  /// It is used to help position the tick marks within the slider.
  ///
933
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
934
  ///
935
  /// {@template flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
936 937
  /// The `isEnabled` argument is false when [Slider.onChanged] is null and true
  /// otherwise. When true, the slider will respond to input.
938
  /// {@endtemplate}
939
  Size getPreferredSize({
940
    required SliderThemeData sliderTheme,
941
    required bool isEnabled,
942 943 944 945
  });

  /// Paints the slider track.
  ///
946
  /// {@macro flutter.material.SliderComponentShape.paint.context}
947
  ///
948
  /// {@macro flutter.material.SliderComponentShape.paint.center}
949
  ///
950
  /// {@macro flutter.material.SliderComponentShape.paint.parentBox}
951
  ///
952
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
953
  ///
954
  /// {@macro flutter.material.SliderComponentShape.paint.enableAnimation}
955
  ///
956
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
957
  ///
958 959 960 961 962 963 964
  /// The `textDirection` argument can be used to determine how the tick marks
  /// are painting depending on whether they are on an active track segment or
  /// not. The track segment between the start of the slider and the thumb is
  /// the active track segment. The track segment between the thumb and the end
  /// of the slider is the inactive track segment. In LTR text direction, the
  /// start of the slider is on the left, and in RTL text direction, the start
  /// of the slider is on the right.
965 966 967
  void paint(
    PaintingContext context,
    Offset center, {
968 969 970 971
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
972
    required bool isEnabled,
973
    required TextDirection textDirection,
974
  });
975 976 977 978 979

  /// Special instance of [SliderTickMarkShape] to skip the tick mark painting.
  ///
  /// See also:
  ///
980 981
  ///  * [SliderThemeData.tickMarkShape], which is the shape that the [Slider]
  ///    uses when painting tick marks.
982 983 984
  static final SliderTickMarkShape noTickMark = _EmptySliderTickMarkShape();
}

985
/// Base class for slider track shapes.
986
///
987 988 989 990 991 992 993 994 995
/// The slider's thumb moves along the track. A discrete slider's tick marks
/// are drawn after the track, but before the thumb, and are aligned with the
/// track.
///
/// The [getPreferredRect] helps position the slider thumb and tick marks
/// relative to the track.
///
/// See also:
///
996 997
///  * [RoundedRectSliderTrackShape] for the default [Slider]'s track shape that
///    paints a stadium-like track.
998 999 1000 1001 1002
///  * [SliderTickMarkShape], which can be used to create custom shapes for the
///    [Slider]'s tick marks.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
1003 1004 1005 1006 1007 1008 1009 1010 1011 1012
abstract class SliderTrackShape {
  /// This abstract const constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const SliderTrackShape();

  /// Returns the preferred bounds of the shape.
  ///
  /// It is used to provide horizontal boundaries for the thumb's position, and
  /// to help position the slider thumb and tick marks relative to the track.
  ///
1013
  /// The `parentBox` argument can be used to help determine the preferredRect relative to
1014 1015
  /// attributes of the render box of the slider itself, such as size.
  ///
1016
  /// The `offset` argument is relative to the caller's bounding box. It can be used to
1017 1018
  /// convert gesture coordinates from global to slider-relative coordinates.
  ///
1019
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
1020
  ///
1021
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
1022
  ///
1023
  /// {@macro flutter.material.SliderComponentShape.paint.isDiscrete}
1024
  Rect getPreferredRect({
1025
    required RenderBox parentBox,
1026
    Offset offset = Offset.zero,
1027
    required SliderThemeData sliderTheme,
1028
    bool isEnabled,
1029 1030
    bool isDiscrete,
  });
1031

1032 1033
  /// Paints the track shape based on the state passed to it.
  ///
1034
  /// {@macro flutter.material.SliderComponentShape.paint.context}
1035
  ///
1036 1037 1038
  /// The `offset` argument the offset of the origin of the `parentBox` to the
  /// origin of its `context` canvas. This shape must be painted relative to
  /// this offset. See [PaintingContextCallback].
1039
  ///
1040
  /// {@macro flutter.material.SliderComponentShape.paint.parentBox}
1041
  ///
1042
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
1043
  ///
1044
  /// {@macro flutter.material.SliderComponentShape.paint.enableAnimation}
1045
  ///
1046 1047 1048
  /// The `thumbCenter` argument is the offset of the center of the thumb
  /// relative to the origin of the [PaintingContext.canvas]. It can be used as
  /// the point that divides the track into 2 segments.
1049
  ///
1050
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
1051
  ///
1052
  /// {@macro flutter.material.SliderComponentShape.paint.isDiscrete}
1053
  ///
1054 1055
  /// The `textDirection` argument can be used to determine how the track
  /// segments are painted depending on whether they are active or not.
1056
  ///
1057
  /// {@template flutter.material.SliderTrackShape.paint.trackSegment}
1058 1059 1060 1061 1062 1063
  /// The track segment between the start of the slider and the thumb is the
  /// active track segment. The track segment between the thumb and the end of the
  /// slider is the inactive track segment. In [TextDirection.ltr], the start of
  /// the slider is on the left, and in [TextDirection.rtl], the start of the
  /// slider is on the right.
  /// {@endtemplate}
1064 1065
  void paint(
    PaintingContext context,
1066
    Offset offset, {
1067 1068 1069 1070
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
1071
    bool isEnabled,
1072
    bool isDiscrete,
1073
    required TextDirection textDirection,
1074
  });
1075 1076
}

1077
/// Base class for [RangeSlider] thumb shapes.
1078
///
1079 1080
/// See also:
///
1081 1082
///  * [RoundRangeSliderThumbShape] for the default [RangeSlider]'s thumb shape
///    that paints a solid circle.
1083 1084 1085 1086 1087 1088 1089 1090 1091
///  * [RangeSliderTickMarkShape], which can be used to create custom shapes for
///    the [RangeSlider]'s tick marks.
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
///  * [RangeSliderValueIndicatorShape], which can be used to create custom
///    shapes for the [RangeSlider]'s value indicator.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
1092 1093
abstract class RangeSliderThumbShape {
  /// This abstract const constructor enables subclasses to provide
1094
  /// const constructors so that they can be used in const expressions.
1095
  const RangeSliderThumbShape();
1096 1097

  /// Returns the preferred size of the shape, based on the given conditions.
1098
  ///
1099
  /// {@template flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1100 1101 1102
  /// The `isDiscrete` argument is true if [RangeSlider.divisions] is non-null.
  /// When true, the slider will render tick marks on top of the track.
  /// {@endtemplate}
1103
  ///
1104
  /// {@template flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1105 1106
  /// The `isEnabled` argument is false when [RangeSlider.onChanged] is null and
  /// true otherwise. When true, the slider will respond to input.
1107
  /// {@endtemplate}
1108 1109
  Size getPreferredSize(bool isEnabled, bool isDiscrete);

1110
  /// Paints the thumb shape based on the state passed to it.
1111
  ///
1112
  /// {@template flutter.material.RangeSliderThumbShape.paint.context}
1113 1114
  /// The `context` argument represents the [RangeSlider]'s render box.
  /// {@endtemplate}
1115
  ///
1116
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1117
  ///
1118
  /// {@template flutter.material.RangeSliderThumbShape.paint.activationAnimation}
1119 1120 1121 1122
  /// The `activationAnimation` argument is an animation triggered when the user
  /// begins to interact with the [RangeSlider]. It reverses when the user stops
  /// interacting with the slider.
  /// {@endtemplate}
1123
  ///
1124
  /// {@template flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1125
  /// The `enableAnimation` argument is an animation triggered when the
1126 1127 1128 1129
  /// [RangeSlider] is enabled, and it reverses when the slider is disabled. The
  /// [RangeSlider] is enabled when [RangeSlider.onChanged] is not null. Use
  /// this to paint intermediate frames for this shape when the slider changes
  /// enabled state.
1130
  /// {@endtemplate}
1131
  ///
1132
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1133
  ///
1134
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1135
  ///
1136 1137 1138
  /// If the `isOnTop` argument is true, this thumb is painted on top of the
  /// other slider thumb because this thumb is the one that was most recently
  /// selected.
1139
  ///
1140
  /// {@template flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1141 1142 1143
  /// The `sliderTheme` argument is the theme assigned to the [RangeSlider] that
  /// this shape belongs to.
  /// {@endtemplate}
1144
  ///
1145 1146 1147
  /// The `textDirection` argument can be used to determine how the orientation
  /// of either slider thumb should be changed, such as drawing different
  /// shapes for the left and right thumb.
1148
  ///
1149
  /// {@template flutter.material.RangeSliderThumbShape.paint.thumb}
1150 1151 1152
  /// The `thumb` argument is the specifier for which of the two thumbs this
  /// method should paint (start or end).
  /// {@endtemplate}
1153
  ///
1154 1155 1156
  /// The `isPressed` argument can be used to give the selected thumb
  /// additional selected or pressed state visual feedback, such as a larger
  /// shadow.
1157 1158 1159
  void paint(
    PaintingContext context,
    Offset center, {
1160 1161
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
1162 1163 1164
    bool isDiscrete,
    bool isEnabled,
    bool isOnTop,
1165
    TextDirection textDirection,
1166
    required SliderThemeData sliderTheme,
1167
    Thumb thumb,
1168
    bool isPressed,
1169 1170 1171 1172 1173 1174 1175
  });
}

/// Base class for [RangeSlider] value indicator shapes.
///
/// See also:
///
1176 1177
///  * [PaddleRangeSliderValueIndicatorShape] for the default [RangeSlider]'s
///    value indicator shape that paints a custom path with text in it.
1178 1179 1180 1181 1182 1183 1184 1185 1186
///  * [RangeSliderTickMarkShape], which can be used to create custom shapes for
///    the [RangeSlider]'s tick marks.
///  * [RangeSliderThumbShape], which can be used to create custom shapes for
///    the [RangeSlider]'s thumb.
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
1187 1188 1189 1190 1191 1192 1193
abstract class RangeSliderValueIndicatorShape {
  /// This abstract const constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const RangeSliderValueIndicatorShape();

  /// Returns the preferred size of the shape, based on the given conditions.
  ///
1194
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1195
  ///
1196
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1197
  ///
1198 1199
  /// The `labelPainter` argument helps determine the width of the shape. It is
  /// variable width because it is derived from a formatted string.
1200
  ///
1201
  /// {@macro flutter.material.SliderComponentShape.paint.textScaleFactor}
1202 1203 1204
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
1205 1206
    required TextPainter labelPainter,
    required double textScaleFactor,
1207
  });
1208

1209 1210 1211 1212 1213
  /// Determines the best offset to keep this shape on the screen.
  ///
  /// Override this method when the center of the value indicator should be
  /// shifted from the vertical center of the thumb.
  double getHorizontalShift({
1214 1215 1216 1217 1218 1219
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
1220 1221 1222 1223
  }) {
    return 0;
  }

1224 1225
  /// Paints the value indicator shape based on the state passed to it.
  ///
1226
  /// {@macro flutter.material.RangeSliderThumbShape.paint.context}
1227
  ///
1228
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1229
  ///
1230
  /// {@macro flutter.material.RangeSliderThumbShape.paint.activationAnimation}
1231
  ///
1232
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1233
  ///
1234
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1235
  ///
1236
  /// The `isOnTop` argument is the top-most value indicator between the two value
1237 1238 1239 1240
  /// indicators, which is always the indicator for the most recently selected thumb. In
  /// the default case, this is used to paint a stroke around the top indicator
  /// for better visibility between the two indicators.
  ///
1241
  /// {@macro flutter.material.SliderComponentShape.paint.textScaleFactor}
1242
  ///
1243
  /// {@macro flutter.material.SliderComponentShape.paint.sizeWithOverflow}
1244
  ///
1245
  /// {@template flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1246 1247 1248
  /// The `parentBox` argument is the [RenderBox] of the [RangeSlider]. Its
  /// attributes, such as size, can be used to assist in painting this shape.
  /// {@endtemplate}
1249
  ///
1250
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1251
  ///
1252 1253 1254 1255
  /// The `textDirection` argument can be used to determine how any extra text
  /// or graphics, besides the text painted by the [labelPainter] should be
  /// positioned. The `labelPainter` argument already has the `textDirection`
  /// set.
1256
  ///
1257 1258
  /// The `value` argument is the current parametric value (from 0.0 to 1.0) of
  /// the slider.
1259
  ///
1260
  /// {@macro flutter.material.RangeSliderThumbShape.paint.thumb}
1261 1262
  void paint(
    PaintingContext context,
1263
    Offset center, {
1264 1265
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
1266
    bool isDiscrete,
1267
    bool isOnTop,
1268
    required TextPainter labelPainter,
1269 1270
    double textScaleFactor,
    Size sizeWithOverflow,
1271 1272
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
1273 1274
    TextDirection textDirection,
    double value,
1275
    Thumb thumb,
1276
  });
1277
}
1278

1279 1280 1281 1282 1283 1284 1285
/// Base class for [RangeSlider] tick mark shapes.
///
/// This is a simplified version of [SliderComponentShape] with a
/// [SliderThemeData] passed when getting the preferred size.
///
/// See also:
///
1286 1287
///  * [RoundRangeSliderTickMarkShape] for the default [RangeSlider]'s tick mark
///    shape that paints a solid circle.
1288 1289 1290 1291 1292 1293 1294 1295 1296
///  * [RangeSliderThumbShape], which can be used to create custom shapes for
///    the [RangeSlider]'s thumb.
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
///  * [RangeSliderValueIndicatorShape], which can be used to create custom
///    shapes for the [RangeSlider]'s value indicator.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
1297 1298 1299 1300 1301 1302
abstract class RangeSliderTickMarkShape {
  /// This abstract const constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const RangeSliderTickMarkShape();

  /// Returns the preferred size of the shape.
1303
  ///
1304
  /// It is used to help position the tick marks within the slider.
1305
  ///
1306
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1307
  ///
1308
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1309
  Size getPreferredSize({
1310
    required SliderThemeData sliderTheme,
1311 1312
    bool isEnabled,
  });
1313

1314
  /// Paints the slider track.
1315
  ///
1316
  /// {@macro flutter.material.RangeSliderThumbShape.paint.context}
1317
  ///
1318
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1319
  ///
1320
  /// {@macro flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1321
  ///
1322
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1323
  ///
1324
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1325
  ///
1326
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1327
  ///
1328 1329
  /// The `textDirection` argument can be used to determine how the tick marks
  /// are painted depending on whether they are on an active track segment or not.
1330
  ///
1331
  /// {@template flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1332 1333 1334 1335 1336
  /// The track segment between the two thumbs is the active track segment. The
  /// track segments between the thumb and each end of the slider are the inactive
  /// track segments. In [TextDirection.ltr], the start of the slider is on the
  /// left, and in [TextDirection.rtl], the start of the slider is on the right.
  /// {@endtemplate}
1337 1338 1339
  void paint(
    PaintingContext context,
    Offset center, {
1340 1341 1342 1343 1344
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1345
    bool isEnabled,
1346
    required TextDirection textDirection,
1347
  });
1348 1349
}

1350
/// Base class for [RangeSlider] track shapes.
1351
///
1352 1353 1354 1355 1356 1357 1358 1359 1360
/// The slider's thumbs move along the track. A discrete slider's tick marks
/// are drawn after the track, but before the thumb, and are aligned with the
/// track.
///
/// The [getPreferredRect] helps position the slider thumbs and tick marks
/// relative to the track.
///
/// See also:
///
1361 1362
///  * [RoundedRectRangeSliderTrackShape] for the default [RangeSlider]'s track
///    shape that paints a stadium-like track.
1363 1364 1365 1366 1367 1368 1369 1370 1371
///  * [RangeSliderTickMarkShape], which can be used to create custom shapes for
///    the [RangeSlider]'s tick marks.
///  * [RangeSliderThumbShape], which can be used to create custom shapes for
///    the [RangeSlider]'s thumb.
///  * [RangeSliderValueIndicatorShape], which can be used to create custom
///    shapes for the [RangeSlider]'s value indicator.
///  * [SliderComponentShape], which can be used to create custom shapes for
///    the [Slider]'s thumb, overlay, and value indicator and the
///    [RangeSlider]'s overlay.
1372 1373 1374 1375
abstract class RangeSliderTrackShape {
  /// This abstract const constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const RangeSliderTrackShape();
1376

1377 1378 1379 1380 1381 1382
  /// Returns the preferred bounds of the shape.
  ///
  /// It is used to provide horizontal boundaries for the position of the
  /// thumbs, and to help position the slider thumbs and tick marks relative to
  /// the track.
  ///
1383 1384 1385
  /// The `parentBox` argument can be used to help determine the preferredRect
  /// relative to attributes of the render box of the slider itself, such as
  /// size.
1386
  ///
1387 1388 1389
  /// The `offset` argument is relative to the caller's bounding box. It can be
  /// used to convert gesture coordinates from global to slider-relative
  /// coordinates.
1390
  ///
1391
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1392
  ///
1393
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1394
  ///
1395
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1396
  Rect getPreferredRect({
1397
    required RenderBox parentBox,
1398
    Offset offset = Offset.zero,
1399
    required SliderThemeData sliderTheme,
1400 1401 1402 1403 1404 1405
    bool isEnabled,
    bool isDiscrete,
  });

  /// Paints the track shape based on the state passed to it.
  ///
1406
  /// {@macro flutter.material.SliderComponentShape.paint.context}
1407 1408 1409 1410
  ///
  /// The `offset` argument is the offset of the origin of the `parentBox` to
  /// the origin of its `context` canvas. This shape must be painted relative
  /// to this offset. See [PaintingContextCallback].
1411
  ///
1412
  /// {@macro flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1413
  ///
1414
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1415
  ///
1416
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1417
  ///
1418 1419 1420
  /// The `startThumbCenter` argument is the offset of the center of the start
  /// thumb relative to the origin of the [PaintingContext.canvas]. It can be
  /// used as one point that divides the track between inactive and active.
1421
  ///
1422 1423 1424
  /// The `endThumbCenter` argument is the offset of the center of the end
  /// thumb relative to the origin of the [PaintingContext.canvas]. It can be
  /// used as one point that divides the track between inactive and active.
1425
  ///
1426
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1427
  ///
1428
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1429
  ///
1430 1431 1432
  /// The `textDirection` argument can be used to determine how the track
  /// segments are painted depending on whether they are on an active track
  /// segment or not.
1433
  ///
1434
  /// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1435 1436
  void paint(
    PaintingContext context,
1437
    Offset offset, {
1438 1439 1440 1441 1442 1443 1444 1445
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
    bool isEnabled = false,
    bool isDiscrete = false,
    required TextDirection textDirection,
1446
  });
1447 1448
}

1449 1450 1451
/// Base track shape that provides an implementation of [getPreferredRect] for
/// default sizing.
///
1452 1453 1454 1455
/// The height is set from [SliderThemeData.trackHeight] and the width of the
/// parent box less the larger of the widths of [SliderThemeData.thumbShape] and
/// [SliderThemeData.overlayShape].
///
1456 1457
/// See also:
///
1458 1459 1460 1461
///  * [RectangularSliderTrackShape], which is a track shape with sharp
///    rectangular edges
///  * [RoundedRectSliderTrackShape], which is a track shape with round
///    stadium-like edges.
1462
mixin BaseSliderTrackShape {
1463 1464 1465
  /// Returns a rect that represents the track bounds that fits within the
  /// [Slider].
  ///
1466 1467
  /// The width is the width of the [Slider] or [RangeSlider], but padded by
  /// the max  of the overlay and thumb radius. The height is defined by the
1468 1469 1470 1471 1472
  /// [SliderThemeData.trackHeight].
  ///
  /// The [Rect] is centered both horizontally and vertically within the slider
  /// bounds.
  Rect getPreferredRect({
1473
    required RenderBox parentBox,
1474
    Offset offset = Offset.zero,
1475
    required SliderThemeData sliderTheme,
1476 1477 1478
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
1479 1480
    assert(isEnabled != null);
    assert(isDiscrete != null);
1481
    assert(parentBox != null);
1482
    assert(sliderTheme != null);
1483 1484 1485
    final double thumbWidth = sliderTheme.thumbShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight!;
1486 1487 1488
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);

1489
    final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
1490
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
1491 1492 1493 1494
    final double trackRight = trackLeft + parentBox.size.width - math.max(thumbWidth, overlayWidth);
    final double trackBottom = trackTop + trackHeight;
    // If the parentBox'size less than slider's size the trackRight will be less than trackLeft, so switch them.
    return Rect.fromLTRB(math.min(trackLeft, trackRight), trackTop, math.max(trackLeft, trackRight), trackBottom);
1495 1496
  }
}
1497

1498
/// A [Slider] track that's a simple rectangle.
1499
///
1500
/// It paints a solid colored rectangle, vertically centered in the
1501
/// `parentBox`. The track rectangle extends to the bounds of the `parentBox`,
1502 1503
/// but is padded by the [RoundSliderOverlayShape] radius. The height is defined
/// by the [SliderThemeData.trackHeight]. The color is determined by the
1504
/// [Slider]'s enabled state and the track segment's active state which are
1505
/// defined by:
1506 1507 1508 1509 1510
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
1511
/// {@macro flutter.material.SliderTrackShape.paint.trackSegment}
1512
///
1513 1514 1515
/// ![A slider widget, consisting of 5 divisions and showing the rectangular slider track shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rectangular_slider_track_shape.png)
///
1516 1517 1518 1519 1520
/// See also:
///
///  * [Slider], for the component that is meant to display this shape.
///  * [SliderThemeData], where an instance of this class is set to inform the
///    slider of the visual details of the its track.
1521 1522
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
1523 1524 1525
///  * [RoundedRectSliderTrackShape], for a similar track with rounded edges.
class RectangularSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
  /// Creates a slider track that draws 2 rectangles.
1526
  const RectangularSliderTrackShape();
1527 1528 1529 1530 1531

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1532 1533 1534 1535 1536
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
1537 1538 1539 1540 1541 1542 1543
    bool isDiscrete = false,
    bool isEnabled = false,
  }) {
    assert(context != null);
    assert(offset != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
1544 1545 1546 1547 1548 1549 1550 1551 1552 1553
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.thumbShape != null);
    assert(enableAnimation != null);
    assert(textDirection != null);
    assert(thumbCenter != null);
    assert(isEnabled != null);
    assert(isDiscrete != null);
1554 1555 1556
    // If the slider [SliderThemeData.trackHeight] is less than or equal to 0,
    // then it makes no difference whether the track is painted or not,
    // therefore the painting can be a no-op.
1557
    if (sliderTheme.trackHeight! <= 0) {
1558 1559 1560 1561 1562
      return;
    }

    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1563 1564
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1565 1566
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1567 1568
    final Paint leftTrackPaint;
    final Paint rightTrackPaint;
1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
        break;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
        break;
    }

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );

1588
    final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, thumbCenter.dx, trackRect.bottom);
1589
    if (!leftTrackSegment.isEmpty) {
1590
      context.canvas.drawRect(leftTrackSegment, leftTrackPaint);
1591
    }
1592
    final Rect rightTrackSegment = Rect.fromLTRB(thumbCenter.dx, trackRect.top, trackRect.right, trackRect.bottom);
1593
    if (!rightTrackSegment.isEmpty) {
1594
      context.canvas.drawRect(rightTrackSegment, rightTrackPaint);
1595
    }
1596 1597 1598 1599 1600 1601
  }
}

/// The default shape of a [Slider]'s track.
///
/// It paints a solid colored rectangle with rounded edges, vertically centered
1602 1603
/// in the `parentBox`. The track rectangle extends to the bounds of the
/// `parentBox`, but is padded by the larger of [RoundSliderOverlayShape]'s
1604 1605 1606 1607 1608 1609 1610 1611
/// radius and [RoundSliderThumbShape]'s radius. The height is defined by the
/// [SliderThemeData.trackHeight]. The color is determined by the [Slider]'s
/// enabled state and the track segment's active state which are defined by:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
1612
/// {@macro flutter.material.SliderTrackShape.paint.trackSegment}
1613
///
1614 1615 1616
/// ![A slider widget, consisting of 5 divisions and showing the rounded rect slider track shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rounded_rect_slider_track_shape.png)
///
1617 1618 1619 1620 1621
/// See also:
///
///  * [Slider], for the component that is meant to display this shape.
///  * [SliderThemeData], where an instance of this class is set to inform the
///    slider of the visual details of the its track.
1622 1623
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
1624 1625 1626
///  * [RectangularSliderTrackShape], for a similar track with sharp edges.
class RoundedRectSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
  /// Create a slider track that draws two rectangles with rounded outer edges.
1627
  const RoundedRectSliderTrackShape();
1628 1629 1630

  @override
  void paint(
1631 1632
    PaintingContext context,
    Offset offset, {
1633 1634 1635 1636 1637
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
1638 1639
    bool isDiscrete = false,
    bool isEnabled = false,
1640
    double additionalActiveTrackHeight = 2,
1641
  }) {
1642 1643 1644 1645 1646 1647 1648 1649 1650
    assert(context != null);
    assert(offset != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.thumbShape != null);
1651 1652 1653
    assert(enableAnimation != null);
    assert(textDirection != null);
    assert(thumbCenter != null);
1654 1655 1656
    // If the slider [SliderThemeData.trackHeight] is less than or equal to 0,
    // then it makes no difference whether the track is painted or not,
    // therefore the painting  can be a no-op.
1657
    if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
1658 1659 1660 1661 1662 1663 1664
      return;
    }

    // Assign the track segment paints, which are leading: active and
    // trailing: inactive.
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1665 1666
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1667 1668
    final Paint leftTrackPaint;
    final Paint rightTrackPaint;
1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
        break;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
        break;
    }

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );
1687
    final Radius trackRadius = Radius.circular(trackRect.height / 2);
1688
    final Radius activeTrackRadius = Radius.circular((trackRect.height + additionalActiveTrackHeight) / 2);
1689

1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711
    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        trackRect.left,
        (textDirection == TextDirection.ltr) ? trackRect.top - (additionalActiveTrackHeight / 2): trackRect.top,
        thumbCenter.dx,
        (textDirection == TextDirection.ltr) ? trackRect.bottom + (additionalActiveTrackHeight / 2) : trackRect.bottom,
        topLeft: (textDirection == TextDirection.ltr) ? activeTrackRadius : trackRadius,
        bottomLeft: (textDirection == TextDirection.ltr) ? activeTrackRadius: trackRadius,
      ),
      leftTrackPaint,
    );
    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        thumbCenter.dx,
        (textDirection == TextDirection.rtl) ? trackRect.top - (additionalActiveTrackHeight / 2) : trackRect.top,
        trackRect.right,
        (textDirection == TextDirection.rtl) ? trackRect.bottom + (additionalActiveTrackHeight / 2) : trackRect.bottom,
        topRight: (textDirection == TextDirection.rtl) ? activeTrackRadius : trackRadius,
        bottomRight: (textDirection == TextDirection.rtl) ? activeTrackRadius : trackRadius,
      ),
      rightTrackPaint,
    );
1712 1713 1714
  }
}

1715
/// A [RangeSlider] track that's a simple rectangle.
1716
///
1717
/// It paints a solid colored rectangle, vertically centered in the
1718
/// `parentBox`. The track rectangle extends to the bounds of the `parentBox`,
1719 1720
/// but is padded by the [RoundSliderOverlayShape] radius. The height is
/// defined by the [SliderThemeData.trackHeight]. The color is determined by the
1721
/// [Slider]'s enabled state and the track segment's active state which are
1722 1723 1724 1725 1726
/// defined by:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
1727
///
1728
/// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1729
///
1730 1731 1732
/// ![A range slider widget, consisting of 5 divisions and showing the rectangular range slider track shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rectangular_range_slider_track_shape.png)
///
1733 1734
/// See also:
///
1735
///  * [RangeSlider], for the component that is meant to display this shape.
1736
///  * [SliderThemeData], where an instance of this class is set to inform the
1737
///    slider of the visual details of the its track.
1738 1739
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
1740 1741 1742 1743
///  * [RoundedRectRangeSliderTrackShape], for a similar track with rounded
///    edges.
class RectangularRangeSliderTrackShape extends RangeSliderTrackShape {
  /// Create a slider track with rectangular outer edges.
1744
  ///
1745 1746
  /// The middle track segment is the selected range and is active, and the two
  /// outer track segments are inactive.
1747
  const RectangularRangeSliderTrackShape();
1748 1749 1750

  @override
  Rect getPreferredRect({
1751
    required RenderBox parentBox,
1752
    Offset offset = Offset.zero,
1753
    required SliderThemeData sliderTheme,
1754 1755
    bool isEnabled = false,
    bool isDiscrete = false,
1756
  }) {
1757
    assert(parentBox != null);
1758
    assert(offset != null);
1759
    assert(sliderTheme != null);
1760 1761 1762
    assert(sliderTheme.overlayShape != null);
    assert(isEnabled != null);
    assert(isDiscrete != null);
1763 1764
    final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight!;
1765 1766 1767 1768 1769
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);

    final double trackLeft = offset.dx + overlayWidth / 2;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
1770 1771 1772 1773
    final double trackRight = trackLeft + parentBox.size.width - overlayWidth;
    final double trackBottom = trackTop + trackHeight;
    // If the parentBox'size less than slider's size the trackRight will be less than trackLeft, so switch them.
    return Rect.fromLTRB(math.min(trackLeft, trackRight), trackTop, math.max(trackLeft, trackRight), trackBottom);
1774 1775 1776 1777 1778 1779
  }

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1780 1781 1782 1783 1784
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double>? enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1785
    bool isEnabled = false,
1786
    bool isDiscrete = false,
1787
    required TextDirection textDirection,
1788
  }) {
1789 1790 1791 1792
    assert(context != null);
    assert(offset != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
1793 1794 1795 1796 1797
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.rangeThumbShape != null);
1798
    assert(enableAnimation != null);
1799 1800 1801 1802
    assert(startThumbCenter != null);
    assert(endThumbCenter != null);
    assert(isEnabled != null);
    assert(isDiscrete != null);
1803
    assert(textDirection != null);
1804 1805
    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1806 1807
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1808 1809
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation!)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1810

1811 1812
    final Offset leftThumbOffset;
    final Offset rightThumbOffset;
1813 1814 1815 1816 1817 1818 1819 1820 1821
    switch (textDirection) {
      case TextDirection.ltr:
        leftThumbOffset = startThumbCenter;
        rightThumbOffset = endThumbCenter;
        break;
      case TextDirection.rtl:
        leftThumbOffset = endThumbCenter;
        rightThumbOffset = startThumbCenter;
        break;
1822
    }
1823 1824 1825 1826 1827 1828 1829 1830

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );
1831
    final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, leftThumbOffset.dx, trackRect.bottom);
1832
    if (!leftTrackSegment.isEmpty) {
1833
      context.canvas.drawRect(leftTrackSegment, inactivePaint);
1834
    }
1835
    final Rect middleTrackSegment = Rect.fromLTRB(leftThumbOffset.dx, trackRect.top, rightThumbOffset.dx, trackRect.bottom);
1836
    if (!middleTrackSegment.isEmpty) {
1837
      context.canvas.drawRect(middleTrackSegment, activePaint);
1838
    }
1839
    final Rect rightTrackSegment = Rect.fromLTRB(rightThumbOffset.dx, trackRect.top, trackRect.right, trackRect.bottom);
1840
    if (!rightTrackSegment.isEmpty) {
1841
      context.canvas.drawRect(rightTrackSegment, inactivePaint);
1842
    }
1843 1844 1845 1846 1847 1848
  }
}

/// The default shape of a [RangeSlider]'s track.
///
/// It paints a solid colored rectangle with rounded edges, vertically centered
1849 1850
/// in the `parentBox`. The track rectangle extends to the bounds of the
/// `parentBox`, but is padded by the larger of [RoundSliderOverlayShape]'s
1851 1852 1853 1854 1855 1856 1857 1858 1859
/// radius and [RoundRangeSliderThumbShape]'s radius. The height is defined by
/// the [SliderThemeData.trackHeight]. The color is determined by the
/// [RangeSlider]'s enabled state and the track segment's active state which are
/// defined by:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
1860
/// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1861
///
1862 1863 1864
/// ![A range slider widget, consisting of 5 divisions and showing the rounded rect range slider track shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rounded_rect_range_slider_track_shape.png)
///
1865 1866 1867 1868 1869
/// See also:
///
///  * [RangeSlider], for the component that is meant to display this shape.
///  * [SliderThemeData], where an instance of this class is set to inform the
///    slider of the visual details of the its track.
1870 1871
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
1872 1873 1874 1875 1876 1877
///  * [RectangularRangeSliderTrackShape], for a similar track with sharp edges.
class RoundedRectRangeSliderTrackShape extends RangeSliderTrackShape {
  /// Create a slider track with rounded outer edges.
  ///
  /// The middle track segment is the selected range and is active, and the two
  /// outer track segments are inactive.
1878
  const RoundedRectRangeSliderTrackShape();
1879 1880 1881

  @override
  Rect getPreferredRect({
1882
    required RenderBox parentBox,
1883
    Offset offset = Offset.zero,
1884
    required SliderThemeData sliderTheme,
1885 1886 1887 1888 1889 1890 1891 1892 1893 1894
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    assert(parentBox != null);
    assert(offset != null);
    assert(sliderTheme != null);
    assert(sliderTheme.overlayShape != null);
    assert(sliderTheme.trackHeight != null);
    assert(isEnabled != null);
    assert(isDiscrete != null);
1895 1896
    final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight!;
1897 1898 1899 1900 1901
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);

    final double trackLeft = offset.dx + overlayWidth / 2;
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
1902 1903 1904 1905
    final double trackRight = trackLeft + parentBox.size.width - overlayWidth;
    final double trackBottom = trackTop + trackHeight;
    // If the parentBox'size less than slider's size the trackRight will be less than trackLeft, so switch them.
    return Rect.fromLTRB(math.min(trackLeft, trackRight), trackTop, math.max(trackLeft, trackRight), trackBottom);
1906
  }
1907

1908 1909 1910 1911
  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1912 1913 1914 1915 1916
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1917 1918
    bool isEnabled = false,
    bool isDiscrete = false,
1919
    required TextDirection textDirection,
1920
    double additionalActiveTrackHeight = 2,
1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936
  }) {
    assert(context != null);
    assert(offset != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.rangeThumbShape != null);
    assert(enableAnimation != null);
    assert(startThumbCenter != null);
    assert(endThumbCenter != null);
    assert(isEnabled != null);
    assert(isDiscrete != null);
    assert(textDirection != null);
1937

1938
    if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
1939 1940 1941
      return;
    }

1942 1943
    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1944 1945
    final ColorTween activeTrackColorTween = ColorTween(
      begin: sliderTheme.disabledActiveTrackColor,
1946 1947
      end: sliderTheme.activeTrackColor,
    );
1948 1949
    final ColorTween inactiveTrackColorTween = ColorTween(
      begin: sliderTheme.disabledInactiveTrackColor,
1950 1951
      end: sliderTheme.inactiveTrackColor,
    );
1952
    final Paint activePaint = Paint()
1953
      ..color = activeTrackColorTween.evaluate(enableAnimation)!;
1954
    final Paint inactivePaint = Paint()
1955
      ..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1956

1957 1958
    final Offset leftThumbOffset;
    final Offset rightThumbOffset;
1959 1960
    switch (textDirection) {
      case TextDirection.ltr:
1961 1962
        leftThumbOffset = startThumbCenter;
        rightThumbOffset = endThumbCenter;
1963 1964
        break;
      case TextDirection.rtl:
1965 1966
        leftThumbOffset = endThumbCenter;
        rightThumbOffset = startThumbCenter;
1967 1968
        break;
    }
1969
    final Size thumbSize = sliderTheme.rangeThumbShape!.getPreferredSize(isEnabled, isDiscrete);
1970 1971
    final double thumbRadius = thumbSize.width / 2;
    assert(thumbRadius > 0);
1972 1973

    final Rect trackRect = getPreferredRect(
1974 1975 1976 1977 1978
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
1979
    );
1980

1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
    final Radius trackRadius = Radius.circular(trackRect.height / 2);

    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        trackRect.left,
        trackRect.top,
        leftThumbOffset.dx,
        trackRect.bottom,
        topLeft: trackRadius,
        bottomLeft: trackRadius,
      ),
      inactivePaint,
    );
    context.canvas.drawRect(
      Rect.fromLTRB(
        leftThumbOffset.dx,
        trackRect.top - (additionalActiveTrackHeight / 2),
        rightThumbOffset.dx,
        trackRect.bottom + (additionalActiveTrackHeight / 2),
      ),
      activePaint,
    );
    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        rightThumbOffset.dx,
        trackRect.top,
        trackRect.right,
        trackRect.bottom,
        topRight: trackRadius,
        bottomRight: trackRadius,
      ),
      inactivePaint,
    );
2014 2015 2016
  }
}

2017
/// The default shape of each [Slider] tick mark.
2018 2019
///
/// Tick marks are only displayed if the slider is discrete, which can be done
2020
/// by setting the [Slider.divisions] to an integer value.
2021 2022 2023 2024 2025 2026 2027 2028 2029
///
/// It paints a solid circle, centered in the on the track.
/// The color is determined by the [Slider]'s enabled state and track's active
/// states. These colors are defined in:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
nt4f04uNd's avatar
nt4f04uNd committed
2030
/// ![A slider widget, consisting of 5 divisions and showing the round slider tick mark shape.]
2031 2032
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rounded_slider_tick_mark_shape.png)
///
2033 2034 2035 2036 2037 2038
/// See also:
///
///  * [Slider], which includes tick marks defined by this shape.
///  * [SliderTheme], which can be used to configure the tick mark shape of all
///    sliders in a widget subtree.
class RoundSliderTickMarkShape extends SliderTickMarkShape {
2039
  /// Create a slider tick mark that draws a circle.
2040 2041 2042
  const RoundSliderTickMarkShape({
    this.tickMarkRadius,
  });
2043 2044 2045

  /// The preferred radius of the round tick mark.
  ///
2046
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2047
  final double? tickMarkRadius;
2048 2049

  @override
2050
  Size getPreferredSize({
2051
    required SliderThemeData sliderTheme,
2052
    required bool isEnabled,
2053 2054 2055 2056
  }) {
    assert(sliderTheme != null);
    assert(sliderTheme.trackHeight != null);
    assert(isEnabled != null);
2057 2058
    // The tick marks are tiny circles. If no radius is provided, then the
    // radius is defaulted to be a fraction of the
2059
    // [SliderThemeData.trackHeight]. The fraction is 1/4.
2060
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
2061 2062 2063 2064 2065 2066
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2067 2068 2069 2070 2071
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
2072
    required bool isEnabled,
2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087
  }) {
    assert(context != null);
    assert(center != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledActiveTickMarkColor != null);
    assert(sliderTheme.disabledInactiveTickMarkColor != null);
    assert(sliderTheme.activeTickMarkColor != null);
    assert(sliderTheme.inactiveTickMarkColor != null);
    assert(enableAnimation != null);
    assert(textDirection != null);
    assert(thumbCenter != null);
    assert(isEnabled != null);
    // The paint color of the tick mark depends on its position relative
    // to the thumb and the text direction.
2088 2089
    Color? begin;
    Color? end;
2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100 2101
    switch (textDirection) {
      case TextDirection.ltr:
        final bool isTickMarkRightOfThumb = center.dx > thumbCenter.dx;
        begin = isTickMarkRightOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
        end = isTickMarkRightOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
        break;
      case TextDirection.rtl:
        final bool isTickMarkLeftOfThumb = center.dx < thumbCenter.dx;
        begin = isTickMarkLeftOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
        end = isTickMarkLeftOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
        break;
    }
2102
    final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
2103 2104 2105

    // The tick marks are tiny circles that are the same height as the track.
    final double tickMarkRadius = getPreferredSize(
2106 2107 2108
       isEnabled: isEnabled,
       sliderTheme: sliderTheme,
     ).width / 2;
2109 2110 2111 2112 2113 2114 2115 2116 2117 2118 2119 2120 2121 2122 2123 2124 2125 2126 2127
    if (tickMarkRadius > 0) {
      context.canvas.drawCircle(center, tickMarkRadius, paint);
    }
  }
}

/// The default shape of each [RangeSlider] tick mark.
///
/// Tick marks are only displayed if the slider is discrete, which can be done
/// by setting the [RangeSlider.divisions] to an integer value.
///
/// It paints a solid circle, centered on the track.
/// The color is determined by the [Slider]'s enabled state and track's active
/// states. These colors are defined in:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
2128 2129 2130
/// ![A slider widget, consisting of 5 divisions and showing the round range slider tick mark shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/round_range_slider_tick_mark_shape.png )
///
2131 2132 2133 2134 2135 2136 2137
/// See also:
///
///  * [RangeSlider], which includes tick marks defined by this shape.
///  * [SliderTheme], which can be used to configure the tick mark shape of all
///    sliders in a widget subtree.
class RoundRangeSliderTickMarkShape extends RangeSliderTickMarkShape {
  /// Create a range slider tick mark that draws a circle.
2138 2139 2140
  const RoundRangeSliderTickMarkShape({
    this.tickMarkRadius,
  });
2141 2142 2143

  /// The preferred radius of the round tick mark.
  ///
2144
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2145
  final double? tickMarkRadius;
2146 2147 2148

  @override
  Size getPreferredSize({
2149
    required SliderThemeData sliderTheme,
2150 2151 2152 2153 2154
    bool isEnabled = false,
  }) {
    assert(sliderTheme != null);
    assert(sliderTheme.trackHeight != null);
    assert(isEnabled != null);
2155
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
2156 2157 2158 2159 2160 2161
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2162 2163 2164 2165 2166
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
2167
    bool isEnabled = false,
2168
    required TextDirection textDirection,
2169 2170 2171 2172 2173 2174 2175 2176 2177 2178 2179 2180 2181 2182 2183
  }) {
    assert(context != null);
    assert(center != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledActiveTickMarkColor != null);
    assert(sliderTheme.disabledInactiveTickMarkColor != null);
    assert(sliderTheme.activeTickMarkColor != null);
    assert(sliderTheme.inactiveTickMarkColor != null);
    assert(enableAnimation != null);
    assert(startThumbCenter != null);
    assert(endThumbCenter != null);
    assert(isEnabled != null);
    assert(textDirection != null);

2184
    final bool isBetweenThumbs;
2185 2186 2187 2188 2189 2190 2191 2192
    switch (textDirection) {
      case TextDirection.ltr:
        isBetweenThumbs = startThumbCenter.dx < center.dx && center.dx < endThumbCenter.dx;
        break;
      case TextDirection.rtl:
        isBetweenThumbs = endThumbCenter.dx < center.dx && center.dx < startThumbCenter.dx;
        break;
    }
2193 2194 2195
    final Color? begin = isBetweenThumbs ? sliderTheme.disabledActiveTickMarkColor : sliderTheme.disabledInactiveTickMarkColor;
    final Color? end = isBetweenThumbs ? sliderTheme.activeTickMarkColor : sliderTheme.inactiveTickMarkColor;
    final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
2196 2197 2198 2199 2200 2201 2202 2203 2204 2205 2206 2207 2208 2209 2210 2211 2212 2213 2214 2215 2216 2217

    // The tick marks are tiny circles that are the same height as the track.
    final double tickMarkRadius = getPreferredSize(
      isEnabled: isEnabled,
      sliderTheme: sliderTheme,
    ).width / 2;
    if (tickMarkRadius > 0) {
      context.canvas.drawCircle(center, tickMarkRadius, paint);
    }
  }
}

/// A special version of [SliderTickMarkShape] that has a zero size and paints
/// nothing.
///
/// This class is used to create a special instance of a [SliderTickMarkShape]
/// that will not paint any tick mark shape. A static reference is stored in
/// [SliderTickMarkShape.noTickMark]. When this value is specified for
/// [SliderThemeData.tickMarkShape], the tick mark painting is skipped.
class _EmptySliderTickMarkShape extends SliderTickMarkShape {
  @override
  Size getPreferredSize({
2218 2219
    required SliderThemeData sliderTheme,
    required bool isEnabled,
2220 2221 2222 2223 2224 2225 2226 2227
  }) {
    return Size.zero;
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2228 2229 2230 2231
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
2232
    required bool isEnabled,
2233
    required TextDirection textDirection,
2234 2235 2236 2237 2238 2239 2240 2241 2242 2243 2244 2245
  }) {
    // no-op.
  }
}

/// A special version of [SliderComponentShape] that has a zero size and paints
/// nothing.
///
/// This class is used to create a special instance of a [SliderComponentShape]
/// that will not paint any component shape. A static reference is stored in
/// [SliderTickMarkShape.noThumb] and [SliderTickMarkShape.noOverlay]. When this value
/// is specified for [SliderThemeData.thumbShape], the thumb painting is
2246
/// skipped.  When this value is specified for [SliderThemeData.overlayShape],
2247 2248 2249 2250 2251 2252 2253 2254 2255
/// the overlay painting is skipped.
class _EmptySliderComponentShape extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) => Size.zero;

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2256 2257 2258 2259 2260 2261 2262 2263 2264 2265
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
2266 2267 2268 2269 2270 2271 2272
  }) {
    // no-op.
  }
}

/// The default shape of a [Slider]'s thumb.
///
2273
/// There is a shadow for the resting, pressed, hovered, and focused state.
2274
///
2275 2276 2277
/// ![A slider widget, consisting of 5 divisions and showing the round slider thumb shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/round_slider_thumb_shape.png)
///
2278 2279 2280 2281 2282 2283 2284 2285 2286 2287
/// See also:
///
///  * [Slider], which includes a thumb defined by this shape.
///  * [SliderTheme], which can be used to configure the thumb shape of all
///    sliders in a widget subtree.
class RoundSliderThumbShape extends SliderComponentShape {
  /// Create a slider thumb that draws a circle.
  const RoundSliderThumbShape({
    this.enabledThumbRadius = 10.0,
    this.disabledThumbRadius,
2288 2289
    this.elevation = 1.0,
    this.pressedElevation = 6.0,
2290 2291 2292 2293
  });

  /// The preferred radius of the round thumb shape when the slider is enabled.
  ///
2294
  /// If it is not provided, then the Material Design default of 10 is used.
2295 2296 2297 2298 2299 2300
  final double enabledThumbRadius;

  /// The preferred radius of the round thumb shape when the slider is disabled.
  ///
  /// If no disabledRadius is provided, then it is equal to the
  /// [enabledThumbRadius]
2301
  final double? disabledThumbRadius;
2302 2303 2304 2305 2306 2307 2308 2309 2310 2311 2312 2313 2314 2315 2316 2317 2318 2319 2320
  double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius;

  /// The resting elevation adds shadow to the unpressed thumb.
  ///
  /// The default is 1.
  ///
  /// Use 0 for no shadow. The higher the value, the larger the shadow. For
  /// example, a value of 12 will create a very large shadow.
  ///
  final double elevation;

  /// The pressed elevation adds shadow to the pressed thumb.
  ///
  /// The default is 6.
  ///
  /// Use 0 for no shadow. The higher the value, the larger the shadow. For
  /// example, a value of 12 will create a very large shadow.
  final double pressedElevation;

2321 2322 2323
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(isEnabled == true ? enabledThumbRadius : _disabledThumbRadius);
2324 2325 2326 2327 2328 2329
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2330
    required Animation<double> activationAnimation,
2331
    required Animation<double> enableAnimation,
2332 2333 2334
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
2335
    required SliderThemeData sliderTheme,
2336 2337 2338 2339
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
2340
  }) {
2341 2342 2343
    assert(context != null);
    assert(center != null);
    assert(enableAnimation != null);
2344 2345 2346
    assert(sliderTheme != null);
    assert(sliderTheme.disabledThumbColor != null);
    assert(sliderTheme.thumbColor != null);
2347

2348 2349 2350 2351 2352 2353 2354 2355 2356
    final Canvas canvas = context.canvas;
    final Tween<double> radiusTween = Tween<double>(
      begin: _disabledThumbRadius,
      end: enabledThumbRadius,
    );
    final ColorTween colorTween = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.thumbColor,
    );
2357

2358
    final Color color = colorTween.evaluate(enableAnimation)!;
2359 2360
    final double radius = radiusTween.evaluate(enableAnimation);

2361 2362 2363 2364 2365
    final Tween<double> elevationTween = Tween<double>(
      begin: elevation,
      end: pressedElevation,
    );

2366
    final double evaluatedElevation = elevationTween.evaluate(activationAnimation);
2367 2368
    final Path path = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);
2369 2370 2371 2372 2373 2374 2375 2376 2377 2378 2379 2380 2381

    bool paintShadows = true;
    assert(() {
      if (debugDisableShadows) {
        _debugDrawShadow(canvas, path, evaluatedElevation);
        paintShadows = false;
      }
      return true;
    }());

    if (paintShadows) {
      canvas.drawShadow(path, Colors.black, evaluatedElevation, true);
    }
2382

2383 2384
    canvas.drawCircle(
      center,
2385 2386
      radius,
      Paint()..color = color,
2387
    );
2388 2389 2390
  }
}

2391
/// The default shape of a [RangeSlider]'s thumbs.
2392
///
2393
/// There is a shadow for the resting and pressed state.
2394
///
2395 2396 2397
/// ![A slider widget, consisting of 5 divisions and showing the round range slider thumb shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/round_range_slider_thumb_shape.png)
///
2398 2399
/// See also:
///
2400 2401 2402 2403
///  * [RangeSlider], which includes thumbs defined by this shape.
///  * [SliderTheme], which can be used to configure the thumb shapes of all
///    range sliders in a widget subtree.
class RoundRangeSliderThumbShape extends RangeSliderThumbShape {
2404
  /// Create a slider thumb that draws a circle.
2405
  const RoundRangeSliderThumbShape({
2406
    this.enabledThumbRadius = 10.0,
2407
    this.disabledThumbRadius,
2408 2409
    this.elevation = 1.0,
    this.pressedElevation = 6.0,
2410
  }) : assert(enabledThumbRadius != null);
2411 2412 2413

  /// The preferred radius of the round thumb shape when the slider is enabled.
  ///
2414
  /// If it is not provided, then the Material Design default of 10 is used.
2415
  final double enabledThumbRadius;
2416

2417 2418
  /// The preferred radius of the round thumb shape when the slider is disabled.
  ///
2419
  /// If no disabledRadius is provided, then it is equal to the
2420
  /// [enabledThumbRadius].
2421
  final double? disabledThumbRadius;
2422 2423 2424 2425 2426 2427 2428 2429 2430 2431 2432
  double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius;

  /// The resting elevation adds shadow to the unpressed thumb.
  ///
  /// The default is 1.
  final double elevation;

  /// The pressed elevation adds shadow to the pressed thumb.
  ///
  /// The default is 6.
  final double pressedElevation;
2433 2434 2435

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2436
    return Size.fromRadius(isEnabled == true ? enabledThumbRadius : _disabledThumbRadius);
2437 2438 2439 2440 2441
  }

  @override
  void paint(
    PaintingContext context,
2442
    Offset center, {
2443 2444
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
2445
    bool isDiscrete = false,
2446
    bool isEnabled = false,
2447 2448 2449 2450 2451
    bool? isOnTop,
    required SliderThemeData sliderTheme,
    TextDirection? textDirection,
    Thumb? thumb,
    bool? isPressed,
2452
  }) {
2453 2454 2455 2456
    assert(context != null);
    assert(center != null);
    assert(activationAnimation != null);
    assert(sliderTheme != null);
2457 2458 2459
    assert(sliderTheme.showValueIndicator != null);
    assert(sliderTheme.overlappingShapeStrokeColor != null);
    assert(enableAnimation != null);
2460
    final Canvas canvas = context.canvas;
2461
    final Tween<double> radiusTween = Tween<double>(
2462
      begin: _disabledThumbRadius,
2463
      end: enabledThumbRadius,
2464
    );
2465
    final ColorTween colorTween = ColorTween(
2466 2467 2468
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.thumbColor,
    );
2469
    final double radius = radiusTween.evaluate(enableAnimation);
2470 2471 2472 2473
    final Tween<double> elevationTween = Tween<double>(
      begin: elevation,
      end: pressedElevation,
    );
2474 2475 2476

    // Add a stroke of 1dp around the circle if this thumb would overlap
    // the other thumb.
2477
    if (isOnTop ?? false) {
2478
      final Paint strokePaint = Paint()
2479
        ..color = sliderTheme.overlappingShapeStrokeColor!
2480 2481 2482
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawCircle(center, radius, strokePaint);
2483 2484
    }

2485
    final Color color = colorTween.evaluate(enableAnimation)!;
2486

2487
    final double evaluatedElevation = isPressed! ? elevationTween.evaluate(activationAnimation) : elevation;
2488 2489
    final Path shadowPath = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);
2490 2491 2492 2493 2494 2495 2496 2497 2498 2499 2500 2501 2502

    bool paintShadows = true;
    assert(() {
      if (debugDisableShadows) {
        _debugDrawShadow(canvas, shadowPath, evaluatedElevation);
        paintShadows = false;
      }
      return true;
    }());

    if (paintShadows) {
      canvas.drawShadow(shadowPath, Colors.black, evaluatedElevation, true);
    }
2503

2504
    canvas.drawCircle(
2505
      center,
2506
      radius,
2507
      Paint()..color = color,
2508 2509 2510 2511
    );
  }
}

2512
/// The default shape of a [Slider]'s thumb overlay.
2513 2514 2515 2516 2517 2518 2519 2520
///
/// The shape of the overlay is a circle with the same center as the thumb, but
/// with a larger radius. It animates to full size when the thumb is pressed,
/// and animates back down to size 0 when it is released. It is painted behind
/// the thumb, and is expected to extend beyond the bounds of the thumb so that
/// it is visible.
///
/// The overlay color is defined by [SliderThemeData.overlayColor].
2521 2522 2523
///
/// See also:
///
2524 2525 2526 2527 2528
///  * [Slider], which includes an overlay defined by this shape.
///  * [SliderTheme], which can be used to configure the overlay shape of all
///    sliders in a widget subtree.
class RoundSliderOverlayShape extends SliderComponentShape {
  /// Create a slider thumb overlay that draws a circle.
2529
  const RoundSliderOverlayShape({ this.overlayRadius = 24.0 });
2530

2531 2532
  /// The preferred radius of the round thumb shape when enabled.
  ///
2533 2534
  /// If it is not provided, then half of the [SliderThemeData.trackHeight] is
  /// used.
2535
  final double overlayRadius;
2536 2537 2538

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2539
    return Size.fromRadius(overlayRadius);
2540 2541 2542 2543 2544 2545
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2546 2547
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
2548
    required bool isDiscrete,
2549 2550 2551 2552 2553
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
2554 2555
    required double textScaleFactor,
    required Size sizeWithOverflow,
2556
  }) {
2557 2558 2559 2560 2561 2562 2563 2564 2565
    assert(context != null);
    assert(center != null);
    assert(activationAnimation != null);
    assert(enableAnimation != null);
    assert(labelPainter != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
    assert(textDirection != null);
    assert(value != null);
2566

2567 2568 2569
    final Canvas canvas = context.canvas;
    final Tween<double> radiusTween = Tween<double>(
      begin: 0.0,
2570
      end: overlayRadius,
2571 2572 2573 2574 2575
    );

    canvas.drawCircle(
      center,
      radiusTween.evaluate(activationAnimation),
2576
      Paint()..color = sliderTheme.overlayColor!,
2577 2578 2579 2580
    );
  }
}

2581
/// The default shape of a [Slider]'s value indicator.
2582
///
2583 2584 2585
/// ![A slider widget, consisting of 5 divisions and showing the rectangular slider value indicator shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rectangular_slider_value_indicator_shape.png)
///
2586 2587 2588 2589 2590
/// See also:
///
///  * [Slider], which includes a value indicator defined by this shape.
///  * [SliderTheme], which can be used to configure the slider value indicator
///    of all sliders in a widget subtree.
2591 2592 2593 2594 2595 2596 2597 2598
class RectangularSliderValueIndicatorShape extends SliderComponentShape {
  /// Create a slider value indicator that resembles a rectangular tooltip.
  const RectangularSliderValueIndicatorShape();

  static const _RectangularSliderValueIndicatorPathPainter _pathPainter = _RectangularSliderValueIndicatorPathPainter();

  @override
  Size getPreferredSize(
2599 2600 2601 2602
    bool isEnabled,
    bool isDiscrete, {
    TextPainter? labelPainter,
    double? textScaleFactor,
2603
  }) {
2604 2605 2606
    assert(labelPainter != null);
    assert(textScaleFactor != null && textScaleFactor >= 0);
    return _pathPainter.getPreferredSize(labelPainter!, textScaleFactor!);
2607 2608 2609 2610 2611 2612
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2613 2614 2615 2616
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
2617
    required RenderBox parentBox,
2618 2619 2620 2621 2622
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
2623 2624
  }) {
    final Canvas canvas = context.canvas;
2625
    final double scale = activationAnimation.value;
2626 2627 2628 2629 2630
    _pathPainter.paint(
      parentBox: parentBox,
      canvas: canvas,
      center: center,
      scale: scale,
2631 2632 2633
      labelPainter: labelPainter,
      textScaleFactor: textScaleFactor,
      sizeWithOverflow: sizeWithOverflow,
2634 2635
      backgroundPaintColor: sliderTheme.valueIndicatorColor!,
    );
2636 2637 2638 2639 2640
  }
}

/// The default shape of a [RangeSlider]'s value indicators.
///
2641 2642 2643
/// ![A slider widget, consisting of 5 divisions and showing the rectangular range slider value indicator shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rectangular_range_slider_value_indicator_shape.png)
///
2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656 2657 2658 2659
/// See also:
///
///  * [RangeSlider], which includes value indicators defined by this shape.
///  * [SliderTheme], which can be used to configure the range slider value
///    indicator of all sliders in a widget subtree.
class RectangularRangeSliderValueIndicatorShape
    extends RangeSliderValueIndicatorShape {
  /// Create a range slider value indicator that resembles a rectangular tooltip.
  const RectangularRangeSliderValueIndicatorShape();

  static const _RectangularSliderValueIndicatorPathPainter _pathPainter = _RectangularSliderValueIndicatorPathPainter();

  @override
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
2660 2661
    required TextPainter labelPainter,
    required double textScaleFactor,
2662 2663 2664
  }) {
    assert(labelPainter != null);
    assert(textScaleFactor != null && textScaleFactor >= 0);
2665
    return _pathPainter.getPreferredSize(labelPainter, textScaleFactor);
2666 2667 2668 2669
  }

  @override
  double getHorizontalShift({
2670 2671 2672 2673 2674 2675
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2676 2677
  }) {
    return _pathPainter.getHorizontalShift(
2678 2679 2680 2681 2682 2683
      parentBox: parentBox!,
      center: center!,
      labelPainter: labelPainter!,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
      scale: activationAnimation!.value,
2684 2685 2686 2687 2688 2689 2690
    );
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2691 2692 2693 2694 2695 2696 2697 2698 2699 2700 2701 2702
    Animation<double>? activationAnimation,
    Animation<double>? enableAnimation,
    bool? isDiscrete,
    bool? isOnTop,
    TextPainter? labelPainter,
    double? textScaleFactor,
    Size? sizeWithOverflow,
    RenderBox? parentBox,
    SliderThemeData? sliderTheme,
    TextDirection? textDirection,
    double? value,
    Thumb? thumb,
2703 2704
  }) {
    final Canvas canvas = context.canvas;
2705
    final double scale = activationAnimation!.value;
2706
    _pathPainter.paint(
2707
      parentBox: parentBox!,
2708 2709 2710
      canvas: canvas,
      center: center,
      scale: scale,
2711 2712 2713 2714 2715
      labelPainter: labelPainter!,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
      backgroundPaintColor: sliderTheme!.valueIndicatorColor!,
      strokePaintColor: isOnTop! ? sliderTheme.overlappingShapeStrokeColor : null,
2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737 2738 2739 2740 2741 2742
    );
  }
}

class _RectangularSliderValueIndicatorPathPainter {
  const _RectangularSliderValueIndicatorPathPainter();

  static const double _triangleHeight = 8.0;
  static const double _labelPadding = 16.0;
  static const double _preferredHeight = 32.0;
  static const double _minLabelWidth = 16.0;
  static const double _bottomTipYOffset = 14.0;
  static const double _preferredHalfHeight = _preferredHeight / 2;
  static const double _upperRectRadius = 4;

  Size getPreferredSize(
    TextPainter labelPainter,
    double textScaleFactor,
  ) {
    assert(labelPainter != null);
    return Size(
      _upperRectangleWidth(labelPainter, 1, textScaleFactor),
      labelPainter.height + _labelPadding,
    );
  }

  double getHorizontalShift({
2743 2744 2745 2746 2747 2748
    required RenderBox parentBox,
    required Offset center,
    required TextPainter labelPainter,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required double scale,
2749 2750
  }) {
    assert(!sizeWithOverflow.isEmpty);
2751

2752 2753
    const double edgePadding = 8.0;
    final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);
2754 2755 2756
    /// Value indicator draws on the Overlay and by using the global Offset
    /// we are making sure we use the bounds of the Overlay instead of the Slider.
    final Offset globalCenter = parentBox.localToGlobal(center);
2757 2758 2759 2760 2761

    // The rectangle must be shifted towards the center so that it minimizes the
    // chance of it rendering outside the bounds of the render box. If the shift
    // is negative, then the lobe is shifted from right to left, and if it is
    // positive, then the lobe is shifted from left to right.
2762 2763
    final double overflowLeft = math.max(0, rectangleWidth / 2 - globalCenter.dx + edgePadding);
    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - globalCenter.dx - edgePadding));
2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779

    if (rectangleWidth < sizeWithOverflow.width) {
      return overflowLeft - overflowRight;
    } else if (overflowLeft - overflowRight > 0) {
      return overflowLeft - (edgePadding * textScaleFactor);
    } else {
      return -overflowRight + (edgePadding * textScaleFactor);
    }
  }

  double _upperRectangleWidth(TextPainter labelPainter, double scale, double textScaleFactor) {
    final double unscaledWidth = math.max(_minLabelWidth * textScaleFactor, labelPainter.width) + _labelPadding * 2;
    return unscaledWidth * scale;
  }

  void paint({
2780 2781 2782 2783 2784 2785 2786 2787 2788
    required RenderBox parentBox,
    required Canvas canvas,
    required Offset center,
    required double scale,
    required TextPainter labelPainter,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required Color backgroundPaintColor,
    Color? strokePaintColor,
2789 2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849
  }) {
    if (scale == 0.0) {
      // Zero scale essentially means "do not draw anything", so it's safe to just return.
      return;
    }
    assert(!sizeWithOverflow.isEmpty);

    final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);
    final double horizontalShift = getHorizontalShift(
      parentBox: parentBox,
      center: center,
      labelPainter: labelPainter,
      textScaleFactor: textScaleFactor,
      sizeWithOverflow: sizeWithOverflow,
      scale: scale,
    );

    final double rectHeight = labelPainter.height + _labelPadding;
    final Rect upperRect = Rect.fromLTWH(
      -rectangleWidth / 2 + horizontalShift,
      -_triangleHeight - rectHeight,
      rectangleWidth,
      rectHeight,
    );

    final Path trianglePath = Path()
      ..lineTo(-_triangleHeight, -_triangleHeight)
      ..lineTo(_triangleHeight, -_triangleHeight)
      ..close();
    final Paint fillPaint = Paint()..color = backgroundPaintColor;
    final RRect upperRRect = RRect.fromRectAndRadius(upperRect, const Radius.circular(_upperRectRadius));
    trianglePath.addRRect(upperRRect);

    canvas.save();
    // Prepare the canvas for the base of the tooltip, which is relative to the
    // center of the thumb.
    canvas.translate(center.dx, center.dy - _bottomTipYOffset);
    canvas.scale(scale, scale);
    if (strokePaintColor != null) {
      final Paint strokePaint = Paint()
        ..color = strokePaintColor
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(trianglePath, strokePaint);
    }
    canvas.drawPath(trianglePath, fillPaint);

    // The label text is centered within the value indicator.
    final double bottomTipToUpperRectTranslateY = -_preferredHalfHeight / 2 - upperRect.height;
    canvas.translate(0, bottomTipToUpperRectTranslateY);
    final Offset boxCenter = Offset(horizontalShift, upperRect.height / 2);
    final Offset halfLabelPainterOffset = Offset(labelPainter.width / 2, labelPainter.height / 2);
    final Offset labelOffset = boxCenter - halfLabelPainterOffset;
    labelPainter.paint(canvas, labelOffset);
    canvas.restore();
  }
}

/// A variant shape of a [Slider]'s value indicator . The value indicator is in
/// the shape of an upside-down pear.
///
2850 2851 2852
/// ![A slider widget, consisting of 5 divisions and showing the paddle slider value indicator shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/paddle_slider_value_indicator_shape.png)
///
2853 2854 2855 2856 2857
/// See also:
///
///  * [Slider], which includes a value indicator defined by this shape.
///  * [SliderTheme], which can be used to configure the slider value indicator
///    of all sliders in a widget subtree.
2858
class PaddleSliderValueIndicatorShape extends SliderComponentShape {
2859
  /// Create a slider value indicator in the shape of an upside-down pear.
2860 2861
  const PaddleSliderValueIndicatorShape();

2862
  static const _PaddleSliderValueIndicatorPathPainter _pathPainter = _PaddleSliderValueIndicatorPathPainter();
2863 2864

  @override
2865 2866 2867 2868 2869 2870
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
    TextPainter? labelPainter,
    double? textScaleFactor,
  }) {
2871
    assert(labelPainter != null);
2872
    assert(textScaleFactor != null && textScaleFactor >= 0);
2873
    return _pathPainter.getPreferredSize(labelPainter!, textScaleFactor!);
2874 2875 2876 2877 2878 2879
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2880 2881 2882 2883 2884 2885 2886 2887 2888 2889
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
2890 2891 2892 2893 2894 2895 2896 2897
  }) {
    assert(context != null);
    assert(center != null);
    assert(activationAnimation != null);
    assert(enableAnimation != null);
    assert(labelPainter != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
2898
    assert(!sizeWithOverflow.isEmpty);
2899
    final ColorTween enableColor = ColorTween(
2900
      begin: sliderTheme.disabledThumbColor,
2901 2902
      end: sliderTheme.valueIndicatorColor,
    );
2903
    _pathPainter.paint(
2904 2905
      context.canvas,
      center,
2906 2907 2908 2909 2910
      Paint()..color = enableColor.evaluate(enableAnimation)!,
      activationAnimation.value,
      labelPainter,
      textScaleFactor,
      sizeWithOverflow,
2911 2912 2913 2914 2915
      null,
    );
  }
}

2916 2917
/// A variant shape of a [RangeSlider]'s value indicators. The value indicator
/// is in the shape of an upside-down pear.
2918
///
2919 2920 2921
/// ![A slider widget, consisting of 5 divisions and showing the paddle range slider value indicator shape.]
/// (https://flutter.github.io/assets-for-api-docs/assets/material/paddle_range_slider_value_indicator_shape.png)
///
2922 2923 2924 2925 2926 2927 2928 2929 2930
/// See also:
///
///  * [RangeSlider], which includes value indicators defined by this shape.
///  * [SliderTheme], which can be used to configure the range slider value
///    indicator of all sliders in a widget subtree.
class PaddleRangeSliderValueIndicatorShape extends RangeSliderValueIndicatorShape {
  /// Create a slider value indicator in the shape of an upside-down pear.
  const PaddleRangeSliderValueIndicatorShape();

2931
  static const _PaddleSliderValueIndicatorPathPainter _pathPainter = _PaddleSliderValueIndicatorPathPainter();
2932 2933

  @override
2934 2935 2936
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
2937 2938
    required TextPainter labelPainter,
    required double textScaleFactor,
2939
  }) {
2940
    assert(labelPainter != null);
2941
    assert(textScaleFactor != null && textScaleFactor >= 0);
2942
    return _pathPainter.getPreferredSize(labelPainter, textScaleFactor);
2943 2944
  }

2945 2946
  @override
  double getHorizontalShift({
2947 2948 2949 2950 2951 2952
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2953 2954
  }) {
    return _pathPainter.getHorizontalShift(
2955 2956 2957 2958 2959
      center: center!,
      labelPainter: labelPainter!,
      scale: activationAnimation!.value,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
2960 2961 2962
    );
  }

2963 2964 2965 2966
  @override
  void paint(
    PaintingContext context,
    Offset center, {
2967 2968 2969
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    bool? isDiscrete,
2970
    bool isOnTop = false,
2971 2972 2973 2974 2975 2976 2977 2978
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    TextDirection? textDirection,
    Thumb? thumb,
    double? value,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2979 2980 2981 2982 2983 2984 2985 2986
  }) {
    assert(context != null);
    assert(center != null);
    assert(activationAnimation != null);
    assert(enableAnimation != null);
    assert(labelPainter != null);
    assert(parentBox != null);
    assert(sliderTheme != null);
2987
    assert(!sizeWithOverflow!.isEmpty);
2988 2989 2990 2991 2992
    final ColorTween enableColor = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.valueIndicatorColor,
    );
    // Add a stroke of 1dp around the top paddle.
2993
    _pathPainter.paint(
2994 2995
      context.canvas,
      center,
2996
      Paint()..color = enableColor.evaluate(enableAnimation)!,
2997 2998
      activationAnimation.value,
      labelPainter,
2999 3000
      textScaleFactor!,
      sizeWithOverflow!,
3001 3002 3003 3004 3005
      isOnTop ? sliderTheme.overlappingShapeStrokeColor : null,
    );
  }
}

3006 3007
class _PaddleSliderValueIndicatorPathPainter {
  const _PaddleSliderValueIndicatorPathPainter();
3008

3009 3010 3011 3012 3013 3014 3015 3016
  // These constants define the shape of the default value indicator.
  // The value indicator changes shape based on the size of
  // the label: The top lobe spreads horizontally, and the
  // top arc on the neck moves down to keep it merging smoothly
  // with the top lobe as it expands.

  // Radius of the top lobe of the value indicator.
  static const double _topLobeRadius = 16.0;
3017
  static const double _minLabelWidth = 16.0;
3018
  // Radius of the bottom lobe of the value indicator.
3019
  static const double _bottomLobeRadius = 10.0;
3020 3021
  static const double _labelPadding = 8.0;
  static const double _distanceBetweenTopBottomCenters = 40.0;
3022
  static const double _middleNeckWidth = 3.0;
3023 3024 3025 3026 3027 3028
  static const double _bottomNeckRadius = 4.5;
  // The base of the triangle between the top lobe center and the centers of
  // the two top neck arcs.
  static const double _neckTriangleBase = _topNeckRadius + _middleNeckWidth / 2;
  static const double _rightBottomNeckCenterX = _middleNeckWidth / 2 + _bottomNeckRadius;
  static const double _rightBottomNeckAngleStart = math.pi;
3029
  static const Offset _topLobeCenter = Offset(0.0, -_distanceBetweenTopBottomCenters);
3030
  static const double _topNeckRadius = 13.0;
3031 3032 3033 3034 3035 3036 3037 3038
  // The length of the hypotenuse of the triangle formed by the center
  // of the left top lobe arc and the center of the top left neck arc.
  // Used to calculate the position of the center of the arc.
  static const double _neckTriangleHypotenuse = _topLobeRadius + _topNeckRadius;
  // Some convenience values to help readability.
  static const double _twoSeventyDegrees = 3.0 * math.pi / 2.0;
  static const double _ninetyDegrees = math.pi / 2.0;
  static const double _thirtyDegrees = math.pi / 6.0;
3039
  static const double _preferredHeight = _distanceBetweenTopBottomCenters + _topLobeRadius + _bottomLobeRadius;
3040 3041 3042 3043 3044
  // Set to true if you want a rectangle to be drawn around the label bubble.
  // This helps with building tests that check that the label draws in the right
  // place (because it prints the rect in the failed test output). It should not
  // be checked in while set to "true".
  static const bool _debuggingLabelLocation = false;
3045

3046 3047
  Size getPreferredSize(
    TextPainter labelPainter,
3048
    double textScaleFactor,
3049 3050
  ) {
    assert(labelPainter != null);
3051 3052 3053
    assert(textScaleFactor != null && textScaleFactor >= 0);
    final double width = math.max(_minLabelWidth * textScaleFactor, labelPainter.width) + _labelPadding * 2 * textScaleFactor;
    return Size(width, _preferredHeight * textScaleFactor);
3054
  }
3055 3056 3057 3058

  // Adds an arc to the path that has the attributes passed in. This is
  // a convenience to make adding arcs have less boilerplate.
  static void _addArc(Path path, Offset center, double radius, double startAngle, double endAngle) {
3059
    assert(center.isFinite);
3060
    final Rect arcRect = Rect.fromCircle(center: center, radius: radius);
3061 3062 3063
    path.arcTo(arcRect, startAngle, endAngle - startAngle, false);
  }

3064
  double getHorizontalShift({
3065 3066 3067 3068 3069
    required Offset center,
    required TextPainter labelPainter,
    required double scale,
    required double textScaleFactor,
    required Size sizeWithOverflow,
3070
  }) {
3071
    assert(!sizeWithOverflow.isEmpty);
3072 3073 3074 3075 3076
    final double inverseTextScale = textScaleFactor != 0 ? 1.0 / textScaleFactor : 0.0;
    final double labelHalfWidth = labelPainter.width / 2.0;
    final double halfWidthNeeded = math.max(
      0.0,
      inverseTextScale * labelHalfWidth - (_topLobeRadius - _labelPadding),
3077
    );
3078
    final double shift = _getIdealOffset(halfWidthNeeded, textScaleFactor * scale, center, sizeWithOverflow.width);
3079
    return shift * textScaleFactor;
3080 3081
  }

3082 3083
  // Determines the "best" offset to keep the bubble within the slider. The
  // calling code will bound that with the available movement in the paddle shape.
3084 3085 3086 3087
  double _getIdealOffset(
    double halfWidthNeeded,
    double scale,
    Offset center,
3088
    double widthWithOverflow,
3089
  ) {
3090
    const double edgeMargin = 8.0;
3091
    final Rect topLobeRect = Rect.fromLTWH(
3092 3093 3094 3095 3096 3097 3098 3099 3100 3101
      -_topLobeRadius - halfWidthNeeded,
      -_topLobeRadius - _distanceBetweenTopBottomCenters,
      2.0 * (_topLobeRadius + halfWidthNeeded),
      2.0 * _topLobeRadius,
    );
    // We can just multiply by scale instead of a transform, since we're scaling
    // around (0, 0).
    final Offset topLeft = (topLobeRect.topLeft * scale) + center;
    final Offset bottomRight = (topLobeRect.bottomRight * scale) + center;
    double shift = 0.0;
3102

3103 3104
    if (topLeft.dx < edgeMargin) {
      shift = edgeMargin - topLeft.dx;
3105
    }
3106

3107
    final double endGlobal = widthWithOverflow;
3108 3109
    if (bottomRight.dx > endGlobal - edgeMargin) {
      shift = endGlobal - edgeMargin - bottomRight.dx;
3110
    }
3111

3112
    shift = scale == 0.0 ? 0.0 : shift / scale;
3113 3114 3115 3116 3117 3118 3119
    if (shift < 0.0) {
      // Shifting to the left.
      shift = math.max(shift, -halfWidthNeeded);
    } else {
      // Shifting to the right.
      shift = math.min(shift, halfWidthNeeded);
    }
3120 3121 3122
    return shift;
  }

3123
  void paint(
3124 3125 3126 3127 3128
    Canvas canvas,
    Offset center,
    Paint paint,
    double scale,
    TextPainter labelPainter,
3129 3130
    double textScaleFactor,
    Size sizeWithOverflow,
3131
    Color? strokePaintColor,
3132
  ) {
3133 3134 3135 3136 3137
    if (scale == 0.0) {
      // Zero scale essentially means "do not draw anything", so it's safe to just return. Otherwise,
      // our math below will attempt to divide by zero and send needless NaNs to the engine.
      return;
    }
3138
    assert(!sizeWithOverflow.isEmpty);
3139

3140
    // The entire value indicator should scale with the size of the label,
3141
    // to keep it large enough to encompass the label text.
3142 3143
    final double overallScale = scale * textScaleFactor;
    final double inverseTextScale = textScaleFactor != 0 ? 1.0 / textScaleFactor : 0.0;
3144 3145
    final double labelHalfWidth = labelPainter.width / 2.0;

3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160 3161 3162 3163 3164 3165 3166 3167 3168 3169 3170 3171 3172 3173 3174 3175
    canvas.save();
    canvas.translate(center.dx, center.dy);
    canvas.scale(overallScale, overallScale);

    final double bottomNeckTriangleHypotenuse = _bottomNeckRadius + _bottomLobeRadius / overallScale;
    final double rightBottomNeckCenterY = -math.sqrt(math.pow(bottomNeckTriangleHypotenuse, 2) - math.pow(_rightBottomNeckCenterX, 2));
    final double rightBottomNeckAngleEnd = math.pi + math.atan(rightBottomNeckCenterY / _rightBottomNeckCenterX);
    final Path path = Path()..moveTo(_middleNeckWidth / 2, rightBottomNeckCenterY);
    _addArc(
      path,
      Offset(_rightBottomNeckCenterX, rightBottomNeckCenterY),
      _bottomNeckRadius,
      _rightBottomNeckAngleStart,
      rightBottomNeckAngleEnd,
    );
    _addArc(
      path,
      Offset.zero,
      _bottomLobeRadius / overallScale,
      rightBottomNeckAngleEnd - math.pi,
      2 * math.pi - rightBottomNeckAngleEnd,
    );
    _addArc(
      path,
      Offset(-_rightBottomNeckCenterX, rightBottomNeckCenterY),
      _bottomNeckRadius,
      math.pi - rightBottomNeckAngleEnd,
      0,
    );

3176 3177
    // This is the needed extra width for the label.  It is only positive when
    // the label exceeds the minimum size contained by the round top lobe.
3178 3179 3180 3181 3182
    final double halfWidthNeeded = math.max(
      0.0,
      inverseTextScale * labelHalfWidth - (_topLobeRadius - _labelPadding),
    );

3183
    final double shift = _getIdealOffset( halfWidthNeeded, overallScale, center, sizeWithOverflow.width);
3184 3185
    final double leftWidthNeeded = halfWidthNeeded - shift;
    final double rightWidthNeeded = halfWidthNeeded + shift;
3186

3187 3188
    // The parameter that describes how far along the transition from round to
    // stretched we are.
3189 3190
    final double leftAmount = math.max(0.0, math.min(1.0, leftWidthNeeded / _neckTriangleBase));
    final double rightAmount = math.max(0.0, math.min(1.0, rightWidthNeeded / _neckTriangleBase));
3191
    // The angle between the top neck arc's center and the top lobe's center
3192 3193
    // and vertical. The base amount is chosen so that the neck is smooth,
    // even when the lobe is shifted due to its size.
3194 3195
    final double leftTheta = (1.0 - leftAmount) * _thirtyDegrees;
    final double rightTheta = (1.0 - rightAmount) * _thirtyDegrees;
3196
    // The center of the top left neck arc.
3197 3198
    final Offset leftTopNeckCenter = Offset(
      -_neckTriangleBase,
3199 3200
      _topLobeCenter.dy + math.cos(leftTheta) * _neckTriangleHypotenuse,
    );
3201
    final Offset neckRightCenter = Offset(
3202
      _neckTriangleBase,
3203 3204 3205 3206
      _topLobeCenter.dy + math.cos(rightTheta) * _neckTriangleHypotenuse,
    );
    final double leftNeckArcAngle = _ninetyDegrees - leftTheta;
    final double rightNeckArcAngle = math.pi + _ninetyDegrees - rightTheta;
3207 3208 3209
    // The distance between the end of the bottom neck arc and the beginning of
    // the top neck arc. We use this to shrink/expand it based on the scale
    // factor of the value indicator.
3210
    final double neckStretchBaseline = math.max(0.0, rightBottomNeckCenterY - math.max(leftTopNeckCenter.dy, neckRightCenter.dy));
3211
    final double t = math.pow(inverseTextScale, 3.0) as double;
3212
    final double stretch = clampDouble(neckStretchBaseline * t, 0.0, 10.0 * neckStretchBaseline);
3213
    final Offset neckStretch = Offset(0.0, neckStretchBaseline - stretch);
3214

3215 3216 3217 3218 3219 3220 3221 3222 3223 3224 3225 3226 3227 3228 3229 3230
    assert(!_debuggingLabelLocation || () {
      final Offset leftCenter = _topLobeCenter - Offset(leftWidthNeeded, 0.0) + neckStretch;
      final Offset rightCenter = _topLobeCenter + Offset(rightWidthNeeded, 0.0) + neckStretch;
      final Rect valueRect = Rect.fromLTRB(
        leftCenter.dx - _topLobeRadius,
        leftCenter.dy - _topLobeRadius,
        rightCenter.dx + _topLobeRadius,
        rightCenter.dy + _topLobeRadius,
      );
      final Paint outlinePaint = Paint()
        ..color = const Color(0xffff0000)
        ..style = PaintingStyle.stroke
        ..strokeWidth = 1.0;
      canvas.drawRect(valueRect, outlinePaint);
      return true;
    }());
3231

3232 3233
    _addArc(
      path,
3234
      leftTopNeckCenter + neckStretch,
3235 3236
      _topNeckRadius,
      0.0,
3237 3238 3239 3240
      -leftNeckArcAngle,
    );
    _addArc(
      path,
3241
      _topLobeCenter - Offset(leftWidthNeeded, 0.0) + neckStretch,
3242 3243 3244 3245 3246 3247
      _topLobeRadius,
      _ninetyDegrees + leftTheta,
      _twoSeventyDegrees,
    );
    _addArc(
      path,
3248
      _topLobeCenter + Offset(rightWidthNeeded, 0.0) + neckStretch,
3249 3250 3251
      _topLobeRadius,
      _twoSeventyDegrees,
      _twoSeventyDegrees + math.pi - rightTheta,
3252 3253 3254
    );
    _addArc(
      path,
3255
      neckRightCenter + neckStretch,
3256
      _topNeckRadius,
3257
      rightNeckArcAngle,
3258 3259
      math.pi,
    );
3260 3261 3262 3263 3264 3265 3266 3267 3268

    if (strokePaintColor != null) {
      final Paint strokePaint = Paint()
        ..color = strokePaintColor
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawPath(path, strokePaint);
    }

3269 3270 3271 3272
    canvas.drawPath(path, paint);

    // Draw the label.
    canvas.save();
3273
    canvas.translate(shift, -_distanceBetweenTopBottomCenters + neckStretch.dy);
3274
    canvas.scale(inverseTextScale, inverseTextScale);
3275
    labelPainter.paint(canvas, Offset.zero - Offset(labelHalfWidth, labelPainter.height / 2.0));
3276 3277 3278
    canvas.restore();
    canvas.restore();
  }
3279
}
3280

3281
/// A callback that formats a numeric value from a [Slider] or [RangeSlider] widget.
3282 3283 3284
///
/// See also:
///
3285
///  * [Slider.semanticFormatterCallback], which shows an example use case.
3286
///  * [RangeSlider.semanticFormatterCallback], which shows an example use case.
3287
typedef SemanticFormatterCallback = String Function(double value);
3288 3289 3290 3291 3292 3293 3294

/// Decides which thumbs (if any) should be selected.
///
/// The default finds the closest thumb, but if the thumbs are close to each
/// other, it waits for movement defined by [dx] to determine the selected
/// thumb.
///
3295
/// Override [SliderThemeData.thumbSelector] for custom thumb selection.
3296
typedef RangeThumbSelector = Thumb? Function(
3297 3298 3299 3300 3301 3302 3303
  TextDirection textDirection,
  RangeValues values,
  double tapValue,
  Size thumbSize,
  Size trackSize,
  double dx,
);
3304 3305 3306 3307

/// Object for representing range slider thumb values.
///
/// This object is passed into [RangeSlider.values] to set its values, and it
3308
/// is emitted in [RangeSlider.onChanged], [RangeSlider.onChangeStart], and
3309
/// [RangeSlider.onChangeEnd] when the values change.
3310
@immutable
3311 3312 3313 3314 3315 3316 3317 3318 3319 3320 3321 3322 3323 3324 3325 3326 3327 3328
class RangeValues {
  /// Creates pair of start and end values.
  const RangeValues(this.start, this.end);

  /// The value of the start thumb.
  ///
  /// For LTR text direction, the start is the left thumb, and for RTL text
  /// direction, the start is the right thumb.
  final double start;

  /// The value of the end thumb.
  ///
  /// For LTR text direction, the end is the right thumb, and for RTL text
  /// direction, the end is the left thumb.
  final double end;

  @override
  bool operator ==(Object other) {
3329
    if (other.runtimeType != runtimeType) {
3330
      return false;
3331
    }
3332 3333 3334
    return other is RangeValues
        && other.start == start
        && other.end == end;
3335 3336 3337
  }

  @override
3338
  int get hashCode => Object.hash(start, end);
3339 3340 3341

  @override
  String toString() {
3342
    return '${objectRuntimeType(this, 'RangeValues')}($start, $end)';
3343 3344 3345 3346 3347 3348
  }
}

/// Object for setting range slider label values that appear in the value
/// indicator for each thumb.
///
3349
/// Used in combination with [SliderThemeData.showValueIndicator] to display
3350
/// labels above the thumbs.
3351
@immutable
3352 3353 3354 3355 3356 3357 3358 3359 3360 3361 3362 3363 3364 3365 3366 3367 3368 3369
class RangeLabels {
  /// Creates pair of start and end labels.
  const RangeLabels(this.start, this.end);

  /// The label of the start thumb.
  ///
  /// For LTR text direction, the start is the left thumb, and for RTL text
  /// direction, the start is the right thumb.
  final String start;

  /// The label of the end thumb.
  ///
  /// For LTR text direction, the end is the right thumb, and for RTL text
  /// direction, the end is the left thumb.
  final String end;

  @override
  bool operator ==(Object other) {
3370
    if (other.runtimeType != runtimeType) {
3371
      return false;
3372
    }
3373 3374 3375
    return other is RangeLabels
        && other.start == start
        && other.end == end;
3376 3377 3378
  }

  @override
3379
  int get hashCode => Object.hash(start, end);
3380 3381 3382

  @override
  String toString() {
3383
    return '${objectRuntimeType(this, 'RangeLabels')}($start, $end)';
3384
  }
3385
}
3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397

void _debugDrawShadow(Canvas canvas, Path path, double elevation) {
  if (elevation > 0.0) {
    canvas.drawPath(
      path,
      Paint()
        ..color = Colors.black
        ..style = PaintingStyle.stroke
        ..strokeWidth = elevation * 2.0,
    );
  }
}