sliderTheme static method

SliderThemeData sliderTheme({
  1. required ColorScheme colorScheme,
  2. SchemeColor? baseSchemeColor,
  3. double? trackHeight,
  4. ShowValueIndicator? showValueIndicator,
  5. FlexSliderIndicatorType? valueIndicatorType,
  6. Color? valueIndicatorColor,
  7. TextStyle? valueIndicatorTextStyle,
  8. bool? useTintedInteraction,
  9. bool? useTintedDisable,
  10. bool? useMaterial3,
})

An opinionated SliderThemeData theme for the Slider.

Requires a ColorScheme in colorscheme. The color scheme would typically be equal the color scheme also used to define the color scheme for your app theme.

Implementation

static SliderThemeData sliderTheme({
  /// Typically the same `ColorScheme` that is also used for your `ThemeData`.
  required final ColorScheme colorScheme,

  /// Selects which color from the passed in colorScheme to use as the main
  /// color for the Slider.
  ///
  /// All colors in the color scheme are not good choices, but some work well.
  ///
  /// If not defined, [colorScheme.primary] will be used.
  final SchemeColor? baseSchemeColor,

  /// The height of the [Slider] track.
  ///
  /// If not defined, defaults to 4 via Flutter SDK defaults.
  final double? trackHeight,

  /// Whether the value indicator should be shown for different types of
  /// sliders.
  ///
  /// By default, [showValueIndicator] is set to
  /// [ShowValueIndicator.onlyForDiscrete]. The value indicator is only shown
  /// when the thumb is being touched.
  final ShowValueIndicator? showValueIndicator,

  /// Enum used to select the type of built-in value indicator used by
  /// [Slider].
  ///
  /// The current two options included Material 2 default
  /// [RectangularSliderValueIndicatorShape] and Material 3 default
  /// [DropSliderValueIndicatorShape].
  ///
  /// If not defined, the default for the M2/M3 mode is used.
  final FlexSliderIndicatorType? valueIndicatorType,

  /// The color given to the [valueIndicatorShape] to draw itself with.
  ///
  /// If undefined, defaults to using Flutter SDK's logic for the color.
  final Color? valueIndicatorColor,

  /// The text style for the text on the value indicator.
  ///
  /// If undefined, defaults to using Flutter SDK's logic for the TextStyle.
  final TextStyle? valueIndicatorTextStyle,

  /// Defines if the theme uses tinted interaction effects.
  ///
  /// If undefined, defaults to false.
  final bool? useTintedInteraction,

  /// Defines if the theme uses tinted disabled color.
  ///
  /// If undefined, defaults to false.
  final bool? useTintedDisable,

  /// A temporary flag used to opt-in to Material 3 features.
  ///
  /// If set to true, the theme will use Material3 default styles when
  /// properties are undefined, if false defaults will use FlexColorScheme's
  /// own opinionated default values.
  ///
  /// The M2/M3 defaults will only be used for properties that are not
  /// defined, if defined they keep their defined values.
  ///
  /// If undefined, defaults to false.
  final bool? useMaterial3,
}) {
  final bool useM3 = useMaterial3 ?? false;
  final bool tintInteract = useTintedInteraction ?? false;
  final bool tintDisable = useTintedDisable ?? false;
  // Get selected color, defaults to primary.
  final Color baseColor =
      schemeColor(baseSchemeColor ?? SchemeColor.primary, colorScheme);
  final Color onBaseColor =
      schemeColorPair(baseSchemeColor ?? SchemeColor.primary, colorScheme);

  // Using these tinted overlay variable in all themes for ease of
  // reasoning and duplication.
  final Color overlay = colorScheme.surface;
  final Color tint = baseColor;
  final double factor = _tintAlphaFactor(tint, colorScheme.brightness, true);

  SliderComponentShape effectiveIndicatorShape() {
    if (valueIndicatorType == null) {
      return useM3
          ? const DropSliderValueIndicatorShape()
          : const RectangularSliderValueIndicatorShape();
    } else {
      switch (valueIndicatorType) {
        case FlexSliderIndicatorType.rectangular:
          return const RectangularSliderValueIndicatorShape();
        case FlexSliderIndicatorType.drop:
          return const DropSliderValueIndicatorShape();
      }
    }
  }

  Color? overlayColor() =>
      MaterialStateColor.resolveWith((Set<MaterialState> states) {
        if (states.contains(MaterialState.hovered)) {
          if (tintInteract) return tintedHovered(overlay, tint, factor);
          return colorScheme.primary.withAlpha(kAlphaHovered);
        }
        if (states.contains(MaterialState.focused)) {
          if (tintInteract) return tintedFocused(overlay, tint, factor);
          return colorScheme.primary.withAlpha(kAlphaFocused);
        }
        if (states.contains(MaterialState.dragged)) {
          if (tintInteract) return tintedFocused(overlay, tint, factor);
          return colorScheme.primary.withAlpha(kAlphaFocused);
        }
        return Colors.transparent;
      });

  final SliderComponentShape indicatorShape = effectiveIndicatorShape();

  return SliderThemeData(
    trackHeight: trackHeight,
    activeTrackColor: baseColor,
    inactiveTrackColor: baseColor.withAlpha(kAlphaLowDisabled),
    disabledActiveTrackColor: tintDisable
        ? tintedDisable(colorScheme.onSurface, baseColor)
        : colorScheme.onSurface.withAlpha(kAlphaMediumDisabled),
    disabledInactiveTrackColor:
        colorScheme.onSurface.withAlpha(kAlphaVeryLowDisabled),
    activeTickMarkColor: onBaseColor.withAlpha(kAlphaSliderTickMark),
    inactiveTickMarkColor: baseColor.withAlpha(kAlphaSliderTickMark),
    disabledActiveTickMarkColor: onBaseColor.withAlpha(kAlphaVeryLowDisabled),
    disabledInactiveTickMarkColor:
        colorScheme.onSurface.withAlpha(kAlphaVeryLowDisabled),
    thumbColor: baseColor,
    disabledThumbColor: tintDisable
        ? Color.alphaBlend(tintedDisable(colorScheme.onSurface, baseColor),
            colorScheme.surface)
        : Color.alphaBlend(colorScheme.onSurface.withAlpha(kAlphaDisabled),
            colorScheme.surface),
    overlayColor: overlayColor(),
    showValueIndicator: showValueIndicator,
    valueIndicatorColor: valueIndicatorColor,
    valueIndicatorShape: indicatorShape,
    valueIndicatorTextStyle: valueIndicatorTextStyle,
    // TODO(rydmike): RangeSlider to use real M3 style drop when supported.
    // Use the almost matching drop style for RangeSlider
    rangeValueIndicatorShape: indicatorShape is DropSliderValueIndicatorShape
        ? const PaddleRangeSliderValueIndicatorShape()
        : null,
  );
}