[Flutter]CupertinoSwitchの使い方

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

iOS風のトグルボタンを実装するCupertinoSwitchの使い方を解説します。

使い方

CupertinoSwitchは、最低次の２つの引数を指定する必要があります。

• value : ボタンがONかOFFかを判断する値
• onChanged : ボタンがタップされた時の処理

「value」が「true」ならボタンがONになり、「false」ならボタンが「false」になります。

そして、ボタンがタップされると「onChanged」に指定した関数が呼び出されます。

基本的には、「value」には、bool型の変数を指定します。

また、onChangedには、「(value){}」のような関数で、変数の値を変える処理を行います。

  bool _isOn = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
      ),
      body: Center(
        child: CupertinoSwitch(
            value: _isOn,
            onChanged: (value) {
              setState(() {
                _isOn = value; //変数の変更
              });
            }),
      ),
    );
  }

ON/OFFの色

CupertinoSwitchでは、ONとOFFの色をそれぞれ設定することが出来ます。

ONの色を設定するには引数「activeColor」、OFFの色を設定するには「trackColor」を使います。

        CupertinoSwitch(
          activeColor: Colors.pink, //ONの色
          trackColor: Colors.blueGrey, //OFFの色
          value: _isOn,
          onChanged: (value) {
            setState(() {
              _isOn = value;
            });
          },
        ),

ボタンの挙動

引数「dragStartBehavior」でボタンの挙動を設定することが出来ます。

ボタンの挙動といっても、ボタンをドラッグする時のほんのわずかな違いです。

気になる方は、確認してみてください。

CupertinoSwitch(
          dragStartBehavior: DragStartBehavior.start,//もしくはDragStartBehavior.downが設定できる
          value: _isOn,
          onChanged: (value) {
            setState(() {
              _isOn = value;
            });
          },
        ),

まとめ

CupertinoSwitchを使うには、「value」にBool型の変数を指定し、「onChanged」で変数の値を変更する関数を指定します。

他の引数では、ボタンの設定をすることが出来ます。