Sliderウィジェットとは

api.flutter.dev

マテリアルデザインのスライダーを生成するウィジェット。特定範囲の中で数値を入力するUIに使用される。

使い方

基本系

Slider(
    value: ..., // スライダーで指定する値
    onChanged: ..., // スライダーで値を変更した際のイベントハンドラ
  )

value: スライダーで扱う変数を指定する
onChanged: スライダーで値を変更した際のイベントハンドラ。引数には変更後の値が渡される

例

class SliderTest extends StatefulWidget {
  const SliderTest({Key? key}) : super(key: key);

  @override
  State<SliderTest> createState() => _SliderTestState();
}

class _SliderTestState extends State<SliderTest> {
  double sliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(sliderValue.toString()),
        SizedBox(
          height: 10,
        ),
        Slider(
            value: sliderValue,
            onChanged: (value) {
              setState(() {
                sliderValue = value;
              });
            })
      ],
    );
  }
}

画像の通り値はdouble型で渡される。通常スライダーで扱いたい値は整数であることが多いので、 floorメソッドなどで端数処理をする必要がある。

最大値、最小値を指定

max, minプロパティで指定する。例えば最大値を10、最小値を-10に指定する場合は以下のように記述する。

Slider(
    max: 10.0, // 最大値
    min: -10.0, // 最小値
    value: ..., 
    onChanged: ..., 
    )

スライダーから指を離した際のイベントを指定

onChangeEndにイベントハンドラを指定する。形式はonChangedと同様で引数に変更後の値が渡される。

Slider(
  value: ..., 
  onChanged: ..., 
  onChangeEnd: ..., // 指を離した際に実行したいイベントハンドラ
)

用途は「値が確定した場合のみで実行したい処理を渡す」こと。例えば値が確定した際のみで非同期処理を行う場合、onChangedで行ってしまうとレンダリングがもたつく可能性がある。そこでonChangedEndで指定することで値が確定後に実行するためレンダリングが滑らかになる。

分割数の指定

divisionsプロパティで指定する。例えば最大値10、最小値-10のスライダーを20分割する場合、 divisionsに20を渡す。

Slider(
  max: 10,
  min: -10,
  divisions: 20, // 分割数を指定
  value: ...,
  onChanged: ...,
)

これで1単位で値を指定できる。

ラベルの表示

ラベルとは以下の画像のように、スライダーをタップすると現在指定されている値を表示してくれるもの。

これを表示するにはlabelプロパティに表示したい文字列を渡す。

Slider(
  label: ..., // 表示したい文字列を指定する
  value: ...,
  onChanged: ...,
)

デザイン

ノブの色を指定

ノブはスライダーの値を変更する際にタップする部分。色を変更する場合にthumbColorプロパティで色を指定する。

Slider(
  thumbColor: Colors.pink, // ノブの色を指定
  value: ...,
  onChanged: ...,
)

全体の色の指定

スライダー左側の色を指定するにはactiveColorプロパティを指定する。この時ノブの色も変更される。

Slider(
  activeColor: Colors.pink, // スライダー左側の色を指定
  value: ...,
  onChanged: ...,
)

スライダー右側の色を指定するにはinactiveColorプロパティを指定する。この時ノブの色は変わらない。

Slider(
  inactiveColor: Colors.pink, // スライダー右側の色を指定
  value: ...,
  onChanged: ...,
)

ランキング参加中

プログラミング

すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】Sliderウィジェットの使い方、デザイン