Flutter図鑑

Switch

Switch WidgetはtrueまたはfalseのBoolean型（真偽値）をユーザーから取得する場合に有効です。
ここではFlutterから提供されているSwitch Widgetの使い方と応用例を解説します。

基本的な使用方法

  • Switch

Switchは一般的なSwitchボタンを作成したい場合に有効です。
onChangedでチェックされたどうかを取得することができます。

また、onChangedの値をNullに設定すると、ボタンを非活性にすることができます。

bool isChecked = true;
Widget build(BuildContext context) {
  return Switch(
    value: isChecked,
    onChanged: (value) {
      setState(() {
        isChecked = value;
      });
    }
  )
}

ラベル付きのボタン

  • SwitchListTile

SwitchListTileはラベル付きのSwitchを作成したい場合に有効です。
titleもしくはsubtitleの値を変更し、Switchの説明をつけることができます。

また、secondaryを使用することで、ラベルの横にアイコンなどの自由なWidgetを表示することができます。

SwitchListTile(
  title: const Text("Notification"),
  subtitle: const Text("Allow notifications"),
  secondary: const SizedBox(
    width: 40,
    height: 80,
    child: Icon(Icons.notifications_none_rounded),
  ),
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
),

色の変更

activeTrackColor: value=true の時の背景の色
inactiveTrackColor: value=false の時の背景の色
などの値を変更することで、Switch Widgetでは細かく色を指定することができます。

Switch(
  activeTrackColor: Colors.blue[800],
  inactiveTrackColor: Colors.blue[200],
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  }
),

アイコン付きのボタン

thumbIconを使用することで、ボタン内のアイコンを指定することができます。
ボタンの状態によって変更できるため、自由度が高くアイコンを設定できます。

Switch(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
  thumbIcon: MaterialStateProperty.resolveWith((states) {
    if (states.contains(MaterialState.selected)) {
      return const Icon(Icons.check);
    }
    return const Icon(Icons.close);
  }),
)

API

さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。

Previous
Next