[Flutter]Slider(スライダー)の分割線(divisions)の色(color)を設定するには？

どうも、ちょげ(@chogetarou)です。

Sliderの値の間隔ごとに引かれている線の色を設定する方法を紹介します。

方法
使用例

方法

Sliderの分割線の色を設定するには、SliderThemeを使います。

まず、SliderをSliderThemeでラップします。

次に、SliderThemeの引数「data」にSliderThemeDataを指定します。

そして、SliderThemeDataの引数「activeTickMarkColor」と引数「inactiveTickMarkColor」に色を指定します。

SliderTheme(
  data: SliderThemeData(
    activeTickMarkColor: /*最低値からポインターまでの分割線の色*/,
    inactiveTickMarkColor: /*ポインターから最大値までの分割線の色*/,
  ),
  child: Slider(
    value: _value,
    onChanged: (newValue) {
      setState(() {
        _value = newValue;
      });
    },
  ),
),

SliderThemeを使うことで、Sliderの分割線の色を設定することが出来ます。

使用例

以下は、使用例です。

SliderTheme(
  data: SliderThemeData(
    activeTickMarkColor: Colors.white,
    inactiveTickMarkColor: Colors.black,
  ),
  child: Slider(
    divisions: 10,
    value: _value,
    onChanged: (newValue) {
      setState(() {
        _value = newValue;
      });
    },
  ),
),