trackColor property

WidgetStateProperty<Color?>? trackColor
final

The color of this Switch's track.

Resolved in the following states:

This example resolves the trackColor based on the current WidgetState of the Switch, providing a different Color when it is WidgetState.disabled.

Switch(
  value: true,
  onChanged: (bool value) { },
  thumbColor: WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
    if (states.contains(WidgetState.disabled)) {
      return Colors.orange.withValues(alpha: .48);
    }
    return Colors.orange;
  }),
)

If null, then the value of activeTrackColor is used in the selected state and inactiveTrackColor in the default state. If that is also null, then the value of SwitchThemeData.trackColor is used. If that is also null, then the following colors are used:

State Light theme Dark theme
Default Color(0x52000000) Colors.white30
Selected activeThumbColor with alpha 0x80 activeThumbColor with alpha 0x80
Disabled Colors.black12 Colors.white10

Implementation

// TODO(framework): Add unit tests to this code snippet.
// https://github.com/flutter/flutter/issues/188530
///
/// This example resolves the [trackColor] based on the current
/// [WidgetState] of the [Switch], providing a different [Color] when it is
/// [WidgetState.disabled].
///
/// ```dart
/// Switch(
///   value: true,
///   onChanged: (bool value) { },
///   thumbColor: WidgetStateProperty.resolveWith<Color>((Set<WidgetState> states) {
///     if (states.contains(WidgetState.disabled)) {
///       return Colors.orange.withValues(alpha: .48);
///     }
///     return Colors.orange;
///   }),
/// )
/// ```
///
/// </callout-box>
/// {@endtemplate}
///
/// If null, then the value of [activeTrackColor] is used in the selected
/// state and [inactiveTrackColor] in the default state. If that is also null,
/// then the value of [SwitchThemeData.trackColor] is used. If that is also
/// null, then the following colors are used:
///
/// | State    | Light theme                     | Dark theme                      |
/// |----------|---------------------------------|---------------------------------|
/// | Default  | `Color(0x52000000)`             | `Colors.white30`                |
/// | Selected | [activeThumbColor] with alpha `0x80` | [activeThumbColor] with alpha `0x80` |
/// | Disabled | `Colors.black12`                | `Colors.white10`                |
final WidgetStateProperty<Color?>? trackColor;