Flutter　Sliderの操作する部分の大きさを変えるサンプル

2023年10月12日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

SliderTheme(
  data: SliderThemeData(
    thumbShape: RoundSliderThumbShape(
      enabledThumbRadius: /*Sliderが有効な時の操作部分の大きさ*/,
      disabledThumbRadius: /*Sliderが無効な時の操作部分の大きさ*/,
    )

SliderをSliderThemeでラップし、SliderThemeの引数「data」にSliderThemeDataを指定します。
引数「thumbShape」にRoundSliderThumbShapeを指定します。
RoundSliderThumbShapeの引数「enabledThumbRadius」と引数「disabledThumbRadius」に大きさを指定します。

使用例

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