FlutterのSwitchウィジェットは、真偽値（true/false）を表すトグルボタンを作成するために使用されます。 このウィジェットは、ユーザーがオン/オフを切り替えることができる場合に特に便利です。
ここでは、FlutterのSwitchウィジェットの使い方について説明します。
Switchの使い方
以下のように、基本的なSwitchウィジェットを作成することができます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
bool _switchValue = false;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
body: Center(
child: MyButton(),
),
),
);
}
}
class MyButton extends StatefulWidget {
@override
_MyButtonState createState() => _MyButtonState();
}
class _MyButtonState extends State<MyButton> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
);
}
}
このコードでは、valueプロパティに真偽値の変数_switchValueを渡します。onChangedプロパティには、スイッチの状態が変更されたときに呼び出される関数を指定します。この例では、setState関数を使用して_switchValueを更新しています。
Switchのカスタマイズ
Switchウィジェットには多くのカスタマイズオプションがあります。以下にいくつかの例を示します。
サイズの変更
Switchウィジェットのサイズを変更するには、SwitchウィジェットをTransform.scaleウィジェットでラップします。以下は、Switchウィジェットのサイズを2倍にする例です。(以降は上記サンプルコードのSwitchウィジットに関連する部分のみ抜粋して記載します)
Transform.scale(
scale: 2.0,
child: Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
),
)
カスタムカラー
Switchウィジェットのカスタムカラーを設定するには、activeColorとinactiveThumbColor/inactiveTrackColorプロパティを使用します。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
activeColor: Colors.red,
inactiveThumbColor: Colors.purple[100],
inactiveTrackColor: Colors.green,
)Switchがオフの時のカラーはinactiveThumbColor/inactiveTrackColorで指定します。上記サンプルではinactiveThumbColor(Switchのボタン部分)は薄い紫色、inactiveTrackColor(Switchトグルの背景)は緑色で指定しています。
Switchがオンの時のカラーはactiveColorで指定します。上記サンプルではSwichがオンになったら赤色に変わります。
テキストの追加
Switchウィジェットにテキストを追加するには、SwitchListTileウィジェットを使用します。以下は、スイッチの左側にテキストを追加する例です。
SwitchListTile(
title: Text('スイッチ'),
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
secondary: Icon(Icons.lightbulb),
)Switchウィジェットのプロパティ
value
valueプロパティは、スイッチの現在の状態を表す真偽値（true/false）を設定します。
bool _switchValue = false;
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
)onChanged
onChangedプロパティは、スイッチが切り替わったときに呼び出されるコールバック関数を指定します。このコールバック関数は、valueプロパティが変更されたときに新しい値を受け取ります。
bool _switchValue = false;
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
)activeColor
activeColorプロパティは、スイッチがオンの場合に使用される色を設定します。このプロパティは、Colorsクラスの色を受け取ります。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
activeColor: Colors.blue,
)activeTrackColor
activeTrackColorプロパティは、スイッチがオンの場合に使用されるトラックの色を設定します。トラックとは、スイッチの背景部分のことです。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
activeTrackColor: Colors.blue[200],
)inactiveTrackColor
inactiveTrackColorプロパティは、スイッチがオフの場合に使用されるトラックの色を設定します。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
inactiveTrackColor: Colors.grey[300],
)dragStartBehavior
dragStartBehaviorプロパティは、スイッチがドラッグされたときにどのように反応するかを指定します。DragStartBehavior列挙型の値を受け取ります。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)dragStartBehaviorプロパティの値には、以下の列挙型のいずれかを指定できます。
DragStartBehavior.start: オブジェクトの開始位置でドラッグが開始されたときに反応します。DragStartBehavior.down: オブジェクトがタップされたときに反応します。DragStartBehavior.deferred: オブジェクトがタップされても、タップ操作が継続された場合にのみ反応します。
materialTapTargetSize
materialTapTargetSizeプロパティは、スイッチのタップ可能領域のサイズを指定します。MaterialTapTargetSize列挙型の値を受け取ります。
Switch(
value: _switchValue,
onChanged: (value) {
setState(() {
_switchValue = value;
});
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
)materialTapTargetSizeプロパティの値には、以下の列挙型のいずれかを指定できます。
MaterialTapTargetSize.padded: デフォルト値で、スイッチの周囲に8.0のパディングを追加します。MaterialTapTargetSize.shrinkWrap: スイッチのサイズに合わせます。
まとめ
FlutterのSwitchウィジェットは、スイッチを表示するための簡単な方法を提供します。基本的な使い方は、valueプロパティとonChangedプロパティを設定することです。また、カスタマイズすることもできます。例えば、activeColorプロパティを設定してスイッチの色を変更することができます。さらに、activeTrackColorプロパティとinactiveTrackColorプロパティを設定して、トラックの色を変更することもできます。