[Flutter]Slider(スライダー)のつまみ(thumb)の大きさ(size)を変えるには？

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

Sliderの操作する部分である「つまみ」の大きさを変える方法を紹介します。

方法
使用例

方法

Sliderのつまみの大きさを変えるには、SliderThemeを使います。

まず、SliderをSliderThemeでラップし、SliderThemeの引数「data」にSliderThemeDataを指定します。

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

そして、RoundSliderThumbShapeの引数「enabledThumbRadius」と引数「disabledThumbRadius」に大きさを指定します。

SliderTheme(
  data: SliderThemeData(
    thumbShape: RoundSliderThumbShape(
      enabledThumbRadius: /*Sliderが有効な時のつまみの大きさ*/,
      disabledThumbRadius: /*Sliderが無効な時のつまみの大きさ*/,
    ),
  ),
  child: Slider(
    value: _value,
    onChanged: (newValue) {
      ・・・
    },
  ),
),

SliderThemeを使うことで、Sliderのつまみの大きさを変えることが出来ます。

使用例

以下は、使用例です。

SliderTheme(
  data: SliderThemeData(
    thumbShape: RoundSliderThumbShape(
      enabledThumbRadius: 20.0,
      disabledThumbRadius: 15.0,
    ),
  ),
  child: Slider(
    value: _value,
    onChanged: _isDisabled
        ? null
        : (newValue) {
            setState(() {
              _value = newValue;
            });
          },
  ),
),