Flutterは、美しくネイティブ感のあるアプリケーションを作成するためのUIツールキットです。その中には多数のウィジェットが含まれており、その一つがRadioウィジェットです。このブログでは、Radioウィジェットの詳しい使い方を解説します。
目次
Radioウィジェットとは？
Radioウィジェットは、ユーザーが複数のオプションから一つを選択するときに使用されます。一度に一つの項目しか選択できない点が特徴で、選択肢が切り替わると、前の選択は自動的に解除されます。このような性質から、一連の関連する選択肢から一つを選ぶ場合、特に有用です。
基本的な使い方
Radioウィジェットを作成するには、まず以下のようにRadioクラスのインスタンスを作成します。
Radio(
value: 1,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
)ここでは、3つの重要なパラメーターを指定しています。
value: このラジオボタンの値を表します。この値は任意の型であることができます（例えば、数値、文字列、列挙型など）。groupValue: 現在選択されているラジオボタンの値を表します。選択されたラジオボタンのvalueとgroupValueが一致する場合、そのラジオボタンは選択状態となります。onChanged: ラジオボタンがタップされたときに呼び出されるコールバック関数です。この関数は、タップされたラジオボタンの値を引数として受け取ります。
setSelectedRadio関数は、新たに選択されたラジオボタンの値をselectedRadio変数に設定するためのものです。この関数は通常、setState関数内で呼び出され、UIが更新されるようにします。
void setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}主なプロパティ
Radioウィジットは、以下のようなプロパティを持っています。
value: このラジオボタンの値を設定します。これは通常、一連のラジオボタンに関連付けられた特定のオプションを表します。groupValue: 現在選択されているラジオボタンの値を表します。一連のラジオボタンがある場合、選択されているボタンのvalueはgroupValueと等しくなります。onChanged: ラジオボタンがタップされたときに呼び出されるコールバック関数です。通常、この関数内でsetStateを呼び出してgroupValueを更新します。activeColor: 選択されたラジオボタンの色を設定します。focusColor: ラジオボタンがフォーカスされているときの色を設定します。hoverColor: ラジオボタンの上にマウスカーソルが移動したときの色を設定します。materialTapTargetSize: タップ可能な領域のサイズを設定します。デフォルトでは、マテリアルデザインのガイドラインに従って設定されます。autofocus: ラジオボタンが自動的にフォーカスを受け取るかどうかを制御します。デフォルトでは、この値はfalseです。toggleable:trueに設定すると、選択されたラジオボタンを再度タップして選択を解除することができます。デフォルトでは、この値はfalseで、ラジオボタンはトグルすることはできません。
上記はRadioウィジットの主なプロパティです。他にも細かい設定を行うためのプロパティがいくつかありますが、これらは最も一般的に使用されるものです。
まとめ
以上が、FlutterのRadioウィジェットの基本的な使い方です。このウィジェットを使って、ユーザーが複数の選択肢から一つを選ぶインターフェースを簡単に作成することができます。