段階的または連続的に数値を設定するのに便利なスライダー

スライダー (Slider) ウィジェットは、特定の範囲から値を選択する場合に使用します。

スライダーの値の型は double です。デフォルトでは最小値 min と最大値 max の間の連続な値をとります。(double で表現できる限り)

連続な値ではなく、もし飛び飛びの値を設定したい場合は、divisions プロパティを設定します。ステップ量は (max-min)/divisions になります。 例えば min が 0、max が 100 で、divisions を 5 に設定すると、 0 から 100 の範囲を 5 等分するので、(100 - 0)/5 = 20 おきの値をとります。

ここでは次の画面のように 0 から 100 まで、20 おきの値を取るようなスライダーを作りましょう。

コードは次の通りです。

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  var _sliderValue = 0.0;
  var _labelText = 'Select value';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slider'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Text(
              _labelText,
              style: TextStyle(fontSize: 24),
            ),
            Slider(
              value: _sliderValue,
              min: 0,
              max: 100,
              divisions: 5,
              onChanged: (double value) {
                setState(() {
                  _sliderValue = value.roundToDouble();
                  _labelText = 'value = $_sliderValue';
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

スライダーの値に変更があった時に、変更後の値が渡されて onChanged ハンドラがコールバックされます。

ここでは onChanged ハンドラにて、roundToDouble() メソッドで、 念のため数字を丸めてから値を取り置き、表示のラベルを更新しています。