[Flutter]iOS風(cupertino)のスライダー(Slider)を表示するには？

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

iOS風のスライダーを表示する方法を紹介します。

方法
使用例

方法

iOS風のスライダーを表示するには、CupertinoSliderを使います。

まず、Cupertinoをインポートします。

import 'package:flutter/cupertino.dart';

次に、iOS風のスライダーを表示したい場所に、CupertinoSliderを指定します。

そして、CupertinoSliderの引数「value」に現在値、引数「onChanged」に値を更新する関数を指定します。

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

CupertinoSliderを使うことで、iOS風のスライダーを表示することが出来ます。

使用例

以下は、使用例です。

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

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

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