slider_theme.dart 139 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
import 'slider.dart';
15 16
import 'theme.dart';

17 18 19 20 21 22 23 24 25 26 27 28
/// 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,
29
/// and the [SliderTickMarkShape.getPreferredSize] of the tick mark shape.
30 31 32 33 34
///
/// See also:
///
///  * [SliderThemeData], which describes the actual configuration of a slider
///    theme.
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
///  * [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.
50
class SliderTheme extends InheritedTheme {
51 52 53 54
  /// Applies the given theme [data] to [child].
  ///
  /// The [data] and [child] arguments must not be null.
  const SliderTheme({
55
    super.key,
56
    required this.data,
57
    required super.child,
58
  });
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
    this.trackHeight,
    this.activeTrackColor,
    this.inactiveTrackColor,
269
    this.secondaryActiveTrackColor,
270 271
    this.disabledActiveTrackColor,
    this.disabledInactiveTrackColor,
272
    this.disabledSecondaryActiveTrackColor,
273 274 275 276 277
    this.activeTickMarkColor,
    this.inactiveTickMarkColor,
    this.disabledActiveTickMarkColor,
    this.disabledInactiveTickMarkColor,
    this.thumbColor,
278
    this.overlappingShapeStrokeColor,
279 280 281
    this.disabledThumbColor,
    this.overlayColor,
    this.valueIndicatorColor,
282
    this.overlayShape,
283 284
    this.tickMarkShape,
    this.thumbShape,
285
    this.trackShape,
286
    this.valueIndicatorShape,
287 288 289 290
    this.rangeTickMarkShape,
    this.rangeThumbShape,
    this.rangeTrackShape,
    this.rangeValueIndicatorShape,
291 292
    this.showValueIndicator,
    this.valueIndicatorTextStyle,
293 294
    this.minThumbSeparation,
    this.thumbSelector,
295
    this.mouseCursor,
296
    this.allowedInteraction,
297
  });
298 299 300 301 302 303 304 305 306 307

  /// 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].
308
  factory SliderThemeData.fromPrimaryColors({
309 310 311 312
    required Color primaryColor,
    required Color primaryColorDark,
    required Color primaryColorLight,
    required TextStyle valueIndicatorTextStyle,
313 314 315 316
  }) {

    // These are Material Design defaults, and are used to derive
    // component Colors (with opacity) from base colors.
317 318
    const int activeTrackAlpha = 0xff;
    const int inactiveTrackAlpha = 0x3d; // 24% opacity
319
    const int secondaryActiveTrackAlpha = 0x8a; // 54% opacity
320 321
    const int disabledActiveTrackAlpha = 0x52; // 32% opacity
    const int disabledInactiveTrackAlpha = 0x1f; // 12% opacity
322
    const int disabledSecondaryActiveTrackAlpha = 0x1f; // 12% opacity
323 324 325 326 327 328
    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
329
    const int overlayAlpha = 0x1f; // 12% opacity
330 331
    const int valueIndicatorAlpha = 0xff;

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

363
  /// The height of the [Slider] track.
364
  final double? trackHeight;
365

366
  /// The color of the [Slider] track between the [Slider.min] position and the
367
  /// current thumb position.
368
  final Color? activeTrackColor;
369

370
  /// The color of the [Slider] track between the current thumb position and the
371
  /// [Slider.max] position.
372
  final Color? inactiveTrackColor;
373

374 375 376 377
  /// The color of the [Slider] track between the current thumb position and the
  /// [Slider.secondaryTrackValue] position.
  final Color? secondaryActiveTrackColor;

378
  /// The color of the [Slider] track between the [Slider.min] position and the
379
  /// current thumb position when the [Slider] is disabled.
380
  final Color? disabledActiveTrackColor;
381

382 383 384 385
  /// The color of the [Slider] track between the current thumb position and the
  /// [Slider.secondaryTrackValue] position when the [Slider] is disabled.
  final Color? disabledSecondaryActiveTrackColor;

386
  /// The color of the [Slider] track between the current thumb position and the
387
  /// [Slider.max] position when the [Slider] is disabled.
388
  final Color? disabledInactiveTrackColor;
389

390
  /// The color of the track's tick marks that are drawn between the [Slider.min]
391
  /// position and the current thumb position.
392
  final Color? activeTickMarkColor;
393

394
  /// The color of the track's tick marks that are drawn between the current
395
  /// thumb position and the [Slider.max] position.
396
  final Color? inactiveTickMarkColor;
397

398
  /// The color of the track's tick marks that are drawn between the [Slider.min]
399
  /// position and the current thumb position when the [Slider] is disabled.
400
  final Color? disabledActiveTickMarkColor;
401

402
  /// The color of the track's tick marks that are drawn between the current
403 404
  /// thumb position and the [Slider.max] position when the [Slider] is
  /// disabled.
405
  final Color? disabledInactiveTickMarkColor;
406 407

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

410 411 412
  /// 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.
413
  final Color? overlappingShapeStrokeColor;
414

415 416
  /// The color given to the [thumbShape] to draw itself with when the
  /// [Slider] is disabled.
417
  final Color? disabledThumbColor;
418

419 420
  /// The color of the overlay drawn around the slider thumb when it is
  /// pressed, focused, or hovered.
421 422
  ///
  /// This is typically a semi-transparent color.
423
  final Color? overlayColor;
424 425

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

428

429
  /// The shape that will be used to draw the [Slider]'s overlay.
430
  ///
431 432
  /// Both the [overlayColor] and a non default [overlayShape] may be specified.
  /// The default [overlayShape] refers to the [overlayColor].
433
  ///
434
  /// The default value is [RoundSliderOverlayShape].
435
  final SliderComponentShape? overlayShape;
436 437 438 439 440 441 442 443 444

  /// 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].
  ///
445
  /// See also:
446
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
447
  ///  * [RoundRangeSliderTickMarkShape], which is the default tick mark
448
  ///    shape for the range slider.
449
  final SliderTickMarkShape? tickMarkShape;
450 451

  /// The shape that will be used to draw the [Slider]'s thumb.
452 453 454 455 456
  ///
  /// The default value is [RoundSliderThumbShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
457
  ///  * [RoundRangeSliderThumbShape], which is the default thumb shape for
458
  ///    the [RangeSlider].
459
  final SliderComponentShape? thumbShape;
460

461 462 463 464 465 466 467 468 469 470 471
  /// 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
472
  ///  * [RoundedRectRangeSliderTrackShape], which is the default track
473
  ///    shape for the [RangeSlider].
474
  final SliderTrackShape? trackShape;
475

476
  /// The shape that will be used to draw the [Slider]'s value
477
  /// indicator.
478 479 480 481 482
  ///
  /// The default value is [PaddleSliderValueIndicatorShape].
  ///
  /// See also:
  ///
Shi-Hao Hong's avatar
Shi-Hao Hong committed
483
  ///  * [PaddleRangeSliderValueIndicatorShape], which is the default value
484
  ///    indicator shape for the [RangeSlider].
485
  final SliderComponentShape? valueIndicatorShape;
486

487 488 489 490 491 492 493 494 495 496
  /// 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
497
  ///  * [RoundSliderTickMarkShape], which is the default tick mark shape
498
  ///    for the [Slider].
499
  final RangeSliderTickMarkShape? rangeTickMarkShape;
500 501 502 503 504 505 506 507 508 509 510

  /// 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
511
  ///  * [RoundSliderThumbShape], which is the default thumb shape for the
512
  ///    [Slider].
513
  final RangeSliderThumbShape? rangeThumbShape;
514 515 516

  /// The shape that will be used to draw the [RangeSlider]'s track.
  ///
517
  /// The [SliderTrackShape.getPreferredRect] method is used to map
518 519 520 521 522 523 524 525
  /// 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
526
  ///  * [RoundedRectSliderTrackShape], which is the default track
527
  ///    shape for the [Slider].
528
  final RangeSliderTrackShape? rangeTrackShape;
529 530 531 532 533 534 535 536 537 538 539 540

  /// 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
541
  ///  * [PaddleSliderValueIndicatorShape], which is the default value
542
  ///    indicator shape for the [Slider].
543
  final RangeSliderValueIndicatorShape? rangeValueIndicatorShape;
544

545 546
  /// Whether the value indicator should be shown for different types of
  /// sliders.
547 548 549 550
  ///
  /// By default, [showValueIndicator] is set to
  /// [ShowValueIndicator.onlyForDiscrete]. The value indicator is only shown
  /// when the thumb is being touched.
551
  final ShowValueIndicator? showValueIndicator;
552

553
  /// The text style for the text on the value indicator.
554
  final TextStyle? valueIndicatorTextStyle;
555

556 557 558 559 560
  /// 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
561
  /// real values, rather than logical pixels, the values can be restricted by
562
  /// the parent.
563
  final double? minThumbSeparation;
564 565 566 567 568 569 570 571 572 573

  /// 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.
574
  final RangeThumbSelector? thumbSelector;
575

576 577 578 579 580
  /// {@macro flutter.material.slider.mouseCursor}
  ///
  /// If specified, overrides the default value of [Slider.mouseCursor].
  final MaterialStateProperty<MouseCursor?>? mouseCursor;

581 582 583 584 585
  /// Allowed way for the user to interact with the [Slider].
  ///
  /// If specified, overrides the default value of [Slider.allowedInteraction].
  final SliderInteraction? allowedInteraction;

586 587
  /// Creates a copy of this object but with the given fields replaced with the
  /// new values.
588
  SliderThemeData copyWith({
589 590 591
    double? trackHeight,
    Color? activeTrackColor,
    Color? inactiveTrackColor,
592
    Color? secondaryActiveTrackColor,
593 594
    Color? disabledActiveTrackColor,
    Color? disabledInactiveTrackColor,
595
    Color? disabledSecondaryActiveTrackColor,
596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617
    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,
618
    MaterialStateProperty<MouseCursor?>? mouseCursor,
619
    SliderInteraction? allowedInteraction,
620
  }) {
621
    return SliderThemeData(
622
      trackHeight: trackHeight ?? this.trackHeight,
623 624
      activeTrackColor: activeTrackColor ?? this.activeTrackColor,
      inactiveTrackColor: inactiveTrackColor ?? this.inactiveTrackColor,
625
      secondaryActiveTrackColor: secondaryActiveTrackColor ?? this.secondaryActiveTrackColor,
626 627
      disabledActiveTrackColor: disabledActiveTrackColor ?? this.disabledActiveTrackColor,
      disabledInactiveTrackColor: disabledInactiveTrackColor ?? this.disabledInactiveTrackColor,
628
      disabledSecondaryActiveTrackColor: disabledSecondaryActiveTrackColor ?? this.disabledSecondaryActiveTrackColor,
629 630 631
      activeTickMarkColor: activeTickMarkColor ?? this.activeTickMarkColor,
      inactiveTickMarkColor: inactiveTickMarkColor ?? this.inactiveTickMarkColor,
      disabledActiveTickMarkColor: disabledActiveTickMarkColor ?? this.disabledActiveTickMarkColor,
632
      disabledInactiveTickMarkColor: disabledInactiveTickMarkColor ?? this.disabledInactiveTickMarkColor,
633
      thumbColor: thumbColor ?? this.thumbColor,
634
      overlappingShapeStrokeColor: overlappingShapeStrokeColor ?? this.overlappingShapeStrokeColor,
635 636 637
      disabledThumbColor: disabledThumbColor ?? this.disabledThumbColor,
      overlayColor: overlayColor ?? this.overlayColor,
      valueIndicatorColor: valueIndicatorColor ?? this.valueIndicatorColor,
638
      overlayShape: overlayShape ?? this.overlayShape,
639
      tickMarkShape: tickMarkShape ?? this.tickMarkShape,
640
      thumbShape: thumbShape ?? this.thumbShape,
641
      trackShape: trackShape ?? this.trackShape,
642
      valueIndicatorShape: valueIndicatorShape ?? this.valueIndicatorShape,
643 644 645 646
      rangeTickMarkShape: rangeTickMarkShape ?? this.rangeTickMarkShape,
      rangeThumbShape: rangeThumbShape ?? this.rangeThumbShape,
      rangeTrackShape: rangeTrackShape ?? this.rangeTrackShape,
      rangeValueIndicatorShape: rangeValueIndicatorShape ?? this.rangeValueIndicatorShape,
647
      showValueIndicator: showValueIndicator ?? this.showValueIndicator,
648
      valueIndicatorTextStyle: valueIndicatorTextStyle ?? this.valueIndicatorTextStyle,
649 650
      minThumbSeparation: minThumbSeparation ?? this.minThumbSeparation,
      thumbSelector: thumbSelector ?? this.thumbSelector,
651
      mouseCursor: mouseCursor ?? this.mouseCursor,
652
      allowedInteraction: allowedInteraction ?? this.allowedInteraction,
653 654 655 656 657 658 659
    );
  }

  /// Linearly interpolate between two slider themes.
  ///
  /// The arguments must not be null.
  ///
660
  /// {@macro dart.ui.shadow.lerp}
661
  static SliderThemeData lerp(SliderThemeData a, SliderThemeData b, double t) {
662 663 664
    if (identical(a, b)) {
      return a;
    }
665
    return SliderThemeData(
666
      trackHeight: lerpDouble(a.trackHeight, b.trackHeight, t),
667 668
      activeTrackColor: Color.lerp(a.activeTrackColor, b.activeTrackColor, t),
      inactiveTrackColor: Color.lerp(a.inactiveTrackColor, b.inactiveTrackColor, t),
669
      secondaryActiveTrackColor: Color.lerp(a.secondaryActiveTrackColor, b.secondaryActiveTrackColor, t),
670 671
      disabledActiveTrackColor: Color.lerp(a.disabledActiveTrackColor, b.disabledActiveTrackColor, t),
      disabledInactiveTrackColor: Color.lerp(a.disabledInactiveTrackColor, b.disabledInactiveTrackColor, t),
672
      disabledSecondaryActiveTrackColor: Color.lerp(a.disabledSecondaryActiveTrackColor, b.disabledSecondaryActiveTrackColor, t),
673 674
      activeTickMarkColor: Color.lerp(a.activeTickMarkColor, b.activeTickMarkColor, t),
      inactiveTickMarkColor: Color.lerp(a.inactiveTickMarkColor, b.inactiveTickMarkColor, t),
675 676
      disabledActiveTickMarkColor: Color.lerp(a.disabledActiveTickMarkColor, b.disabledActiveTickMarkColor, t),
      disabledInactiveTickMarkColor: Color.lerp(a.disabledInactiveTickMarkColor, b.disabledInactiveTickMarkColor, t),
677
      thumbColor: Color.lerp(a.thumbColor, b.thumbColor, t),
678
      overlappingShapeStrokeColor: Color.lerp(a.overlappingShapeStrokeColor, b.overlappingShapeStrokeColor, t),
679 680 681
      disabledThumbColor: Color.lerp(a.disabledThumbColor, b.disabledThumbColor, t),
      overlayColor: Color.lerp(a.overlayColor, b.overlayColor, t),
      valueIndicatorColor: Color.lerp(a.valueIndicatorColor, b.valueIndicatorColor, t),
682
      overlayShape: t < 0.5 ? a.overlayShape : b.overlayShape,
683
      tickMarkShape: t < 0.5 ? a.tickMarkShape : b.tickMarkShape,
684
      thumbShape: t < 0.5 ? a.thumbShape : b.thumbShape,
685
      trackShape: t < 0.5 ? a.trackShape : b.trackShape,
686
      valueIndicatorShape: t < 0.5 ? a.valueIndicatorShape : b.valueIndicatorShape,
687 688 689 690
      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,
691
      showValueIndicator: t < 0.5 ? a.showValueIndicator : b.showValueIndicator,
692
      valueIndicatorTextStyle: TextStyle.lerp(a.valueIndicatorTextStyle, b.valueIndicatorTextStyle, t),
693 694
      minThumbSeparation: lerpDouble(a.minThumbSeparation, b.minThumbSeparation, t),
      thumbSelector: t < 0.5 ? a.thumbSelector : b.thumbSelector,
695
      mouseCursor: t < 0.5 ? a.mouseCursor : b.mouseCursor,
696
      allowedInteraction: t < 0.5 ? a.allowedInteraction : b.allowedInteraction,
697 698 699 700
    );
  }

  @override
701 702 703 704
  int get hashCode => Object.hash(
    trackHeight,
    activeTrackColor,
    inactiveTrackColor,
705
    secondaryActiveTrackColor,
706 707
    disabledActiveTrackColor,
    disabledInactiveTrackColor,
708
    disabledSecondaryActiveTrackColor,
709 710 711 712 713 714 715 716 717 718 719 720 721
    activeTickMarkColor,
    inactiveTickMarkColor,
    disabledActiveTickMarkColor,
    disabledInactiveTickMarkColor,
    thumbColor,
    overlappingShapeStrokeColor,
    disabledThumbColor,
    overlayColor,
    valueIndicatorColor,
    overlayShape,
    tickMarkShape,
    thumbShape,
    Object.hash(
722 723
      trackShape,
      valueIndicatorShape,
724 725 726 727
      rangeTickMarkShape,
      rangeThumbShape,
      rangeTrackShape,
      rangeValueIndicatorShape,
728
      showValueIndicator,
729
      valueIndicatorTextStyle,
730 731
      minThumbSeparation,
      thumbSelector,
732
      mouseCursor,
733
      allowedInteraction,
734 735
    ),
  );
736 737 738

  @override
  bool operator ==(Object other) {
739 740 741
    if (identical(this, other)) {
      return true;
    }
742 743 744
    if (other.runtimeType != runtimeType) {
      return false;
    }
745 746 747 748
    return other is SliderThemeData
        && other.trackHeight == trackHeight
        && other.activeTrackColor == activeTrackColor
        && other.inactiveTrackColor == inactiveTrackColor
749
        && other.secondaryActiveTrackColor == secondaryActiveTrackColor
750 751
        && other.disabledActiveTrackColor == disabledActiveTrackColor
        && other.disabledInactiveTrackColor == disabledInactiveTrackColor
752
        && other.disabledSecondaryActiveTrackColor == disabledSecondaryActiveTrackColor
753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773
        && 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
774
        && other.thumbSelector == thumbSelector
775 776
        && other.mouseCursor == mouseCursor
        && other.allowedInteraction == allowedInteraction;
777 778 779
  }

  @override
780 781
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
782
    const SliderThemeData defaultData = SliderThemeData();
783
    properties.add(DoubleProperty('trackHeight', trackHeight, defaultValue: defaultData.trackHeight));
784 785
    properties.add(ColorProperty('activeTrackColor', activeTrackColor, defaultValue: defaultData.activeTrackColor));
    properties.add(ColorProperty('inactiveTrackColor', inactiveTrackColor, defaultValue: defaultData.inactiveTrackColor));
786
    properties.add(ColorProperty('secondaryActiveTrackColor', secondaryActiveTrackColor, defaultValue: defaultData.secondaryActiveTrackColor));
787 788
    properties.add(ColorProperty('disabledActiveTrackColor', disabledActiveTrackColor, defaultValue: defaultData.disabledActiveTrackColor));
    properties.add(ColorProperty('disabledInactiveTrackColor', disabledInactiveTrackColor, defaultValue: defaultData.disabledInactiveTrackColor));
789
    properties.add(ColorProperty('disabledSecondaryActiveTrackColor', disabledSecondaryActiveTrackColor, defaultValue: defaultData.disabledSecondaryActiveTrackColor));
790 791 792 793 794 795 796 797 798
    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));
799 800 801 802 803 804 805 806 807
    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));
808 809
    properties.add(EnumProperty<ShowValueIndicator>('showValueIndicator', showValueIndicator, defaultValue: defaultData.showValueIndicator));
    properties.add(DiagnosticsProperty<TextStyle>('valueIndicatorTextStyle', valueIndicatorTextStyle, defaultValue: defaultData.valueIndicatorTextStyle));
810
    properties.add(DoubleProperty('minThumbSeparation', minThumbSeparation, defaultValue: defaultData.minThumbSeparation));
811
    properties.add(DiagnosticsProperty<RangeThumbSelector>('thumbSelector', thumbSelector, defaultValue: defaultData.thumbSelector));
812
    properties.add(DiagnosticsProperty<MaterialStateProperty<MouseCursor?>>('mouseCursor', mouseCursor, defaultValue: defaultData.mouseCursor));
813
    properties.add(EnumProperty<SliderInteraction>('allowedInteraction', allowedInteraction, defaultValue: defaultData.allowedInteraction));
814 815 816
  }
}

817
/// Base class for slider thumb, thumb overlay, and value indicator shapes.
818
///
819
/// Create a subclass of this if you would like a custom shape.
820
///
821 822 823 824 825 826 827 828
/// 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].
829 830 831
///
/// See also:
///
832 833 834
///  * [RoundSliderThumbShape], which is the default [Slider]'s thumb shape that
///    paints a solid circle.
///  * [RoundSliderOverlayShape], which is the default [Slider] and
835
///    [RangeSlider]'s overlay shape that paints a transparent circle.
836 837
///  * [PaddleSliderValueIndicatorShape], which is the default [Slider]'s value
///    indicator shape that paints a custom path with text in it.
838 839
abstract class SliderComponentShape {
  /// This abstract const constructor enables subclasses to provide
840
  /// const constructors so that they can be used in const expressions.
841
  const SliderComponentShape();
842

843 844 845 846
  /// 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.
847
  ///
848
  /// {@template flutter.material.SliderComponentShape.paint.context}
849 850 851
  /// The `context` argument is the same as the one that includes the [Slider]'s
  /// render box.
  /// {@endtemplate}
852
  ///
853
  /// {@template flutter.material.SliderComponentShape.paint.center}
854 855 856
  /// 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}
857
  ///
858 859
  /// The `activationAnimation` argument is an animation triggered when the user
  /// begins to interact with the slider. It reverses when the user stops interacting
860
  /// with the slider.
861
  ///
862
  /// {@template flutter.material.SliderComponentShape.paint.enableAnimation}
863
  /// The `enableAnimation` argument is an animation triggered when the [Slider]
864 865 866
  /// 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.
867
  /// {@endtemplate}
868
  ///
869
  /// {@template flutter.material.SliderComponentShape.paint.isDiscrete}
870 871 872
  /// 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}
873
  ///
874 875 876 877
  /// 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].
878
  ///
879
  /// {@template flutter.material.SliderComponentShape.paint.parentBox}
880 881 882
  /// The `parentBox` argument is the [RenderBox] of the [Slider]. Its attributes,
  /// such as size, can be used to assist in painting this shape.
  /// {@endtemplate}
883
  ///
884
  /// {@template flutter.material.SliderComponentShape.paint.sliderTheme}
885 886 887
  /// the `sliderTheme` argument is the theme assigned to the [Slider] that this
  /// shape belongs to.
  /// {@endtemplate}
888
  ///
889 890 891
  /// 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.
892
  ///
893 894
  /// The `value` argument is the current parametric value (from 0.0 to 1.0) of
  /// the slider.
895
  ///
896
  /// {@template flutter.material.SliderComponentShape.paint.textScaleFactor}
897 898 899 900
  /// 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].
901 902
  /// {@endtemplate}
  ///
903
  /// {@template flutter.material.SliderComponentShape.paint.sizeWithOverflow}
904 905 906 907 908
  /// 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.
909
  /// {@endtemplate}
910 911
  void paint(
    PaintingContext context,
912
    Offset center, {
913 914
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
915
    required bool isDiscrete,
916 917 918 919 920
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
921 922
    required double textScaleFactor,
    required Size sizeWithOverflow,
923
  });
924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939

  /// 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();
940 941
}

942
/// Base class for [Slider] tick mark shapes.
943
///
944
/// Create a subclass of this if you would like a custom slider tick mark shape.
945
///
946 947 948
/// The tick mark painting can be skipped by specifying [noTickMark] for
/// [SliderThemeData.tickMarkShape].
///
949 950
/// See also:
///
951 952
///  * [RoundSliderTickMarkShape], which is the default [Slider]'s tick mark
///    shape that paints a solid circle.
953 954 955 956 957
///  * [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.
958
abstract class SliderTickMarkShape {
959
  /// This abstract const constructor enables subclasses to provide
960 961 962 963 964 965 966
  /// 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.
  ///
967
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
968
  ///
969
  /// {@template flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
970 971
  /// The `isEnabled` argument is false when [Slider.onChanged] is null and true
  /// otherwise. When true, the slider will respond to input.
972
  /// {@endtemplate}
973
  Size getPreferredSize({
974
    required SliderThemeData sliderTheme,
975
    required bool isEnabled,
976 977 978 979
  });

  /// Paints the slider track.
  ///
980
  /// {@macro flutter.material.SliderComponentShape.paint.context}
981
  ///
982
  /// {@macro flutter.material.SliderComponentShape.paint.center}
983
  ///
984
  /// {@macro flutter.material.SliderComponentShape.paint.parentBox}
985
  ///
986
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
987
  ///
988
  /// {@macro flutter.material.SliderComponentShape.paint.enableAnimation}
989
  ///
990
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
991
  ///
992 993 994 995 996 997 998
  /// 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.
999 1000 1001
  void paint(
    PaintingContext context,
    Offset center, {
1002 1003 1004 1005
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
1006
    required bool isEnabled,
1007
    required TextDirection textDirection,
1008
  });
1009 1010 1011 1012 1013

  /// Special instance of [SliderTickMarkShape] to skip the tick mark painting.
  ///
  /// See also:
  ///
1014 1015
  ///  * [SliderThemeData.tickMarkShape], which is the shape that the [Slider]
  ///    uses when painting tick marks.
1016 1017 1018
  static final SliderTickMarkShape noTickMark = _EmptySliderTickMarkShape();
}

1019
/// Base class for slider track shapes.
1020
///
1021 1022 1023 1024 1025 1026 1027 1028 1029
/// 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:
///
1030 1031
///  * [RoundedRectSliderTrackShape] for the default [Slider]'s track shape that
///    paints a stadium-like track.
1032 1033 1034 1035 1036
///  * [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.
1037 1038 1039 1040 1041 1042 1043 1044 1045 1046
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.
  ///
1047
  /// The `parentBox` argument can be used to help determine the preferredRect relative to
1048 1049
  /// attributes of the render box of the slider itself, such as size.
  ///
1050
  /// The `offset` argument is relative to the caller's bounding box. It can be used to
1051 1052
  /// convert gesture coordinates from global to slider-relative coordinates.
  ///
1053
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
1054
  ///
1055
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
1056
  ///
1057
  /// {@macro flutter.material.SliderComponentShape.paint.isDiscrete}
1058
  Rect getPreferredRect({
1059
    required RenderBox parentBox,
1060
    Offset offset = Offset.zero,
1061
    required SliderThemeData sliderTheme,
1062
    bool isEnabled,
1063 1064
    bool isDiscrete,
  });
1065

1066 1067
  /// Paints the track shape based on the state passed to it.
  ///
1068
  /// {@macro flutter.material.SliderComponentShape.paint.context}
1069
  ///
1070 1071 1072
  /// 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].
1073
  ///
1074
  /// {@macro flutter.material.SliderComponentShape.paint.parentBox}
1075
  ///
1076
  /// {@macro flutter.material.SliderComponentShape.paint.sliderTheme}
1077
  ///
1078
  /// {@macro flutter.material.SliderComponentShape.paint.enableAnimation}
1079
  ///
1080 1081 1082
  /// 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.
1083
  ///
1084 1085 1086 1087 1088
  /// The `secondaryOffset` argument is the offset of the secondary value
  /// relative to the origin of the [PaintingContext.canvas].
  ///
  /// If not null, the track is divided into 3 segments.
  ///
1089
  /// {@macro flutter.material.SliderTickMarkShape.getPreferredSize.isEnabled}
1090
  ///
1091
  /// {@macro flutter.material.SliderComponentShape.paint.isDiscrete}
1092
  ///
1093 1094
  /// The `textDirection` argument can be used to determine how the track
  /// segments are painted depending on whether they are active or not.
1095
  ///
1096
  /// {@template flutter.material.SliderTrackShape.paint.trackSegment}
1097 1098 1099 1100 1101 1102
  /// 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}
1103 1104
  void paint(
    PaintingContext context,
1105
    Offset offset, {
1106 1107 1108 1109
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
1110
    Offset? secondaryOffset,
1111
    bool isEnabled,
1112
    bool isDiscrete,
1113
    required TextDirection textDirection,
1114
  });
1115 1116
}

1117
/// Base class for [RangeSlider] thumb shapes.
1118
///
1119 1120
/// See also:
///
1121 1122
///  * [RoundRangeSliderThumbShape] for the default [RangeSlider]'s thumb shape
///    that paints a solid circle.
1123 1124 1125 1126 1127 1128 1129 1130 1131
///  * [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.
1132 1133
abstract class RangeSliderThumbShape {
  /// This abstract const constructor enables subclasses to provide
1134
  /// const constructors so that they can be used in const expressions.
1135
  const RangeSliderThumbShape();
1136 1137

  /// Returns the preferred size of the shape, based on the given conditions.
1138
  ///
1139
  /// {@template flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1140 1141 1142
  /// 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}
1143
  ///
1144
  /// {@template flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1145 1146
  /// The `isEnabled` argument is false when [RangeSlider.onChanged] is null and
  /// true otherwise. When true, the slider will respond to input.
1147
  /// {@endtemplate}
1148 1149
  Size getPreferredSize(bool isEnabled, bool isDiscrete);

1150
  /// Paints the thumb shape based on the state passed to it.
1151
  ///
1152
  /// {@template flutter.material.RangeSliderThumbShape.paint.context}
1153 1154
  /// The `context` argument represents the [RangeSlider]'s render box.
  /// {@endtemplate}
1155
  ///
1156
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1157
  ///
1158
  /// {@template flutter.material.RangeSliderThumbShape.paint.activationAnimation}
1159 1160 1161 1162
  /// 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}
1163
  ///
1164
  /// {@template flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1165
  /// The `enableAnimation` argument is an animation triggered when the
1166 1167 1168 1169
  /// [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.
1170
  /// {@endtemplate}
1171
  ///
1172
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1173
  ///
1174
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1175
  ///
1176 1177 1178
  /// 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.
1179
  ///
1180
  /// {@template flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1181 1182 1183
  /// The `sliderTheme` argument is the theme assigned to the [RangeSlider] that
  /// this shape belongs to.
  /// {@endtemplate}
1184
  ///
1185 1186 1187
  /// 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.
1188
  ///
1189
  /// {@template flutter.material.RangeSliderThumbShape.paint.thumb}
1190 1191 1192
  /// The `thumb` argument is the specifier for which of the two thumbs this
  /// method should paint (start or end).
  /// {@endtemplate}
1193
  ///
1194 1195 1196
  /// The `isPressed` argument can be used to give the selected thumb
  /// additional selected or pressed state visual feedback, such as a larger
  /// shadow.
1197 1198 1199
  void paint(
    PaintingContext context,
    Offset center, {
1200 1201
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
1202 1203 1204
    bool isDiscrete,
    bool isEnabled,
    bool isOnTop,
1205
    TextDirection textDirection,
1206
    required SliderThemeData sliderTheme,
1207
    Thumb thumb,
1208
    bool isPressed,
1209 1210 1211 1212 1213 1214 1215
  });
}

/// Base class for [RangeSlider] value indicator shapes.
///
/// See also:
///
1216 1217
///  * [PaddleRangeSliderValueIndicatorShape] for the default [RangeSlider]'s
///    value indicator shape that paints a custom path with text in it.
1218 1219 1220 1221 1222 1223 1224 1225 1226
///  * [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.
1227 1228 1229 1230 1231 1232 1233
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.
  ///
1234
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1235
  ///
1236
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1237
  ///
1238 1239
  /// The `labelPainter` argument helps determine the width of the shape. It is
  /// variable width because it is derived from a formatted string.
1240
  ///
1241
  /// {@macro flutter.material.SliderComponentShape.paint.textScaleFactor}
1242 1243 1244
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
1245 1246
    required TextPainter labelPainter,
    required double textScaleFactor,
1247
  });
1248

1249 1250 1251 1252 1253
  /// 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({
1254 1255 1256 1257 1258 1259
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
1260 1261 1262 1263
  }) {
    return 0;
  }

1264 1265
  /// Paints the value indicator shape based on the state passed to it.
  ///
1266
  /// {@macro flutter.material.RangeSliderThumbShape.paint.context}
1267
  ///
1268
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1269
  ///
1270
  /// {@macro flutter.material.RangeSliderThumbShape.paint.activationAnimation}
1271
  ///
1272
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1273
  ///
1274
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1275
  ///
1276
  /// The `isOnTop` argument is the top-most value indicator between the two value
1277 1278 1279 1280
  /// 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.
  ///
1281
  /// {@macro flutter.material.SliderComponentShape.paint.textScaleFactor}
1282
  ///
1283
  /// {@macro flutter.material.SliderComponentShape.paint.sizeWithOverflow}
1284
  ///
1285
  /// {@template flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1286 1287 1288
  /// The `parentBox` argument is the [RenderBox] of the [RangeSlider]. Its
  /// attributes, such as size, can be used to assist in painting this shape.
  /// {@endtemplate}
1289
  ///
1290
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1291
  ///
1292 1293 1294 1295
  /// 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.
1296
  ///
1297 1298
  /// The `value` argument is the current parametric value (from 0.0 to 1.0) of
  /// the slider.
1299
  ///
1300
  /// {@macro flutter.material.RangeSliderThumbShape.paint.thumb}
1301 1302
  void paint(
    PaintingContext context,
1303
    Offset center, {
1304 1305
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
1306
    bool isDiscrete,
1307
    bool isOnTop,
1308
    required TextPainter labelPainter,
1309 1310
    double textScaleFactor,
    Size sizeWithOverflow,
1311 1312
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
1313 1314
    TextDirection textDirection,
    double value,
1315
    Thumb thumb,
1316
  });
1317
}
1318

1319 1320 1321 1322 1323 1324 1325
/// 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:
///
1326 1327
///  * [RoundRangeSliderTickMarkShape] for the default [RangeSlider]'s tick mark
///    shape that paints a solid circle.
1328 1329 1330 1331 1332 1333 1334 1335 1336
///  * [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.
1337 1338 1339 1340 1341 1342
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.
1343
  ///
1344
  /// It is used to help position the tick marks within the slider.
1345
  ///
1346
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1347
  ///
1348
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1349
  Size getPreferredSize({
1350
    required SliderThemeData sliderTheme,
1351 1352
    bool isEnabled,
  });
1353

1354
  /// Paints the slider track.
1355
  ///
1356
  /// {@macro flutter.material.RangeSliderThumbShape.paint.context}
1357
  ///
1358
  /// {@macro flutter.material.SliderComponentShape.paint.center}
1359
  ///
1360
  /// {@macro flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1361
  ///
1362
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1363
  ///
1364
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1365
  ///
1366
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1367
  ///
1368 1369
  /// 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.
1370
  ///
1371
  /// {@template flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1372 1373 1374 1375 1376
  /// 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}
1377 1378 1379
  void paint(
    PaintingContext context,
    Offset center, {
1380 1381 1382 1383 1384
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1385
    bool isEnabled,
1386
    required TextDirection textDirection,
1387
  });
1388 1389
}

1390
/// Base class for [RangeSlider] track shapes.
1391
///
1392 1393 1394 1395 1396 1397 1398 1399 1400
/// 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:
///
1401 1402
///  * [RoundedRectRangeSliderTrackShape] for the default [RangeSlider]'s track
///    shape that paints a stadium-like track.
1403 1404 1405 1406 1407 1408 1409 1410 1411
///  * [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.
1412 1413 1414 1415
abstract class RangeSliderTrackShape {
  /// This abstract const constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const RangeSliderTrackShape();
1416

1417 1418 1419 1420 1421 1422
  /// 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.
  ///
1423 1424 1425
  /// 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.
1426
  ///
1427 1428 1429
  /// 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.
1430
  ///
1431
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1432
  ///
1433
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1434
  ///
1435
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1436
  Rect getPreferredRect({
1437
    required RenderBox parentBox,
1438
    Offset offset = Offset.zero,
1439
    required SliderThemeData sliderTheme,
1440 1441 1442 1443 1444 1445
    bool isEnabled,
    bool isDiscrete,
  });

  /// Paints the track shape based on the state passed to it.
  ///
1446
  /// {@macro flutter.material.SliderComponentShape.paint.context}
1447 1448 1449 1450
  ///
  /// 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].
1451
  ///
1452
  /// {@macro flutter.material.RangeSliderValueIndicatorShape.paint.parentBox}
1453
  ///
1454
  /// {@macro flutter.material.RangeSliderThumbShape.paint.sliderTheme}
1455
  ///
1456
  /// {@macro flutter.material.RangeSliderThumbShape.paint.enableAnimation}
1457
  ///
1458 1459 1460
  /// 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.
1461
  ///
1462 1463 1464
  /// 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.
1465
  ///
1466
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isEnabled}
1467
  ///
1468
  /// {@macro flutter.material.RangeSliderThumbShape.getPreferredSize.isDiscrete}
1469
  ///
1470 1471 1472
  /// 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.
1473
  ///
1474
  /// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1475 1476
  void paint(
    PaintingContext context,
1477
    Offset offset, {
1478 1479 1480 1481 1482 1483 1484 1485
    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,
1486
  });
1487 1488
}

1489 1490 1491
/// Base track shape that provides an implementation of [getPreferredRect] for
/// default sizing.
///
1492 1493 1494 1495
/// 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].
///
1496 1497
/// See also:
///
1498 1499 1500 1501
///  * [RectangularSliderTrackShape], which is a track shape with sharp
///    rectangular edges
///  * [RoundedRectSliderTrackShape], which is a track shape with round
///    stadium-like edges.
1502
mixin BaseSliderTrackShape {
1503 1504 1505
  /// Returns a rect that represents the track bounds that fits within the
  /// [Slider].
  ///
1506
  /// The width is the width of the [Slider] or [RangeSlider], but padded by
1507
  /// the max of the overlay and thumb radius. The height is defined by the
1508 1509 1510 1511 1512
  /// [SliderThemeData.trackHeight].
  ///
  /// The [Rect] is centered both horizontally and vertically within the slider
  /// bounds.
  Rect getPreferredRect({
1513
    required RenderBox parentBox,
1514
    Offset offset = Offset.zero,
1515
    required SliderThemeData sliderTheme,
1516 1517 1518
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
1519 1520 1521
    final double thumbWidth = sliderTheme.thumbShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight!;
1522 1523 1524
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);

1525
    final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
1526
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
1527 1528 1529 1530
    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);
1531 1532
  }
}
1533

1534
/// A [Slider] track that's a simple rectangle.
1535
///
1536
/// It paints a solid colored rectangle, vertically centered in the
1537
/// `parentBox`. The track rectangle extends to the bounds of the `parentBox`,
1538 1539
/// but is padded by the [RoundSliderOverlayShape] radius. The height is defined
/// by the [SliderThemeData.trackHeight]. The color is determined by the
1540
/// [Slider]'s enabled state and the track segment's active state which are
1541
/// defined by:
1542 1543 1544 1545 1546
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
///
1547
/// {@macro flutter.material.SliderTrackShape.paint.trackSegment}
1548
///
1549 1550 1551
/// ![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)
///
1552 1553 1554 1555 1556
/// 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.
1557 1558
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
1559 1560 1561
///  * [RoundedRectSliderTrackShape], for a similar track with rounded edges.
class RectangularSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
  /// Creates a slider track that draws 2 rectangles.
1562
  const RectangularSliderTrackShape();
1563 1564 1565 1566 1567

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1568 1569 1570 1571 1572
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
1573
    Offset? secondaryOffset,
1574 1575 1576
    bool isDiscrete = false,
    bool isEnabled = false,
  }) {
1577 1578 1579 1580 1581
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.thumbShape != null);
1582 1583 1584
    // 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.
1585
    if (sliderTheme.trackHeight! <= 0) {
1586 1587 1588 1589 1590
      return;
    }

    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1591 1592
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1593 1594
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1595 1596
    final Paint leftTrackPaint;
    final Paint rightTrackPaint;
1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
    }

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

1614
    final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, thumbCenter.dx, trackRect.bottom);
1615
    if (!leftTrackSegment.isEmpty) {
1616
      context.canvas.drawRect(leftTrackSegment, leftTrackPaint);
1617
    }
1618
    final Rect rightTrackSegment = Rect.fromLTRB(thumbCenter.dx, trackRect.top, trackRect.right, trackRect.bottom);
1619
    if (!rightTrackSegment.isEmpty) {
1620
      context.canvas.drawRect(rightTrackSegment, rightTrackPaint);
1621
    }
1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640

    final bool showSecondaryTrack = (secondaryOffset != null) &&
        ((textDirection == TextDirection.ltr)
            ? (secondaryOffset.dx > thumbCenter.dx)
            : (secondaryOffset.dx < thumbCenter.dx));

    if (showSecondaryTrack) {
      final ColorTween secondaryTrackColorTween = ColorTween(begin: sliderTheme.disabledSecondaryActiveTrackColor, end: sliderTheme.secondaryActiveTrackColor);
      final Paint secondaryTrackPaint = Paint()..color = secondaryTrackColorTween.evaluate(enableAnimation)!;
      final Rect secondaryTrackSegment = Rect.fromLTRB(
        (textDirection == TextDirection.ltr) ? thumbCenter.dx : secondaryOffset.dx,
        trackRect.top,
        (textDirection == TextDirection.ltr) ? secondaryOffset.dx : thumbCenter.dx,
        trackRect.bottom,
      );
      if (!secondaryTrackSegment.isEmpty) {
        context.canvas.drawRect(secondaryTrackSegment, secondaryTrackPaint);
      }
    }
1641 1642 1643 1644 1645 1646
  }
}

/// The default shape of a [Slider]'s track.
///
/// It paints a solid colored rectangle with rounded edges, vertically centered
1647 1648
/// in the `parentBox`. The track rectangle extends to the bounds of the
/// `parentBox`, but is padded by the larger of [RoundSliderOverlayShape]'s
1649 1650 1651 1652 1653 1654 1655 1656
/// 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].
///
1657
/// {@macro flutter.material.SliderTrackShape.paint.trackSegment}
1658
///
1659 1660 1661
/// ![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)
///
1662 1663 1664 1665 1666
/// 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.
1667 1668
///  * [SliderTrackShape], which can be used to create custom shapes for the
///    [Slider]'s track.
1669 1670 1671
///  * [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.
1672
  const RoundedRectSliderTrackShape();
1673 1674 1675

  @override
  void paint(
1676 1677
    PaintingContext context,
    Offset offset, {
1678 1679 1680 1681 1682
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
1683
    Offset? secondaryOffset,
1684 1685
    bool isDiscrete = false,
    bool isEnabled = false,
1686
    double additionalActiveTrackHeight = 2,
1687
  }) {
1688 1689 1690 1691 1692
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.thumbShape != null);
1693 1694
    // If the slider [SliderThemeData.trackHeight] is less than or equal to 0,
    // then it makes no difference whether the track is painted or not,
1695
    // therefore the painting can be a no-op.
1696
    if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
1697 1698 1699 1700 1701 1702 1703
      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);
1704 1705
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1706 1707
    final Paint leftTrackPaint;
    final Paint rightTrackPaint;
1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723
    switch (textDirection) {
      case TextDirection.ltr:
        leftTrackPaint = activePaint;
        rightTrackPaint = inactivePaint;
      case TextDirection.rtl:
        leftTrackPaint = inactivePaint;
        rightTrackPaint = activePaint;
    }

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

1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748
    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,
    );
1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783

    final bool showSecondaryTrack = (secondaryOffset != null) &&
        ((textDirection == TextDirection.ltr)
            ? (secondaryOffset.dx > thumbCenter.dx)
            : (secondaryOffset.dx < thumbCenter.dx));

    if (showSecondaryTrack) {
      final ColorTween secondaryTrackColorTween = ColorTween(begin: sliderTheme.disabledSecondaryActiveTrackColor, end: sliderTheme.secondaryActiveTrackColor);
      final Paint secondaryTrackPaint = Paint()..color = secondaryTrackColorTween.evaluate(enableAnimation)!;
      if (textDirection == TextDirection.ltr) {
        context.canvas.drawRRect(
          RRect.fromLTRBAndCorners(
            thumbCenter.dx,
            trackRect.top,
            secondaryOffset.dx,
            trackRect.bottom,
            topRight: trackRadius,
            bottomRight: trackRadius,
          ),
          secondaryTrackPaint,
        );
      } else {
        context.canvas.drawRRect(
          RRect.fromLTRBAndCorners(
            secondaryOffset.dx,
            trackRect.top,
            thumbCenter.dx,
            trackRect.bottom,
            topLeft: trackRadius,
            bottomLeft: trackRadius,
          ),
          secondaryTrackPaint,
        );
      }
    }
1784 1785 1786
  }
}

1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832

/// Base range slider track shape that provides an implementation of [getPreferredRect] for
/// default sizing.
///
/// The height is set from [SliderThemeData.trackHeight] and the width of the
/// parent box less the larger of the widths of [SliderThemeData.rangeThumbShape] and
/// [SliderThemeData.overlayShape].
///
/// See also:
///
///  * [RectangularRangeSliderTrackShape], which is a track shape with sharp
///    rectangular edges
mixin BaseRangeSliderTrackShape {
  /// Returns a rect that represents the track bounds that fits within the
  /// [Slider].
  ///
  /// The width is the width of the [RangeSlider], but padded by the max
  /// of the overlay and thumb radius. The height is defined by the  [SliderThemeData.trackHeight].
  ///
  /// The [Rect] is centered both horizontally and vertically within the slider
  /// bounds.
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    assert(sliderTheme.rangeThumbShape != null);
    assert(sliderTheme.overlayShape != null);
    assert(sliderTheme.trackHeight != null);
    final double thumbWidth = sliderTheme.rangeThumbShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
    final double trackHeight = sliderTheme.trackHeight!;
    assert(overlayWidth >= 0);
    assert(trackHeight >= 0);

    final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
    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);
  }
}

1833
/// A [RangeSlider] track that's a simple rectangle.
1834
///
1835
/// It paints a solid colored rectangle, vertically centered in the
1836
/// `parentBox`. The track rectangle extends to the bounds of the `parentBox`,
1837 1838
/// but is padded by the [RoundSliderOverlayShape] radius. The height is
/// defined by the [SliderThemeData.trackHeight]. The color is determined by the
1839
/// [Slider]'s enabled state and the track segment's active state which are
1840 1841 1842 1843 1844
/// defined by:
///   [SliderThemeData.activeTrackColor],
///   [SliderThemeData.inactiveTrackColor],
///   [SliderThemeData.disabledActiveTrackColor],
///   [SliderThemeData.disabledInactiveTrackColor].
1845
///
1846
/// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1847
///
1848 1849 1850
/// ![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)
///
1851 1852
/// See also:
///
1853
///  * [RangeSlider], for the component that is meant to display this shape.
1854
///  * [SliderThemeData], where an instance of this class is set to inform the
1855
///    slider of the visual details of the its track.
1856 1857
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
1858 1859
///  * [RoundedRectRangeSliderTrackShape], for a similar track with rounded
///    edges.
1860
class RectangularRangeSliderTrackShape extends RangeSliderTrackShape with BaseRangeSliderTrackShape {
1861
  /// Create a slider track with rectangular outer edges.
1862
  ///
1863 1864
  /// The middle track segment is the selected range and is active, and the two
  /// outer track segments are inactive.
1865
  const RectangularRangeSliderTrackShape();
1866 1867 1868 1869 1870

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1871 1872 1873 1874 1875
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double>? enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1876
    bool isEnabled = false,
1877
    bool isDiscrete = false,
1878
    required TextDirection textDirection,
1879
  }) {
1880 1881 1882 1883 1884
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.rangeThumbShape != null);
1885
    assert(enableAnimation != null);
1886 1887
    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1888 1889
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1890 1891
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation!)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1892

1893 1894
    final Offset leftThumbOffset;
    final Offset rightThumbOffset;
1895 1896 1897 1898 1899 1900 1901
    switch (textDirection) {
      case TextDirection.ltr:
        leftThumbOffset = startThumbCenter;
        rightThumbOffset = endThumbCenter;
      case TextDirection.rtl:
        leftThumbOffset = endThumbCenter;
        rightThumbOffset = startThumbCenter;
1902
    }
1903 1904 1905 1906 1907 1908 1909 1910

    final Rect trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );
1911
    final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, leftThumbOffset.dx, trackRect.bottom);
1912
    if (!leftTrackSegment.isEmpty) {
1913
      context.canvas.drawRect(leftTrackSegment, inactivePaint);
1914
    }
1915
    final Rect middleTrackSegment = Rect.fromLTRB(leftThumbOffset.dx, trackRect.top, rightThumbOffset.dx, trackRect.bottom);
1916
    if (!middleTrackSegment.isEmpty) {
1917
      context.canvas.drawRect(middleTrackSegment, activePaint);
1918
    }
1919
    final Rect rightTrackSegment = Rect.fromLTRB(rightThumbOffset.dx, trackRect.top, trackRect.right, trackRect.bottom);
1920
    if (!rightTrackSegment.isEmpty) {
1921
      context.canvas.drawRect(rightTrackSegment, inactivePaint);
1922
    }
1923 1924 1925 1926 1927 1928
  }
}

/// The default shape of a [RangeSlider]'s track.
///
/// It paints a solid colored rectangle with rounded edges, vertically centered
1929 1930
/// in the `parentBox`. The track rectangle extends to the bounds of the
/// `parentBox`, but is padded by the larger of [RoundSliderOverlayShape]'s
1931 1932 1933 1934 1935 1936 1937 1938 1939
/// 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].
///
1940
/// {@macro flutter.material.RangeSliderTickMarkShape.paint.trackSegment}
1941
///
1942 1943 1944
/// ![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)
///
1945 1946 1947 1948 1949
/// 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.
1950 1951
///  * [RangeSliderTrackShape], which can be used to create custom shapes for
///    the [RangeSlider]'s track.
1952
///  * [RectangularRangeSliderTrackShape], for a similar track with sharp edges.
1953
class RoundedRectRangeSliderTrackShape extends RangeSliderTrackShape with BaseRangeSliderTrackShape {
1954 1955 1956 1957
  /// 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.
1958
  const RoundedRectRangeSliderTrackShape();
1959 1960 1961 1962 1963

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
1964 1965 1966 1967 1968
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
1969 1970
    bool isEnabled = false,
    bool isDiscrete = false,
1971
    required TextDirection textDirection,
1972
    double additionalActiveTrackHeight = 2,
1973 1974 1975 1976 1977 1978
  }) {
    assert(sliderTheme.disabledActiveTrackColor != null);
    assert(sliderTheme.disabledInactiveTrackColor != null);
    assert(sliderTheme.activeTrackColor != null);
    assert(sliderTheme.inactiveTrackColor != null);
    assert(sliderTheme.rangeThumbShape != null);
1979

1980
    if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
1981 1982 1983
      return;
    }

1984 1985
    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1986 1987
    final ColorTween activeTrackColorTween = ColorTween(
      begin: sliderTheme.disabledActiveTrackColor,
1988 1989
      end: sliderTheme.activeTrackColor,
    );
1990 1991
    final ColorTween inactiveTrackColorTween = ColorTween(
      begin: sliderTheme.disabledInactiveTrackColor,
1992 1993
      end: sliderTheme.inactiveTrackColor,
    );
1994
    final Paint activePaint = Paint()
1995
      ..color = activeTrackColorTween.evaluate(enableAnimation)!;
1996
    final Paint inactivePaint = Paint()
1997
      ..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1998

1999 2000
    final Offset leftThumbOffset;
    final Offset rightThumbOffset;
2001 2002
    switch (textDirection) {
      case TextDirection.ltr:
2003 2004
        leftThumbOffset = startThumbCenter;
        rightThumbOffset = endThumbCenter;
2005
      case TextDirection.rtl:
2006 2007
        leftThumbOffset = endThumbCenter;
        rightThumbOffset = startThumbCenter;
2008
    }
2009
    final Size thumbSize = sliderTheme.rangeThumbShape!.getPreferredSize(isEnabled, isDiscrete);
2010 2011
    final double thumbRadius = thumbSize.width / 2;
    assert(thumbRadius > 0);
2012 2013

    final Rect trackRect = getPreferredRect(
2014 2015 2016 2017 2018
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
2019
    );
2020

2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053
    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,
    );
2054 2055 2056
  }
}

2057
/// The default shape of each [Slider] tick mark.
2058 2059
///
/// Tick marks are only displayed if the slider is discrete, which can be done
2060
/// by setting the [Slider.divisions] to an integer value.
2061 2062 2063 2064 2065 2066 2067 2068 2069
///
/// 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
2070
/// ![A slider widget, consisting of 5 divisions and showing the round slider tick mark shape.]
2071 2072
/// (https://flutter.github.io/assets-for-api-docs/assets/material/rounded_slider_tick_mark_shape.png)
///
2073 2074 2075 2076 2077 2078
/// 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 {
2079
  /// Create a slider tick mark that draws a circle.
2080 2081 2082
  const RoundSliderTickMarkShape({
    this.tickMarkRadius,
  });
2083 2084 2085

  /// The preferred radius of the round tick mark.
  ///
2086
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2087
  final double? tickMarkRadius;
2088 2089

  @override
2090
  Size getPreferredSize({
2091
    required SliderThemeData sliderTheme,
2092
    required bool isEnabled,
2093 2094
  }) {
    assert(sliderTheme.trackHeight != null);
2095 2096
    // The tick marks are tiny circles. If no radius is provided, then the
    // radius is defaulted to be a fraction of the
2097
    // [SliderThemeData.trackHeight]. The fraction is 1/4.
2098
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
2099 2100 2101 2102 2103 2104
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2105 2106 2107 2108 2109
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
2110
    required bool isEnabled,
2111 2112 2113 2114 2115 2116 2117
  }) {
    assert(sliderTheme.disabledActiveTickMarkColor != null);
    assert(sliderTheme.disabledInactiveTickMarkColor != null);
    assert(sliderTheme.activeTickMarkColor != null);
    assert(sliderTheme.inactiveTickMarkColor != null);
    // The paint color of the tick mark depends on its position relative
    // to the thumb and the text direction.
2118 2119
    Color? begin;
    Color? end;
2120 2121 2122 2123 2124 2125 2126 2127 2128 2129
    switch (textDirection) {
      case TextDirection.ltr:
        final bool isTickMarkRightOfThumb = center.dx > thumbCenter.dx;
        begin = isTickMarkRightOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
        end = isTickMarkRightOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
      case TextDirection.rtl:
        final bool isTickMarkLeftOfThumb = center.dx < thumbCenter.dx;
        begin = isTickMarkLeftOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
        end = isTickMarkLeftOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
    }
2130
    final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
2131 2132 2133

    // The tick marks are tiny circles that are the same height as the track.
    final double tickMarkRadius = getPreferredSize(
2134 2135 2136
       isEnabled: isEnabled,
       sliderTheme: sliderTheme,
     ).width / 2;
2137 2138 2139 2140 2141 2142 2143 2144 2145 2146 2147 2148 2149 2150 2151 2152 2153 2154 2155
    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].
///
2156 2157 2158
/// ![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 )
///
2159 2160 2161 2162 2163 2164 2165
/// 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.
2166 2167 2168
  const RoundRangeSliderTickMarkShape({
    this.tickMarkRadius,
  });
2169 2170 2171

  /// The preferred radius of the round tick mark.
  ///
2172
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2173
  final double? tickMarkRadius;
2174 2175 2176

  @override
  Size getPreferredSize({
2177
    required SliderThemeData sliderTheme,
2178 2179 2180
    bool isEnabled = false,
  }) {
    assert(sliderTheme.trackHeight != null);
2181
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
2182 2183 2184 2185 2186 2187
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2188 2189 2190 2191 2192
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset startThumbCenter,
    required Offset endThumbCenter,
2193
    bool isEnabled = false,
2194
    required TextDirection textDirection,
2195 2196 2197 2198 2199 2200
  }) {
    assert(sliderTheme.disabledActiveTickMarkColor != null);
    assert(sliderTheme.disabledInactiveTickMarkColor != null);
    assert(sliderTheme.activeTickMarkColor != null);
    assert(sliderTheme.inactiveTickMarkColor != null);

2201
    final bool isBetweenThumbs;
2202 2203 2204 2205 2206 2207
    switch (textDirection) {
      case TextDirection.ltr:
        isBetweenThumbs = startThumbCenter.dx < center.dx && center.dx < endThumbCenter.dx;
      case TextDirection.rtl:
        isBetweenThumbs = endThumbCenter.dx < center.dx && center.dx < startThumbCenter.dx;
    }
2208 2209 2210
    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)!;
2211 2212 2213 2214 2215 2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232

    // 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({
2233 2234
    required SliderThemeData sliderTheme,
    required bool isEnabled,
2235 2236 2237 2238 2239 2240 2241 2242
  }) {
    return Size.zero;
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2243 2244 2245 2246
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required Offset thumbCenter,
2247
    required bool isEnabled,
2248
    required TextDirection textDirection,
2249 2250 2251 2252 2253 2254 2255 2256 2257 2258 2259 2260
  }) {
    // 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
2261
/// skipped. When this value is specified for [SliderThemeData.overlayShape],
2262 2263 2264 2265 2266 2267 2268 2269 2270
/// 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, {
2271 2272 2273 2274 2275 2276 2277 2278 2279 2280
    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,
2281 2282 2283 2284 2285 2286 2287
  }) {
    // no-op.
  }
}

/// The default shape of a [Slider]'s thumb.
///
2288
/// There is a shadow for the resting, pressed, hovered, and focused state.
2289
///
2290 2291 2292
/// ![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)
///
2293 2294 2295 2296 2297 2298 2299 2300 2301 2302
/// 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,
2303 2304
    this.elevation = 1.0,
    this.pressedElevation = 6.0,
2305 2306 2307 2308
  });

  /// The preferred radius of the round thumb shape when the slider is enabled.
  ///
2309
  /// If it is not provided, then the Material Design default of 10 is used.
2310 2311 2312 2313 2314 2315
  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]
2316
  final double? disabledThumbRadius;
2317 2318 2319 2320 2321 2322 2323 2324 2325 2326 2327 2328 2329 2330 2331 2332 2333 2334 2335
  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;

2336 2337
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2338
    return Size.fromRadius(isEnabled ? enabledThumbRadius : _disabledThumbRadius);
2339 2340 2341 2342 2343 2344
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2345
    required Animation<double> activationAnimation,
2346
    required Animation<double> enableAnimation,
2347 2348 2349
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
2350
    required SliderThemeData sliderTheme,
2351 2352 2353 2354
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
2355
  }) {
2356 2357
    assert(sliderTheme.disabledThumbColor != null);
    assert(sliderTheme.thumbColor != null);
2358

2359 2360 2361 2362 2363 2364 2365 2366 2367
    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,
    );
2368

2369
    final Color color = colorTween.evaluate(enableAnimation)!;
2370 2371
    final double radius = radiusTween.evaluate(enableAnimation);

2372 2373 2374 2375 2376
    final Tween<double> elevationTween = Tween<double>(
      begin: elevation,
      end: pressedElevation,
    );

2377
    final double evaluatedElevation = elevationTween.evaluate(activationAnimation);
2378 2379
    final Path path = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);
2380 2381 2382 2383 2384 2385 2386 2387 2388 2389 2390 2391 2392

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

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

2394 2395
    canvas.drawCircle(
      center,
2396 2397
      radius,
      Paint()..color = color,
2398
    );
2399 2400 2401
  }
}

2402
/// The default shape of a [RangeSlider]'s thumbs.
2403
///
2404
/// There is a shadow for the resting and pressed state.
2405
///
2406 2407 2408
/// ![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)
///
2409 2410
/// See also:
///
2411 2412 2413 2414
///  * [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 {
2415
  /// Create a slider thumb that draws a circle.
2416
  const RoundRangeSliderThumbShape({
2417
    this.enabledThumbRadius = 10.0,
2418
    this.disabledThumbRadius,
2419 2420
    this.elevation = 1.0,
    this.pressedElevation = 6.0,
2421
  });
2422 2423 2424

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

2428 2429
  /// The preferred radius of the round thumb shape when the slider is disabled.
  ///
2430
  /// If no disabledRadius is provided, then it is equal to the
2431
  /// [enabledThumbRadius].
2432
  final double? disabledThumbRadius;
2433 2434 2435 2436 2437 2438 2439 2440 2441 2442 2443
  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;
2444 2445 2446

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2447
    return Size.fromRadius(isEnabled ? enabledThumbRadius : _disabledThumbRadius);
2448 2449 2450 2451 2452
  }

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

    // Add a stroke of 1dp around the circle if this thumb would overlap
    // the other thumb.
2483
    if (isOnTop ?? false) {
2484
      final Paint strokePaint = Paint()
2485
        ..color = sliderTheme.overlappingShapeStrokeColor!
2486 2487 2488
        ..strokeWidth = 1.0
        ..style = PaintingStyle.stroke;
      canvas.drawCircle(center, radius, strokePaint);
2489 2490
    }

2491
    final Color color = colorTween.evaluate(enableAnimation)!;
2492

2493
    final double evaluatedElevation = isPressed! ? elevationTween.evaluate(activationAnimation) : elevation;
2494 2495
    final Path shadowPath = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);
2496 2497 2498 2499 2500 2501 2502 2503 2504 2505 2506 2507 2508

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

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

2510
    canvas.drawCircle(
2511
      center,
2512
      radius,
2513
      Paint()..color = color,
2514 2515 2516 2517
    );
  }
}

2518
/// The default shape of a [Slider]'s thumb overlay.
2519 2520 2521 2522 2523 2524 2525 2526
///
/// 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].
2527 2528 2529
///
/// See also:
///
2530 2531 2532 2533 2534
///  * [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.
2535
  const RoundSliderOverlayShape({ this.overlayRadius = 24.0 });
2536

2537 2538
  /// The preferred radius of the round thumb shape when enabled.
  ///
2539 2540
  /// If it is not provided, then half of the [SliderThemeData.trackHeight] is
  /// used.
2541
  final double overlayRadius;
2542 2543 2544

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2545
    return Size.fromRadius(overlayRadius);
2546 2547 2548 2549 2550 2551
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2552 2553
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
2554
    required bool isDiscrete,
2555 2556 2557 2558 2559
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
2560 2561
    required double textScaleFactor,
    required Size sizeWithOverflow,
2562
  }) {
2563

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

    canvas.drawCircle(
      center,
      radiusTween.evaluate(activationAnimation),
2573
      Paint()..color = sliderTheme.overlayColor!,
2574 2575 2576 2577
    );
  }
}

2578
/// The default shape of a [Slider]'s value indicator.
2579
///
2580 2581 2582
/// ![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)
///
2583 2584 2585 2586 2587
/// 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.
2588 2589 2590 2591 2592 2593 2594 2595
class RectangularSliderValueIndicatorShape extends SliderComponentShape {
  /// Create a slider value indicator that resembles a rectangular tooltip.
  const RectangularSliderValueIndicatorShape();

  static const _RectangularSliderValueIndicatorPathPainter _pathPainter = _RectangularSliderValueIndicatorPathPainter();

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

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

/// The default shape of a [RangeSlider]'s value indicators.
///
2638 2639 2640
/// ![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)
///
2641 2642 2643 2644 2645 2646 2647 2648 2649 2650 2651 2652 2653 2654 2655 2656
/// 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, {
2657 2658
    required TextPainter labelPainter,
    required double textScaleFactor,
2659
  }) {
2660
    assert(textScaleFactor >= 0);
2661
    return _pathPainter.getPreferredSize(labelPainter, textScaleFactor);
2662 2663 2664 2665
  }

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

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2687 2688 2689 2690 2691 2692 2693 2694 2695 2696 2697 2698
    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,
2699 2700
  }) {
    final Canvas canvas = context.canvas;
2701
    final double scale = activationAnimation!.value;
2702
    _pathPainter.paint(
2703
      parentBox: parentBox!,
2704 2705 2706
      canvas: canvas,
      center: center,
      scale: scale,
2707 2708 2709 2710 2711
      labelPainter: labelPainter!,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
      backgroundPaintColor: sliderTheme!.valueIndicatorColor!,
      strokePaintColor: isOnTop! ? sliderTheme.overlappingShapeStrokeColor : null,
2712 2713 2714 2715 2716 2717 2718 2719 2720 2721 2722 2723 2724 2725 2726 2727 2728 2729 2730 2731 2732 2733 2734 2735 2736 2737
    );
  }
}

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,
  ) {
    return Size(
      _upperRectangleWidth(labelPainter, 1, textScaleFactor),
      labelPainter.height + _labelPadding,
    );
  }

  double getHorizontalShift({
2738 2739 2740 2741 2742 2743
    required RenderBox parentBox,
    required Offset center,
    required TextPainter labelPainter,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required double scale,
2744 2745
  }) {
    assert(!sizeWithOverflow.isEmpty);
2746

2747 2748
    const double edgePadding = 8.0;
    final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);
2749 2750 2751
    /// 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);
2752 2753 2754 2755 2756

    // 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.
2757 2758
    final double overflowLeft = math.max(0, rectangleWidth / 2 - globalCenter.dx + edgePadding);
    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - globalCenter.dx - edgePadding));
2759 2760 2761 2762 2763 2764 2765 2766 2767 2768 2769 2770 2771 2772 2773 2774

    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({
2775 2776 2777 2778 2779 2780 2781 2782 2783
    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,
2784 2785 2786 2787 2788 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
  }) {
    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.
///
2845 2846 2847
/// ![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)
///
2848 2849 2850 2851 2852
/// 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.
2853
class PaddleSliderValueIndicatorShape extends SliderComponentShape {
2854
  /// Create a slider value indicator in the shape of an upside-down pear.
2855 2856
  const PaddleSliderValueIndicatorShape();

2857
  static const _PaddleSliderValueIndicatorPathPainter _pathPainter = _PaddleSliderValueIndicatorPathPainter();
2858 2859

  @override
2860 2861 2862 2863 2864 2865
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
    TextPainter? labelPainter,
    double? textScaleFactor,
  }) {
2866
    assert(labelPainter != null);
2867
    assert(textScaleFactor != null && textScaleFactor >= 0);
2868
    return _pathPainter.getPreferredSize(labelPainter!, textScaleFactor!);
2869 2870 2871 2872 2873 2874
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2875 2876 2877 2878 2879 2880 2881 2882 2883 2884
    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,
2885
  }) {
2886
    assert(!sizeWithOverflow.isEmpty);
2887
    final ColorTween enableColor = ColorTween(
2888
      begin: sliderTheme.disabledThumbColor,
2889 2890
      end: sliderTheme.valueIndicatorColor,
    );
2891
    _pathPainter.paint(
2892 2893
      context.canvas,
      center,
2894 2895 2896 2897 2898
      Paint()..color = enableColor.evaluate(enableAnimation)!,
      activationAnimation.value,
      labelPainter,
      textScaleFactor,
      sizeWithOverflow,
2899 2900 2901 2902 2903
      null,
    );
  }
}

2904 2905
/// A variant shape of a [RangeSlider]'s value indicators. The value indicator
/// is in the shape of an upside-down pear.
2906
///
2907 2908 2909
/// ![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)
///
2910 2911 2912 2913 2914 2915 2916 2917 2918
/// 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();

2919
  static const _PaddleSliderValueIndicatorPathPainter _pathPainter = _PaddleSliderValueIndicatorPathPainter();
2920 2921

  @override
2922 2923 2924
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
2925 2926
    required TextPainter labelPainter,
    required double textScaleFactor,
2927
  }) {
2928
    assert(textScaleFactor >= 0);
2929
    return _pathPainter.getPreferredSize(labelPainter, textScaleFactor);
2930 2931
  }

2932 2933
  @override
  double getHorizontalShift({
2934 2935 2936 2937 2938 2939
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2940 2941
  }) {
    return _pathPainter.getHorizontalShift(
2942 2943 2944 2945 2946
      center: center!,
      labelPainter: labelPainter!,
      scale: activationAnimation!.value,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
2947 2948 2949
    );
  }

2950 2951 2952 2953
  @override
  void paint(
    PaintingContext context,
    Offset center, {
2954 2955 2956
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    bool? isDiscrete,
2957
    bool isOnTop = false,
2958 2959 2960 2961 2962 2963 2964 2965
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    TextDirection? textDirection,
    Thumb? thumb,
    double? value,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2966
  }) {
2967
    assert(!sizeWithOverflow!.isEmpty);
2968 2969 2970 2971 2972
    final ColorTween enableColor = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.valueIndicatorColor,
    );
    // Add a stroke of 1dp around the top paddle.
2973
    _pathPainter.paint(
2974 2975
      context.canvas,
      center,
2976
      Paint()..color = enableColor.evaluate(enableAnimation)!,
2977 2978
      activationAnimation.value,
      labelPainter,
2979 2980
      textScaleFactor!,
      sizeWithOverflow!,
2981 2982 2983 2984 2985
      isOnTop ? sliderTheme.overlappingShapeStrokeColor : null,
    );
  }
}

2986 2987
class _PaddleSliderValueIndicatorPathPainter {
  const _PaddleSliderValueIndicatorPathPainter();
2988

2989 2990 2991 2992 2993 2994 2995 2996
  // 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;
2997
  static const double _minLabelWidth = 16.0;
2998
  // Radius of the bottom lobe of the value indicator.
2999
  static const double _bottomLobeRadius = 10.0;
3000 3001
  static const double _labelPadding = 8.0;
  static const double _distanceBetweenTopBottomCenters = 40.0;
3002
  static const double _middleNeckWidth = 3.0;
3003 3004 3005 3006 3007 3008
  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;
3009
  static const Offset _topLobeCenter = Offset(0.0, -_distanceBetweenTopBottomCenters);
3010
  static const double _topNeckRadius = 13.0;
3011 3012 3013 3014 3015 3016 3017 3018
  // 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;
3019
  static const double _preferredHeight = _distanceBetweenTopBottomCenters + _topLobeRadius + _bottomLobeRadius;
3020 3021 3022 3023 3024
  // 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;
3025

3026 3027
  Size getPreferredSize(
    TextPainter labelPainter,
3028
    double textScaleFactor,
3029
  ) {
3030
    assert(textScaleFactor >= 0);
3031 3032
    final double width = math.max(_minLabelWidth * textScaleFactor, labelPainter.width) + _labelPadding * 2 * textScaleFactor;
    return Size(width, _preferredHeight * textScaleFactor);
3033
  }
3034 3035 3036 3037

  // 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) {
3038
    assert(center.isFinite);
3039
    final Rect arcRect = Rect.fromCircle(center: center, radius: radius);
3040 3041 3042
    path.arcTo(arcRect, startAngle, endAngle - startAngle, false);
  }

3043
  double getHorizontalShift({
3044 3045 3046 3047 3048
    required Offset center,
    required TextPainter labelPainter,
    required double scale,
    required double textScaleFactor,
    required Size sizeWithOverflow,
3049
  }) {
3050
    assert(!sizeWithOverflow.isEmpty);
3051 3052 3053 3054 3055
    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),
3056
    );
3057
    final double shift = _getIdealOffset(halfWidthNeeded, textScaleFactor * scale, center, sizeWithOverflow.width);
3058
    return shift * textScaleFactor;
3059 3060
  }

3061 3062
  // 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.
3063 3064 3065 3066
  double _getIdealOffset(
    double halfWidthNeeded,
    double scale,
    Offset center,
3067
    double widthWithOverflow,
3068
  ) {
3069
    const double edgeMargin = 8.0;
3070
    final Rect topLobeRect = Rect.fromLTWH(
3071 3072 3073 3074 3075 3076 3077 3078 3079 3080
      -_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;
3081

3082 3083
    if (topLeft.dx < edgeMargin) {
      shift = edgeMargin - topLeft.dx;
3084
    }
3085

3086
    final double endGlobal = widthWithOverflow;
3087 3088
    if (bottomRight.dx > endGlobal - edgeMargin) {
      shift = endGlobal - edgeMargin - bottomRight.dx;
3089
    }
3090

3091
    shift = scale == 0.0 ? 0.0 : shift / scale;
3092 3093 3094 3095 3096 3097 3098
    if (shift < 0.0) {
      // Shifting to the left.
      shift = math.max(shift, -halfWidthNeeded);
    } else {
      // Shifting to the right.
      shift = math.min(shift, halfWidthNeeded);
    }
3099 3100 3101
    return shift;
  }

3102
  void paint(
3103 3104 3105 3106 3107
    Canvas canvas,
    Offset center,
    Paint paint,
    double scale,
    TextPainter labelPainter,
3108 3109
    double textScaleFactor,
    Size sizeWithOverflow,
3110
    Color? strokePaintColor,
3111
  ) {
3112 3113 3114 3115 3116
    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;
    }
3117
    assert(!sizeWithOverflow.isEmpty);
3118

3119
    // The entire value indicator should scale with the size of the label,
3120
    // to keep it large enough to encompass the label text.
3121 3122
    final double overallScale = scale * textScaleFactor;
    final double inverseTextScale = textScaleFactor != 0 ? 1.0 / textScaleFactor : 0.0;
3123 3124
    final double labelHalfWidth = labelPainter.width / 2.0;

3125 3126 3127 3128 3129 3130 3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154
    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,
    );

3155
    // This is the needed extra width for the label. It is only positive when
3156
    // the label exceeds the minimum size contained by the round top lobe.
3157 3158 3159 3160 3161
    final double halfWidthNeeded = math.max(
      0.0,
      inverseTextScale * labelHalfWidth - (_topLobeRadius - _labelPadding),
    );

3162
    final double shift = _getIdealOffset( halfWidthNeeded, overallScale, center, sizeWithOverflow.width);
3163 3164
    final double leftWidthNeeded = halfWidthNeeded - shift;
    final double rightWidthNeeded = halfWidthNeeded + shift;
3165

3166 3167
    // The parameter that describes how far along the transition from round to
    // stretched we are.
3168 3169
    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));
3170
    // The angle between the top neck arc's center and the top lobe's center
3171 3172
    // and vertical. The base amount is chosen so that the neck is smooth,
    // even when the lobe is shifted due to its size.
3173 3174
    final double leftTheta = (1.0 - leftAmount) * _thirtyDegrees;
    final double rightTheta = (1.0 - rightAmount) * _thirtyDegrees;
3175
    // The center of the top left neck arc.
3176 3177
    final Offset leftTopNeckCenter = Offset(
      -_neckTriangleBase,
3178 3179
      _topLobeCenter.dy + math.cos(leftTheta) * _neckTriangleHypotenuse,
    );
3180
    final Offset neckRightCenter = Offset(
3181
      _neckTriangleBase,
3182 3183 3184 3185
      _topLobeCenter.dy + math.cos(rightTheta) * _neckTriangleHypotenuse,
    );
    final double leftNeckArcAngle = _ninetyDegrees - leftTheta;
    final double rightNeckArcAngle = math.pi + _ninetyDegrees - rightTheta;
3186 3187 3188
    // 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.
3189
    final double neckStretchBaseline = math.max(0.0, rightBottomNeckCenterY - math.max(leftTopNeckCenter.dy, neckRightCenter.dy));
3190
    final double t = math.pow(inverseTextScale, 3.0) as double;
3191
    final double stretch = clampDouble(neckStretchBaseline * t, 0.0, 10.0 * neckStretchBaseline);
3192
    final Offset neckStretch = Offset(0.0, neckStretchBaseline - stretch);
3193

3194 3195 3196 3197 3198 3199 3200 3201 3202 3203 3204 3205 3206 3207 3208 3209
    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;
    }());
3210

3211 3212
    _addArc(
      path,
3213
      leftTopNeckCenter + neckStretch,
3214 3215
      _topNeckRadius,
      0.0,
3216 3217 3218 3219
      -leftNeckArcAngle,
    );
    _addArc(
      path,
3220
      _topLobeCenter - Offset(leftWidthNeeded, 0.0) + neckStretch,
3221 3222 3223 3224 3225 3226
      _topLobeRadius,
      _ninetyDegrees + leftTheta,
      _twoSeventyDegrees,
    );
    _addArc(
      path,
3227
      _topLobeCenter + Offset(rightWidthNeeded, 0.0) + neckStretch,
3228 3229 3230
      _topLobeRadius,
      _twoSeventyDegrees,
      _twoSeventyDegrees + math.pi - rightTheta,
3231 3232 3233
    );
    _addArc(
      path,
3234
      neckRightCenter + neckStretch,
3235
      _topNeckRadius,
3236
      rightNeckArcAngle,
3237 3238
      math.pi,
    );
3239 3240 3241 3242 3243 3244 3245 3246 3247

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

3248 3249 3250 3251
    canvas.drawPath(path, paint);

    // Draw the label.
    canvas.save();
3252
    canvas.translate(shift, -_distanceBetweenTopBottomCenters + neckStretch.dy);
3253
    canvas.scale(inverseTextScale, inverseTextScale);
3254
    labelPainter.paint(canvas, Offset.zero - Offset(labelHalfWidth, labelPainter.height / 2.0));
3255 3256 3257
    canvas.restore();
    canvas.restore();
  }
3258
}
3259

3260
/// A callback that formats a numeric value from a [Slider] or [RangeSlider] widget.
3261 3262 3263
///
/// See also:
///
3264
///  * [Slider.semanticFormatterCallback], which shows an example use case.
3265
///  * [RangeSlider.semanticFormatterCallback], which shows an example use case.
3266
typedef SemanticFormatterCallback = String Function(double value);
3267 3268 3269 3270 3271 3272 3273

/// 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.
///
3274
/// Override [SliderThemeData.thumbSelector] for custom thumb selection.
3275
typedef RangeThumbSelector = Thumb? Function(
3276 3277 3278 3279 3280 3281 3282
  TextDirection textDirection,
  RangeValues values,
  double tapValue,
  Size thumbSize,
  Size trackSize,
  double dx,
);
3283 3284 3285 3286

/// Object for representing range slider thumb values.
///
/// This object is passed into [RangeSlider.values] to set its values, and it
3287
/// is emitted in [RangeSlider.onChanged], [RangeSlider.onChangeStart], and
3288
/// [RangeSlider.onChangeEnd] when the values change.
3289
@immutable
3290 3291 3292 3293 3294 3295 3296 3297 3298 3299 3300 3301 3302 3303 3304 3305 3306 3307
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) {
3308
    if (other.runtimeType != runtimeType) {
3309
      return false;
3310
    }
3311 3312 3313
    return other is RangeValues
        && other.start == start
        && other.end == end;
3314 3315 3316
  }

  @override
3317
  int get hashCode => Object.hash(start, end);
3318 3319 3320

  @override
  String toString() {
3321
    return '${objectRuntimeType(this, 'RangeValues')}($start, $end)';
3322 3323 3324 3325 3326 3327
  }
}

/// Object for setting range slider label values that appear in the value
/// indicator for each thumb.
///
3328
/// Used in combination with [SliderThemeData.showValueIndicator] to display
3329
/// labels above the thumbs.
3330
@immutable
3331 3332 3333 3334 3335 3336 3337 3338 3339 3340 3341 3342 3343 3344 3345 3346 3347 3348
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) {
3349
    if (other.runtimeType != runtimeType) {
3350
      return false;
3351
    }
3352 3353 3354
    return other is RangeLabels
        && other.start == start
        && other.end == end;
3355 3356 3357
  }

  @override
3358
  int get hashCode => Object.hash(start, end);
3359 3360 3361

  @override
  String toString() {
3362
    return '${objectRuntimeType(this, 'RangeLabels')}($start, $end)';
3363
  }
3364
}
3365 3366 3367 3368 3369 3370 3371 3372 3373 3374 3375 3376

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,
    );
  }
}
3377 3378 3379 3380 3381 3382 3383 3384 3385 3386 3387 3388 3389 3390 3391 3392 3393 3394 3395 3396 3397 3398 3399 3400 3401 3402 3403 3404 3405 3406 3407 3408 3409 3410 3411 3412 3413 3414 3415 3416 3417 3418 3419 3420 3421 3422 3423 3424 3425 3426 3427 3428 3429 3430 3431 3432 3433 3434 3435 3436 3437 3438 3439 3440 3441 3442 3443 3444 3445 3446 3447 3448 3449 3450 3451 3452 3453 3454 3455 3456 3457 3458 3459 3460 3461 3462 3463 3464 3465 3466 3467 3468 3469 3470 3471 3472 3473 3474 3475 3476 3477 3478 3479 3480 3481 3482 3483 3484 3485 3486 3487 3488 3489 3490 3491 3492 3493 3494 3495 3496 3497 3498 3499 3500 3501 3502 3503 3504 3505 3506 3507 3508 3509 3510 3511 3512 3513 3514 3515 3516 3517 3518 3519 3520 3521 3522 3523 3524 3525 3526 3527 3528 3529 3530 3531 3532 3533 3534 3535 3536 3537 3538 3539 3540 3541 3542 3543 3544 3545 3546 3547 3548 3549 3550 3551 3552 3553 3554 3555 3556 3557

/// The default shape of a Material 3 [Slider]'s value indicator.
///
/// 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.
class DropSliderValueIndicatorShape extends SliderComponentShape {
  /// Create a slider value indicator that resembles a drop shape.
  const DropSliderValueIndicatorShape();

  static const _DropSliderValueIndicatorPathPainter _pathPainter = _DropSliderValueIndicatorPathPainter();

  @override
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
    TextPainter? labelPainter,
    double? textScaleFactor,
  }) {
    assert(labelPainter != null);
    assert(textScaleFactor != null && textScaleFactor >= 0);
    return _pathPainter.getPreferredSize(labelPainter!, textScaleFactor!);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    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,
  }) {
    final Canvas canvas = context.canvas;
    final double scale = activationAnimation.value;
    _pathPainter.paint(
      parentBox: parentBox,
      canvas: canvas,
      center: center,
      scale: scale,
      labelPainter: labelPainter,
      textScaleFactor: textScaleFactor,
      sizeWithOverflow: sizeWithOverflow,
      backgroundPaintColor: sliderTheme.valueIndicatorColor!,
    );
  }
}

class _DropSliderValueIndicatorPathPainter {
  const _DropSliderValueIndicatorPathPainter();

  static const double _triangleHeight = 10.0;
  static const double _labelPadding = 8.0;
  static const double _preferredHeight = 32.0;
  static const double _minLabelWidth = 20.0;
  static const double _minRectHeight = 28.0;
  static const double _rectYOffset = 6.0;
  static const double _bottomTipYOffset = 16.0;
  static const double _preferredHalfHeight = _preferredHeight / 2;
  static const double _upperRectRadius = 4;

  Size getPreferredSize(
    TextPainter labelPainter,
    double textScaleFactor,
  ) {
    final double width = math.max(_minLabelWidth, labelPainter.width) + _labelPadding * 2 * textScaleFactor;
    return Size(width, _preferredHeight * textScaleFactor);
  }

  double getHorizontalShift({
    required RenderBox parentBox,
    required Offset center,
    required TextPainter labelPainter,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required double scale,
  }) {
    assert(!sizeWithOverflow.isEmpty);

    const double edgePadding = 8.0;
    final double rectangleWidth = _upperRectangleWidth(labelPainter, scale);
    /// 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);

    // 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.
    final double overflowLeft = math.max(0, rectangleWidth / 2 - globalCenter.dx + edgePadding);
    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - globalCenter.dx - edgePadding));

    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) {
    final double unscaledWidth = math.max(_minLabelWidth, labelPainter.width) + _labelPadding;
    return unscaledWidth * scale;
  }

  BorderRadius _adjustBorderRadius(Rect rect) {
    const double rectness = 0.0;
    return BorderRadius.lerp(
      BorderRadius.circular(_upperRectRadius),
      BorderRadius.all(Radius.circular(rect.shortestSide / 2.0)),
      1.0 - rectness,
    )!;
  }

  void paint({
    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,
  }) {
    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);
    final double horizontalShift = getHorizontalShift(
      parentBox: parentBox,
      center: center,
      labelPainter: labelPainter,
      textScaleFactor: textScaleFactor,
      sizeWithOverflow: sizeWithOverflow,
      scale: scale,
    );
    final Rect upperRect = Rect.fromLTWH(
      -rectangleWidth / 2 + horizontalShift,
      -_rectYOffset - _minRectHeight,
      rectangleWidth,
      _minRectHeight,
    );

    final Paint fillPaint = Paint()..color = backgroundPaintColor;

    canvas.save();
    canvas.translate(center.dx, center.dy - _bottomTipYOffset);
    canvas.scale(scale, scale);

    final BorderRadius adjustedBorderRadius = _adjustBorderRadius(upperRect);
    final RRect borderRect = adjustedBorderRadius.resolve(labelPainter.textDirection).toRRect(upperRect);
    final Path trianglePath = Path()
      ..lineTo(-_triangleHeight, -_triangleHeight)
      ..lineTo(_triangleHeight, -_triangleHeight)
      ..close();
    canvas.drawPath(trianglePath, fillPaint);
    canvas.drawRRect(borderRect, 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 / 1.75);
    final Offset halfLabelPainterOffset = Offset(labelPainter.width / 2, labelPainter.height / 2);
    final Offset labelOffset = boxCenter - halfLabelPainterOffset;
    labelPainter.paint(canvas, labelOffset);
    canvas.restore();
  }
}