[Flutter]Slider(スライダー)ウェジェットを使うには?

Flutter

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

Sliderウェジェットを使う方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

Sliderウェジェットを使うには、次の2つの引数を使います。

  • value : 現在の値
  • onChanged : 値が変化した時の処理

まず、値を指定するための変数を用意し、Sliderの引数「value」に指定します。

double _value = 0.0;

~~~~~~~~~~~~~~~~~

Slider(
  value: _value,
  ・・・
),

次に、引数「onChanged」に「(newValue){}」のような関数を指定します。

関数の引数では、変更後の値が格納されます。

最後に、関数内の処理で値の更新をします。

Slider(
  value: _value,
  onChanged: (newValue) {
    setState(() {
      _value = newValue; //値の更新
    });
  },
),

引数「value」と引数「onChanged」を使うことで、Sliderウェジェットを使うことが出来ます。

Sliderウェジェットは、「value」と「onChanged」の引数を使うことで、スライダーんの詳細な設定を行うことが出来ます。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Slider(
          value: _value,
          onChanged: (newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}

コメント

タイトルとURLをコピーしました