[Flutter]スイッチボタンを追加する方法

Flutter

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

Flutterでスイッチボタンを追加する方法を紹介します。

スポンサーリンク

方法

スイッチボタンを追加するには、「material」パッケージの「Switch」ウェジェットを使います。

Switchウェジェットは、スイッチボタンを表示するもので、次の2つの引数を指定して使います。

  • value : ボタンの状態を判断するための値
  • onChanged : 値が変更された時の処理

iOS風のトグルボタンの場合は、「CupertinoSwitch」を使います。

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

使い方

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

まず、bool型の変数を用意します。

bool isOn = true;

次に、Switchウェジェットを配置し、用意した変数を「value」に指定します。

Switch(
     value: _isOn,
),

最後に、引数「onChanged」に「value」に指定した変数を変更する処理をします。

変数を変更する際には、StatefulWidgetの「setState」を使います。

Switch(
  value: _isOn,
  onChanged: (value) {
    setState(
      () {
        _isOn = value;
      },
    );
  },
),

まとめ

スイッチボタンを追加するには、「material」パッケージの「Switchウェジェット」を使います。

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

コメント

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