[Flutter]Cupertinoでトグルボタンを追加する方法

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

Cupertinoでトグルボタンを追加する方法を紹介します。

方法

Cupertinoでトグルボタンを追加するには、CupertinoSwitchウェジェットを使います。

CupertinoSwitch(
{
  Key key,//キー
  @required bool value, //ON/OFFを判断する値
  @required ValueChanged<bool> onChanged, //タップした時の処理
  Color activeColor, //ONの時の色
  Color trackColor,//OFFの時の色
  DragStartBehavior dragStartBehavior: DragStartBehavior.start,//スイッチの向き
}
);

CupertinoSwitchを使うには、引数「value」に値を指定し、引数「onChanged」に関数を指定します。

基本的には、「value」にはbool型の変数、「onChanged」には変数の値を変更する関数を設定します。

  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;
              });
            }),
      ),
    );
  }

onChangedに指定する関数は、引数で変更した後の値を受け取ることが出来ます。

まとめ

Cupertinoでトグルボタンを追加するには、「CupertinoSwicthウェジェット」を使います。