slider_theme.dart 140 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
  /// Applies the given theme [data] to [child].
  const SliderTheme({
53
    super.key,
54
    required this.data,
55
    required super.child,
56
  });
57 58 59 60 61 62 63 64 65 66

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

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

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

/// 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,
}

136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
/// 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,
}

151
/// Holds the color, shape, and typography values for a Material Design slider
152 153 154 155 156 157 158
/// 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].
///
159 160 161 162 163 164 165 166
/// 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].
///
167 168 169 170
/// The parts of a slider are:
///
///  * The "thumb", which is a shape that slides horizontally when the user
///    drags it.
171
///  * The "track", which is the line that the slider thumb slides along.
172 173 174 175 176 177 178 179
///  * 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.
180 181 182 183 184 185 186
///  * 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.
///
187 188 189 190
/// The thumb, track, tick marks, value indicator, and overlay can be customized
/// by creating subclasses of [SliderTrackShape],
/// [SliderComponentShape], and/or [SliderTickMarkShape]. See
/// [RoundSliderThumbShape], [RectangularSliderTrackShape],
191
/// [RoundSliderTickMarkShape], [RectangularSliderValueIndicatorShape], and
192
/// [RoundSliderOverlayShape] for examples.
193
///
194 195 196 197 198 199 200 201 202 203
/// 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].
///
204 205 206 207 208 209 210
/// 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].
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225
///  * [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.
226
@immutable
227
class SliderThemeData with Diagnosticable {
228
  /// Create a [SliderThemeData] given a set of exact values.
229 230 231 232 233 234
  ///
  /// 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
235 236
  /// entirely new one with [SliderThemeData.fromPrimaryColors].
  ///
237
  /// {@tool snippet}
238 239 240
  ///
  /// ```dart
  /// class Blissful extends StatefulWidget {
241
  ///   const Blissful({super.key});
242
  ///
243
  ///   @override
244
  ///   State createState() => BlissfulState();
245 246 247
  /// }
  ///
  /// class BlissfulState extends State<Blissful> {
248
  ///   double _bliss = 0;
249 250 251
  ///
  ///   @override
  ///   Widget build(BuildContext context) {
252
  ///     return SliderTheme(
253
  ///       data: SliderTheme.of(context).copyWith(activeTrackColor: const Color(0xff404080)),
254
  ///       child: Slider(
255 256 257 258 259 260 261
  ///         onChanged: (double value) { setState(() { _bliss = value; }); },
  ///         value: _bliss,
  ///       ),
  ///     );
  ///   }
  /// }
  /// ```
262
  /// {@end-tool}
263
  const SliderThemeData({
264 265 266
    this.trackHeight,
    this.activeTrackColor,
    this.inactiveTrackColor,
267
    this.secondaryActiveTrackColor,
268 269
    this.disabledActiveTrackColor,
    this.disabledInactiveTrackColor,
270
    this.disabledSecondaryActiveTrackColor,
271 272 273 274 275
    this.activeTickMarkColor,
    this.inactiveTickMarkColor,
    this.disabledActiveTickMarkColor,
    this.disabledInactiveTickMarkColor,
    this.thumbColor,
276
    this.overlappingShapeStrokeColor,
277 278 279
    this.disabledThumbColor,
    this.overlayColor,
    this.valueIndicatorColor,
280
    this.valueIndicatorStrokeColor,
281
    this.overlayShape,
282 283
    this.tickMarkShape,
    this.thumbShape,
284
    this.trackShape,
285
    this.valueIndicatorShape,
286 287 288 289
    this.rangeTickMarkShape,
    this.rangeThumbShape,
    this.rangeTrackShape,
    this.rangeValueIndicatorShape,
290 291
    this.showValueIndicator,
    this.valueIndicatorTextStyle,
292 293
    this.minThumbSeparation,
    this.thumbSelector,
294
    this.mouseCursor,
295
    this.allowedInteraction,
296
  });
297 298 299 300 301 302 303 304 305 306

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

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

331
    return SliderThemeData(
332
      trackHeight: 2.0,
333 334
      activeTrackColor: primaryColor.withAlpha(activeTrackAlpha),
      inactiveTrackColor: primaryColor.withAlpha(inactiveTrackAlpha),
335
      secondaryActiveTrackColor: primaryColor.withAlpha(secondaryActiveTrackAlpha),
336 337
      disabledActiveTrackColor: primaryColorDark.withAlpha(disabledActiveTrackAlpha),
      disabledInactiveTrackColor: primaryColorDark.withAlpha(disabledInactiveTrackAlpha),
338
      disabledSecondaryActiveTrackColor: primaryColorDark.withAlpha(disabledSecondaryActiveTrackAlpha),
339 340 341 342 343
      activeTickMarkColor: primaryColorLight.withAlpha(activeTickMarkAlpha),
      inactiveTickMarkColor: primaryColor.withAlpha(inactiveTickMarkAlpha),
      disabledActiveTickMarkColor: primaryColorLight.withAlpha(disabledActiveTickMarkAlpha),
      disabledInactiveTickMarkColor: primaryColorDark.withAlpha(disabledInactiveTickMarkAlpha),
      thumbColor: primaryColor.withAlpha(thumbAlpha),
344
      overlappingShapeStrokeColor: Colors.white,
345
      disabledThumbColor: primaryColorDark.withAlpha(disabledThumbAlpha),
346
      overlayColor: primaryColor.withAlpha(overlayAlpha),
347
      valueIndicatorColor: primaryColor.withAlpha(valueIndicatorAlpha),
348
      valueIndicatorStrokeColor: 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 color given to the [valueIndicatorShape] stroke.
  final Color? valueIndicatorStrokeColor;
430

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

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

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

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

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

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

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

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

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

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

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

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

  /// 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.
576
  final RangeThumbSelector? thumbSelector;
577

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

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

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

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

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

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

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

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

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

  /// 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();
945 946
}

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

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

  /// Special instance of [SliderTickMarkShape] to skip the tick mark painting.
  ///
  /// See also:
  ///
1019 1020
  ///  * [SliderThemeData.tickMarkShape], which is the shape that the [Slider]
  ///    uses when painting tick marks.
1021 1022 1023
  static final SliderTickMarkShape noTickMark = _EmptySliderTickMarkShape();
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1530
    final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
1531
    final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
1532 1533
    final double trackRight = trackLeft + parentBox.size.width - math.max(thumbWidth, overlayWidth);
    final double trackBottom = trackTop + trackHeight;
1534
    // If the parentBox's size less than slider's size the trackRight will be less than trackLeft, so switch them.
1535
    return Rect.fromLTRB(math.min(trackLeft, trackRight), trackTop, math.max(trackLeft, trackRight), trackBottom);
1536 1537
  }
}
1538

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

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

    // Assign the track segment paints, which are left: active, right: inactive,
    // but reversed for right to left text.
1596 1597
    final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
    final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
1598 1599
    final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation)!;
    final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;
1600 1601
    final Paint leftTrackPaint;
    final Paint rightTrackPaint;
1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618
    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,
    );

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

    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);
      }
    }
1646 1647 1648 1649 1650 1651
  }
}

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

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

1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753
    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,
    );
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 1784 1785 1786 1787 1788

    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,
        );
      }
    }
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;
1833
    // If the parentBox's size less than slider's size the trackRight will be less than trackLeft, so switch them.
1834 1835 1836 1837
    return Rect.fromLTRB(math.min(trackLeft, trackRight), trackTop, math.max(trackLeft, trackRight), trackBottom);
  }
}

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

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

1898 1899
    final Offset leftThumbOffset;
    final Offset rightThumbOffset;
1900 1901 1902 1903 1904 1905 1906
    switch (textDirection) {
      case TextDirection.ltr:
        leftThumbOffset = startThumbCenter;
        rightThumbOffset = endThumbCenter;
      case TextDirection.rtl:
        leftThumbOffset = endThumbCenter;
        rightThumbOffset = startThumbCenter;
1907
    }
1908 1909 1910 1911 1912 1913 1914 1915

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

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

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

1985
    if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
1986 1987 1988
      return;
    }

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

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

    final Rect trackRect = getPreferredRect(
2019 2020 2021 2022 2023
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
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 2054 2055 2056 2057 2058
    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,
    );
2059 2060 2061
  }
}

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

  /// The preferred radius of the round tick mark.
  ///
2091
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2092
  final double? tickMarkRadius;
2093 2094

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

  @override
  void paint(
    PaintingContext context,
    Offset center, {
2110 2111 2112 2113 2114
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
2115
    required bool isEnabled,
2116 2117 2118 2119 2120 2121 2122
  }) {
    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.
2123 2124
    Color? begin;
    Color? end;
2125 2126 2127 2128 2129 2130 2131 2132 2133 2134
    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;
    }
2135
    final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
2136 2137 2138

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

  /// The preferred radius of the round tick mark.
  ///
2177
  /// If it is not provided, then 1/4 of the [SliderThemeData.trackHeight] is used.
2178
  final double? tickMarkRadius;
2179 2180 2181

  @override
  Size getPreferredSize({
2182
    required SliderThemeData sliderTheme,
2183 2184 2185
    bool isEnabled = false,
  }) {
    assert(sliderTheme.trackHeight != null);
2186
    return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
2187 2188 2189 2190 2191 2192
  }

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

2206
    final bool isBetweenThumbs;
2207 2208 2209 2210 2211 2212
    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;
    }
2213 2214 2215
    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)!;
2216 2217 2218 2219 2220 2221 2222 2223 2224 2225 2226 2227 2228 2229 2230 2231 2232 2233 2234 2235 2236 2237

    // 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({
2238 2239
    required SliderThemeData sliderTheme,
    required bool isEnabled,
2240 2241 2242 2243 2244 2245 2246 2247
  }) {
    return Size.zero;
  }

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

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

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

2341 2342
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2343
    return Size.fromRadius(isEnabled ? enabledThumbRadius : _disabledThumbRadius);
2344 2345 2346 2347 2348 2349
  }

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

2364 2365 2366 2367 2368 2369 2370 2371 2372
    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,
    );
2373

2374
    final Color color = colorTween.evaluate(enableAnimation)!;
2375 2376
    final double radius = radiusTween.evaluate(enableAnimation);

2377 2378 2379 2380 2381
    final Tween<double> elevationTween = Tween<double>(
      begin: elevation,
      end: pressedElevation,
    );

2382
    final double evaluatedElevation = elevationTween.evaluate(activationAnimation);
2383 2384
    final Path path = Path()
      ..addArc(Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), 0, math.pi * 2);
2385 2386 2387 2388 2389 2390 2391 2392 2393 2394 2395 2396 2397

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

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

2399 2400
    canvas.drawCircle(
      center,
2401 2402
      radius,
      Paint()..color = color,
2403
    );
2404 2405 2406
  }
}

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

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

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

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2452
    return Size.fromRadius(isEnabled ? enabledThumbRadius : _disabledThumbRadius);
2453 2454 2455 2456 2457
  }

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

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

2496
    final Color color = colorTween.evaluate(enableAnimation)!;
2497

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

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

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

2515
    canvas.drawCircle(
2516
      center,
2517
      radius,
2518
      Paint()..color = color,
2519 2520 2521 2522
    );
  }
}

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

2542 2543
  /// The preferred radius of the round thumb shape when enabled.
  ///
2544 2545
  /// If it is not provided, then half of the [SliderThemeData.trackHeight] is
  /// used.
2546
  final double overlayRadius;
2547 2548 2549

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
2550
    return Size.fromRadius(overlayRadius);
2551 2552 2553 2554 2555 2556
  }

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

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

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

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

  static const _RectangularSliderValueIndicatorPathPainter _pathPainter = _RectangularSliderValueIndicatorPathPainter();

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

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

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

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

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

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({
2744 2745 2746 2747 2748 2749
    required RenderBox parentBox,
    required Offset center,
    required TextPainter labelPainter,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required double scale,
2750 2751
  }) {
    assert(!sizeWithOverflow.isEmpty);
2752

2753 2754
    const double edgePadding = 8.0;
    final double rectangleWidth = _upperRectangleWidth(labelPainter, scale, textScaleFactor);
2755 2756 2757
    /// 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);
2758 2759 2760 2761 2762

    // 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.
2763 2764
    final double overflowLeft = math.max(0, rectangleWidth / 2 - globalCenter.dx + edgePadding);
    final double overflowRight = math.max(0, rectangleWidth / 2 - (sizeWithOverflow.width - globalCenter.dx - edgePadding));
2765 2766 2767 2768 2769 2770 2771 2772 2773 2774 2775 2776 2777 2778 2779 2780

    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({
2781 2782 2783 2784 2785 2786 2787 2788 2789
    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,
2790 2791 2792 2793 2794 2795 2796 2797 2798 2799 2800 2801 2802 2803 2804 2805 2806 2807 2808 2809 2810 2811 2812 2813 2814 2815 2816 2817 2818 2819 2820 2821 2822 2823 2824 2825 2826 2827 2828 2829 2830 2831 2832 2833 2834 2835 2836 2837 2838 2839 2840 2841 2842 2843 2844 2845 2846 2847 2848 2849 2850
  }) {
    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.
///
2851 2852 2853
/// ![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)
///
2854 2855 2856 2857 2858
/// 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.
2859
class PaddleSliderValueIndicatorShape extends SliderComponentShape {
2860
  /// Create a slider value indicator in the shape of an upside-down pear.
2861 2862
  const PaddleSliderValueIndicatorShape();

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

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

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

2910 2911
/// A variant shape of a [RangeSlider]'s value indicators. The value indicator
/// is in the shape of an upside-down pear.
2912
///
2913 2914 2915
/// ![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)
///
2916 2917 2918 2919 2920 2921 2922 2923 2924
/// 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();

2925
  static const _PaddleSliderValueIndicatorPathPainter _pathPainter = _PaddleSliderValueIndicatorPathPainter();
2926 2927

  @override
2928 2929 2930
  Size getPreferredSize(
    bool isEnabled,
    bool isDiscrete, {
2931 2932
    required TextPainter labelPainter,
    required double textScaleFactor,
2933
  }) {
2934
    assert(textScaleFactor >= 0);
2935
    return _pathPainter.getPreferredSize(labelPainter, textScaleFactor);
2936 2937
  }

2938 2939
  @override
  double getHorizontalShift({
2940 2941 2942 2943 2944 2945
    RenderBox? parentBox,
    Offset? center,
    TextPainter? labelPainter,
    Animation<double>? activationAnimation,
    double? textScaleFactor,
    Size? sizeWithOverflow,
2946 2947
  }) {
    return _pathPainter.getHorizontalShift(
2948 2949 2950 2951 2952
      center: center!,
      labelPainter: labelPainter!,
      scale: activationAnimation!.value,
      textScaleFactor: textScaleFactor!,
      sizeWithOverflow: sizeWithOverflow!,
2953 2954 2955
    );
  }

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

2992 2993
class _PaddleSliderValueIndicatorPathPainter {
  const _PaddleSliderValueIndicatorPathPainter();
2994

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

3032 3033
  Size getPreferredSize(
    TextPainter labelPainter,
3034
    double textScaleFactor,
3035
  ) {
3036
    assert(textScaleFactor >= 0);
3037 3038
    final double width = math.max(_minLabelWidth * textScaleFactor, labelPainter.width) + _labelPadding * 2 * textScaleFactor;
    return Size(width, _preferredHeight * textScaleFactor);
3039
  }
3040 3041 3042 3043

  // 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) {
3044
    assert(center.isFinite);
3045
    final Rect arcRect = Rect.fromCircle(center: center, radius: radius);
3046 3047 3048
    path.arcTo(arcRect, startAngle, endAngle - startAngle, false);
  }

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

3067 3068
  // 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.
3069 3070 3071 3072
  double _getIdealOffset(
    double halfWidthNeeded,
    double scale,
    Offset center,
3073
    double widthWithOverflow,
3074
  ) {
3075
    const double edgeMargin = 8.0;
3076
    final Rect topLobeRect = Rect.fromLTWH(
3077 3078 3079 3080 3081 3082 3083 3084 3085 3086
      -_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;
3087

3088 3089
    if (topLeft.dx < edgeMargin) {
      shift = edgeMargin - topLeft.dx;
3090
    }
3091

3092
    final double endGlobal = widthWithOverflow;
3093 3094
    if (bottomRight.dx > endGlobal - edgeMargin) {
      shift = endGlobal - edgeMargin - bottomRight.dx;
3095
    }
3096

3097
    shift = scale == 0.0 ? 0.0 : shift / scale;
3098 3099 3100 3101 3102 3103 3104
    if (shift < 0.0) {
      // Shifting to the left.
      shift = math.max(shift, -halfWidthNeeded);
    } else {
      // Shifting to the right.
      shift = math.min(shift, halfWidthNeeded);
    }
3105 3106 3107
    return shift;
  }

3108
  void paint(
3109 3110 3111 3112 3113
    Canvas canvas,
    Offset center,
    Paint paint,
    double scale,
    TextPainter labelPainter,
3114 3115
    double textScaleFactor,
    Size sizeWithOverflow,
3116
    Color? strokePaintColor,
3117
  ) {
3118 3119 3120 3121 3122
    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;
    }
3123
    assert(!sizeWithOverflow.isEmpty);
3124

3125
    // The entire value indicator should scale with the size of the label,
3126
    // to keep it large enough to encompass the label text.
3127 3128
    final double overallScale = scale * textScaleFactor;
    final double inverseTextScale = textScaleFactor != 0 ? 1.0 / textScaleFactor : 0.0;
3129 3130
    final double labelHalfWidth = labelPainter.width / 2.0;

3131 3132 3133 3134 3135 3136 3137 3138 3139 3140 3141 3142 3143 3144 3145 3146 3147 3148 3149 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159 3160
    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,
    );

3161
    // This is the needed extra width for the label. It is only positive when
3162
    // the label exceeds the minimum size contained by the round top lobe.
3163 3164 3165 3166 3167
    final double halfWidthNeeded = math.max(
      0.0,
      inverseTextScale * labelHalfWidth - (_topLobeRadius - _labelPadding),
    );

3168
    final double shift = _getIdealOffset( halfWidthNeeded, overallScale, center, sizeWithOverflow.width);
3169 3170
    final double leftWidthNeeded = halfWidthNeeded - shift;
    final double rightWidthNeeded = halfWidthNeeded + shift;
3171

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

3200 3201 3202 3203 3204 3205 3206 3207 3208 3209 3210 3211 3212 3213 3214 3215
    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;
    }());
3216

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

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

3254 3255 3256 3257
    canvas.drawPath(path, paint);

    // Draw the label.
    canvas.save();
3258
    canvas.translate(shift, -_distanceBetweenTopBottomCenters + neckStretch.dy);
3259
    canvas.scale(inverseTextScale, inverseTextScale);
3260
    labelPainter.paint(canvas, Offset.zero - Offset(labelHalfWidth, labelPainter.height / 2.0));
3261 3262 3263
    canvas.restore();
    canvas.restore();
  }
3264
}
3265

3266
/// A callback that formats a numeric value from a [Slider] or [RangeSlider] widget.
3267 3268 3269
///
/// See also:
///
3270
///  * [Slider.semanticFormatterCallback], which shows an example use case.
3271
///  * [RangeSlider.semanticFormatterCallback], which shows an example use case.
3272
typedef SemanticFormatterCallback = String Function(double value);
3273 3274 3275 3276 3277 3278 3279

/// 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.
///
3280
/// Override [SliderThemeData.thumbSelector] for custom thumb selection.
3281
typedef RangeThumbSelector = Thumb? Function(
3282 3283 3284 3285 3286 3287 3288
  TextDirection textDirection,
  RangeValues values,
  double tapValue,
  Size thumbSize,
  Size trackSize,
  double dx,
);
3289 3290 3291 3292

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

  @override
3323
  int get hashCode => Object.hash(start, end);
3324 3325 3326

  @override
  String toString() {
3327
    return '${objectRuntimeType(this, 'RangeValues')}($start, $end)';
3328 3329 3330 3331 3332 3333
  }
}

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

  @override
3364
  int get hashCode => Object.hash(start, end);
3365 3366 3367

  @override
  String toString() {
3368
    return '${objectRuntimeType(this, 'RangeLabels')}($start, $end)';
3369
  }
3370
}
3371 3372 3373 3374 3375 3376 3377 3378 3379 3380 3381 3382

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,
    );
  }
}
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

/// 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!,
3435
      strokePaintColor: sliderTheme.valueIndicatorStrokeColor,
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
    );
  }
}

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();
3552 3553 3554 3555 3556 3557 3558 3559 3560 3561
    trianglePath.addRRect(borderRect);

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

3562 3563 3564 3565 3566 3567 3568 3569 3570 3571 3572 3573
    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 / 1.75);
    final Offset halfLabelPainterOffset = Offset(labelPainter.width / 2, labelPainter.height / 2);
    final Offset labelOffset = boxCenter - halfLabelPainterOffset;
    labelPainter.paint(canvas, labelOffset);
    canvas.restore();
  }
}