sliderTheme static method
SliderThemeData
sliderTheme({
- required ColorScheme colorScheme,
- SchemeColor? baseSchemeColor,
- double? trackHeight,
- ShowValueIndicator? showValueIndicator,
- FlexSliderIndicatorType? valueIndicatorType,
- Color? valueIndicatorColor,
- TextStyle? valueIndicatorTextStyle,
- bool? useTintedInteraction,
- bool? useTintedDisable,
- 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,
);
}