Flutter図鑑

Slider

Slider Widgetはユーザーが値を選択・調整するのに有効です。
ここではFlutterから提供されているSlider Widgetの使い方と応用例を解説します。

基本的な使用方法

  • Slider

Sliderは水平または垂直のバーと、その上を動かすためのつまみ（ハンドル）から構成されます。
onChangedの値をNullに設定することで、スライダーを非活性にすることができます。

Slider(
  value: sliderValue,
  max: 100,
  min: 0,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),
Slider(
  value: sliderValue, 
  max: 100, 
  min: 0, 
  onChanged: null
),

段階的なスライダー

divisionsを使用することで、Slider Widgetにどれだけ段階を設けるかを設定できます。
設定した数だけSliderがが分割され、段階的に値を選択できるようになります。

また、何の値を選択しているかを示すために、labelオプションを使用するのも有効です。

Slider(
  value: sliderValue,
  max: 100,
  divisions: 5,
  label: sliderValue.round().toString(),
  min: 0,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),

範囲スライダー

  • RangeSlider

ある範囲の値をユーザーから取得するためにはRangeSliderを使用することで対応できます。
Sliderと異なる点は、valueとlabelが独自のclassを使用して定義しなければなりません。

また、onChangedで受け取れる値もRangeValuesに変化していることにも注意が必要ですが、
言及したこと以外には Slider と RangeSlider の使用感の差に大きな違いはありません。

RangeSlider(
  values: sliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  labels: RangeLabels(
    sliderValue.start.round().toString(),
    sliderValue.end.round().toString(),
  ),
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),

色の変更

activeColor: 選択されている値以下の背景色とボタンの色
inactiveColor: 選択されている値以上の背景色
などの値を変更することで、Slider Widgetでは細かく色を指定することができます。

Slider(
  activeColor: Colors.blue,
  inactiveColor: Colors.blue[100],
  value: sliderValue,
  max: 100,
  divisions: 5,
  label: sliderValue.round().toString(),
  min: 0,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  }
),

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next